Skip to content

Commit 186e649

Browse files
sorin-davidoiMichael-F-Bryan
authored andcommitted
feat(src/theme): Scrollbar theme (#563)
1 parent adc1f4a commit 186e649

File tree

4 files changed

+84
-0
lines changed

4 files changed

+84
-0
lines changed

src/theme/book.css

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -340,6 +340,12 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
340340
background-color: #fafafa;
341341
color: #364149;
342342
}
343+
.light .sidebar::-webkit-scrollbar {
344+
background: #fafafa;
345+
}
346+
.light .sidebar::-webkit-scrollbar-thumb {
347+
background: #364149;
348+
}
343349
.light .chapter li {
344350
color: #aaa;
345351
}
@@ -464,6 +470,12 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
464470
.light .icon-button i {
465471
margin: 0;
466472
}
473+
.light ::-webkit-scrollbar {
474+
background: #fff;
475+
}
476+
.light ::-webkit-scrollbar-thumb {
477+
background: #333;
478+
}
467479
.coal {
468480
color: #98a3ad;
469481
background-color: #141617;
@@ -494,6 +506,12 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
494506
background-color: #292c2f;
495507
color: #a1adb8;
496508
}
509+
.coal .sidebar::-webkit-scrollbar {
510+
background: #292c2f;
511+
}
512+
.coal .sidebar::-webkit-scrollbar-thumb {
513+
background: #a1adb8;
514+
}
497515
.coal .chapter li {
498516
color: #505254;
499517
}
@@ -618,6 +636,12 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
618636
.coal .icon-button i {
619637
margin: 0;
620638
}
639+
.coal ::-webkit-scrollbar {
640+
background: #141617;
641+
}
642+
.coal ::-webkit-scrollbar-thumb {
643+
background: #98a3ad;
644+
}
621645
.navy {
622646
color: #bcbdd0;
623647
background-color: #161923;
@@ -648,6 +672,12 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
648672
background-color: #282d3f;
649673
color: #c8c9db;
650674
}
675+
.navy .sidebar::-webkit-scrollbar {
676+
background: #282d3f;
677+
}
678+
.navy .sidebar::-webkit-scrollbar-thumb {
679+
background: #c8c9db;
680+
}
651681
.navy .chapter li {
652682
color: #505274;
653683
}
@@ -772,6 +802,12 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
772802
.navy .icon-button i {
773803
margin: 0;
774804
}
805+
.navy ::-webkit-scrollbar {
806+
background: #161923;
807+
}
808+
.navy ::-webkit-scrollbar-thumb {
809+
background: #bcbdd0;
810+
}
775811
.rust {
776812
color: #262625;
777813
background-color: #e1e1db;
@@ -802,6 +838,12 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
802838
background-color: #3b2e2a;
803839
color: #c8c9db;
804840
}
841+
.rust .sidebar::-webkit-scrollbar {
842+
background: #3b2e2a;
843+
}
844+
.rust .sidebar::-webkit-scrollbar-thumb {
845+
background: #c8c9db;
846+
}
805847
.rust .chapter li {
806848
color: #505254;
807849
}
@@ -926,6 +968,12 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
926968
.rust .icon-button i {
927969
margin: 0;
928970
}
971+
.rust ::-webkit-scrollbar {
972+
background: #e1e1db;
973+
}
974+
.rust ::-webkit-scrollbar-thumb {
975+
background: #262625;
976+
}
929977
.ayu {
930978
color: #c5c5c5;
931979
background-color: #0f1419;
@@ -956,6 +1004,12 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
9561004
background-color: #14191f;
9571005
color: #c8c9db;
9581006
}
1007+
.ayu .sidebar::-webkit-scrollbar {
1008+
background: #14191f;
1009+
}
1010+
.ayu .sidebar::-webkit-scrollbar-thumb {
1011+
background: #c8c9db;
1012+
}
9591013
.ayu .chapter li {
9601014
color: #5c6773;
9611015
}
@@ -1080,6 +1134,12 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
10801134
.ayu .icon-button i {
10811135
margin: 0;
10821136
}
1137+
.ayu ::-webkit-scrollbar {
1138+
background: #0f1419;
1139+
}
1140+
.ayu ::-webkit-scrollbar-thumb {
1141+
background: #c5c5c5;
1142+
}
10831143
@media only print {
10841144
#sidebar,
10851145
#menu-bar,

src/theme/book.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -279,6 +279,7 @@ function playpen_text(playpen) {
279279
})();
280280

281281
(function themes() {
282+
var html = document.querySelector('html');
282283
var themeToggleButton = document.getElementById('theme-toggle');
283284
var themePopup = document.getElementById('theme-list');
284285
var themeColorMetaTag = document.querySelector('meta[name="theme-color"]');
@@ -331,9 +332,15 @@ function playpen_text(playpen) {
331332
});
332333
}
333334

335+
var previousTheme;
336+
try { previousTheme = localStorage.getItem('mdbook-theme'); } catch (e) { }
337+
if (previousTheme === null || previousTheme === undefined) { previousTheme = 'light'; }
338+
334339
try { localStorage.setItem('mdbook-theme', theme); } catch (e) { }
335340

336341
document.body.className = theme;
342+
html.classList.remove(previousTheme);
343+
html.classList.add(theme);
337344
}
338345

339346
// Set theme

src/theme/index.hbs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@
6565
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
6666
if (theme === null || theme === undefined) { theme = 'light'; }
6767
document.body.className = theme;
68+
document.querySelector('html').className = theme;
6869
</script>
6970

7071
<!-- Hide / unhide sidebar before it is displayed -->

src/theme/stylus/themes/base.styl

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,14 @@
3232
.sidebar {
3333
background-color: $sidebar-bg
3434
color: $sidebar-fg
35+
36+
&::-webkit-scrollbar {
37+
background: $sidebar-bg;
38+
}
39+
40+
&::-webkit-scrollbar-thumb {
41+
background: $sidebar-fg;
42+
}
3543
}
3644

3745
.chapter li {
@@ -172,4 +180,12 @@
172180
margin: 0;
173181
}
174182
}
183+
184+
::-webkit-scrollbar {
185+
background: $bg;
186+
}
187+
188+
::-webkit-scrollbar-thumb {
189+
background: $fg;
190+
}
175191
}

0 commit comments

Comments
 (0)