Use the default scroll bar
And make the Chrome scroll bar on Windows support dark mode
This commit is contained in:
parent
57feaa660e
commit
e06d237eae
4 changed files with 8 additions and 45 deletions
|
@ -48,8 +48,8 @@
|
|||
|
||||
const modeToggle = document.querySelector(".mode-toggle");
|
||||
|
||||
if (modeToggle !== null) {
|
||||
modeToggle.addEventListener('click', reloadDisqus);
|
||||
if (typeof modeToggle !== "undefined") {
|
||||
/* modeToggle.addEventListener('click', reloadDisqus); // not pretty for 'color-scheme' */
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', reloadDisqus);
|
||||
}
|
||||
|
||||
|
|
|
@ -43,45 +43,6 @@ body {
|
|||
font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif;
|
||||
}
|
||||
|
||||
/* --- Scrollbar --- */
|
||||
|
||||
$scrollbar-size: 7px;
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: $scrollbar-size;
|
||||
height: $scrollbar-size;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
@at-root body#{&} {
|
||||
-webkit-box-shadow: inset 0 0 6px var(--scrollbar-track-bg);
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--scrollbar-thumb-bg);
|
||||
border-radius: calc(#{$scrollbar-size} / 2);
|
||||
}
|
||||
|
||||
.highlight {
|
||||
border-color: transparent;
|
||||
transition: border-color 0.5s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--scrollbar-thumb-bg);
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
/* add border to act as background-color */
|
||||
border-right-style: inset;
|
||||
border-right-width: calc(100vw + 100vh);
|
||||
border-color: inherit;
|
||||
background-color: var(--highlight-bg-color);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* --- Typography --- */
|
||||
|
||||
h1 {
|
||||
|
|
|
@ -8,8 +8,6 @@
|
|||
--mask-bg: rgb(68, 69, 70);
|
||||
--main-wrapper-bg: rgb(27, 27, 30);
|
||||
--main-border-color: rgb(44, 45, 45);
|
||||
--scrollbar-track-bg: rgba(0, 0, 0, 0.3);
|
||||
--scrollbar-thumb-bg: rgb(173 171 171 / 50%);
|
||||
|
||||
/* Common color */
|
||||
--text-color: rgb(175, 176, 177);
|
||||
|
@ -142,4 +140,10 @@
|
|||
|
||||
}
|
||||
|
||||
color-scheme: dark;
|
||||
|
||||
#disqus_thread {
|
||||
color-scheme: none;
|
||||
}
|
||||
|
||||
} // dark-scheme
|
||||
|
|
|
@ -8,8 +8,6 @@
|
|||
--mask-bg: #c1c3c5;
|
||||
--main-wrapper-bg: white;
|
||||
--main-border-color: #f3f3f3;
|
||||
--scrollbar-track-bg: rgba(0, 0, 0, 0.3);
|
||||
--scrollbar-thumb-bg: rgba(0, 0, 0, 0.3);
|
||||
|
||||
/* Common color */
|
||||
--text-color: #34343c;
|
||||
|
|
Loading…
Reference in a new issue