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

View File

@ -279,6 +279,7 @@ function playpen_text(playpen) {
})(); })();
(function themes() { (function themes() {
var html = document.querySelector('html');
var themeToggleButton = document.getElementById('theme-toggle'); var themeToggleButton = document.getElementById('theme-toggle');
var themePopup = document.getElementById('theme-list'); var themePopup = document.getElementById('theme-list');
var themeColorMetaTag = document.querySelector('meta[name="theme-color"]'); 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) { } try { localStorage.setItem('mdbook-theme', theme); } catch (e) { }
document.body.className = theme; document.body.className = theme;
html.classList.remove(previousTheme);
html.classList.add(theme);
} }
// Set theme // Set theme

View File

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

View File

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