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;
|
||||
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,
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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 -->
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue