Skip to content

Commit 6f4805b

Browse files
committed
feat: add custom scrollbar css to light mode
note: `html::-webkit-scrollbar` is used because a top level `::-webkit-scrollbar` would override the `html.dark::-webkit-scrollbar-track` style event even with `!important`
1 parent 7a83f81 commit 6f4805b

File tree

1 file changed

+14
-4
lines changed

1 file changed

+14
-4
lines changed

index.html

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,23 @@
2525
-webkit-user-select: none;
2626
}
2727

28-
html.dark::-webkit-scrollbar,
29-
html.dark div.flex-grow::-webkit-scrollbar {
28+
html::-webkit-scrollbar,
29+
div.flex-grow::-webkit-scrollbar {
3030
width: 10px;
3131
}
3232

33+
html::-webkit-scrollbar-thumb,
34+
div.flex-grow::-webkit-scrollbar-thumb {
35+
background-color: #c1c1c1;
36+
border-radius: 10px;
37+
}
38+
39+
html::-webkit-scrollbar-thumb:hover,
40+
div.flex-grow::-webkit-scrollbar-thumb:hover {
41+
background-color: #a8a8a8;
42+
border-radius: 10px;
43+
}
44+
3345
html.dark::-webkit-scrollbar-track,
3446
html.dark div.flex-grow::-webkit-scrollbar-track {
3547
background-color: #090E15;
@@ -38,13 +50,11 @@
3850
html.dark::-webkit-scrollbar-thumb,
3951
html.dark div.flex-grow::-webkit-scrollbar-thumb {
4052
background-color: #24292e;
41-
border-radius: 10px;
4253
}
4354

4455
html.dark::-webkit-scrollbar-thumb:hover,
4556
html.dark div.flex-grow::-webkit-scrollbar-thumb:hover {
4657
background-color: #3a3f44;
47-
border-radius: 10px;
4858
}
4959

5060
body {

0 commit comments

Comments
 (0)