feat(src/theme): Scrollbar theme (#563)
This commit is contained in:
parent
adc1f4ade7
commit
186e649530
|
@ -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,
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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 -->
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue