feat(src/theme): Scrollbar theme (#563)

This commit is contained in:
Sorin Davidoi 2018-01-25 18:17:02 +01:00 committed by Michael Bryan
parent adc1f4ade7
commit 186e649530
4 changed files with 84 additions and 0 deletions

View File

@ -340,6 +340,12 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
background-color: #fafafa;
color: #364149;
}
.light .sidebar::-webkit-scrollbar {
background: #fafafa;
}
.light .sidebar::-webkit-scrollbar-thumb {
background: #364149;
}
.light .chapter li {
color: #aaa;
}
@ -464,6 +470,12 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
.light .icon-button i {
margin: 0;
}
.light ::-webkit-scrollbar {
background: #fff;
}
.light ::-webkit-scrollbar-thumb {
background: #333;
}
.coal {
color: #98a3ad;
background-color: #141617;
@ -494,6 +506,12 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
background-color: #292c2f;
color: #a1adb8;
}
.coal .sidebar::-webkit-scrollbar {
background: #292c2f;
}
.coal .sidebar::-webkit-scrollbar-thumb {
background: #a1adb8;
}
.coal .chapter li {
color: #505254;
}
@ -618,6 +636,12 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
.coal .icon-button i {
margin: 0;
}
.coal ::-webkit-scrollbar {
background: #141617;
}
.coal ::-webkit-scrollbar-thumb {
background: #98a3ad;
}
.navy {
color: #bcbdd0;
background-color: #161923;
@ -648,6 +672,12 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
background-color: #282d3f;
color: #c8c9db;
}
.navy .sidebar::-webkit-scrollbar {
background: #282d3f;
}
.navy .sidebar::-webkit-scrollbar-thumb {
background: #c8c9db;
}
.navy .chapter li {
color: #505274;
}
@ -772,6 +802,12 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
.navy .icon-button i {
margin: 0;
}
.navy ::-webkit-scrollbar {
background: #161923;
}
.navy ::-webkit-scrollbar-thumb {
background: #bcbdd0;
}
.rust {
color: #262625;
background-color: #e1e1db;
@ -802,6 +838,12 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
background-color: #3b2e2a;
color: #c8c9db;
}
.rust .sidebar::-webkit-scrollbar {
background: #3b2e2a;
}
.rust .sidebar::-webkit-scrollbar-thumb {
background: #c8c9db;
}
.rust .chapter li {
color: #505254;
}
@ -926,6 +968,12 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
.rust .icon-button i {
margin: 0;
}
.rust ::-webkit-scrollbar {
background: #e1e1db;
}
.rust ::-webkit-scrollbar-thumb {
background: #262625;
}
.ayu {
color: #c5c5c5;
background-color: #0f1419;
@ -956,6 +1004,12 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
background-color: #14191f;
color: #c8c9db;
}
.ayu .sidebar::-webkit-scrollbar {
background: #14191f;
}
.ayu .sidebar::-webkit-scrollbar-thumb {
background: #c8c9db;
}
.ayu .chapter li {
color: #5c6773;
}
@ -1080,6 +1134,12 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
.ayu .icon-button i {
margin: 0;
}
.ayu ::-webkit-scrollbar {
background: #0f1419;
}
.ayu ::-webkit-scrollbar-thumb {
background: #c5c5c5;
}
@media only print {
#sidebar,
#menu-bar,

View File

@ -279,6 +279,7 @@ function playpen_text(playpen) {
})();
(function themes() {
var html = document.querySelector('html');
var themeToggleButton = document.getElementById('theme-toggle');
var themePopup = document.getElementById('theme-list');
var themeColorMetaTag = document.querySelector('meta[name="theme-color"]');
@ -331,9 +332,15 @@ function playpen_text(playpen) {
});
}
var previousTheme;
try { previousTheme = localStorage.getItem('mdbook-theme'); } catch (e) { }
if (previousTheme === null || previousTheme === undefined) { previousTheme = 'light'; }
try { localStorage.setItem('mdbook-theme', theme); } catch (e) { }
document.body.className = theme;
html.classList.remove(previousTheme);
html.classList.add(theme);
}
// Set theme

View File

@ -65,6 +65,7 @@
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
if (theme === null || theme === undefined) { theme = 'light'; }
document.body.className = theme;
document.querySelector('html').className = theme;
</script>
<!-- Hide / unhide sidebar before it is displayed -->

View File

@ -32,6 +32,14 @@
.sidebar {
background-color: $sidebar-bg
color: $sidebar-fg
&::-webkit-scrollbar {
background: $sidebar-bg;
}
&::-webkit-scrollbar-thumb {
background: $sidebar-fg;
}
}
.chapter li {
@ -172,4 +180,12 @@
margin: 0;
}
}
::-webkit-scrollbar {
background: $bg;
}
::-webkit-scrollbar-thumb {
background: $fg;
}
}