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");
|
const modeToggle = document.querySelector(".mode-toggle");
|
||||||
|
|
||||||
if (modeToggle !== null) {
|
if (typeof modeToggle !== "undefined") {
|
||||||
modeToggle.addEventListener('click', reloadDisqus);
|
/* modeToggle.addEventListener('click', reloadDisqus); // not pretty for 'color-scheme' */
|
||||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', reloadDisqus);
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', reloadDisqus);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -43,45 +43,6 @@ body {
|
||||||
font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif;
|
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 --- */
|
/* --- Typography --- */
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
|
|
|
@ -8,8 +8,6 @@
|
||||||
--mask-bg: rgb(68, 69, 70);
|
--mask-bg: rgb(68, 69, 70);
|
||||||
--main-wrapper-bg: rgb(27, 27, 30);
|
--main-wrapper-bg: rgb(27, 27, 30);
|
||||||
--main-border-color: rgb(44, 45, 45);
|
--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 */
|
/* Common color */
|
||||||
--text-color: rgb(175, 176, 177);
|
--text-color: rgb(175, 176, 177);
|
||||||
|
@ -142,4 +140,10 @@
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
color-scheme: dark;
|
||||||
|
|
||||||
|
#disqus_thread {
|
||||||
|
color-scheme: none;
|
||||||
|
}
|
||||||
|
|
||||||
} // dark-scheme
|
} // dark-scheme
|
||||||
|
|
|
@ -8,8 +8,6 @@
|
||||||
--mask-bg: #c1c3c5;
|
--mask-bg: #c1c3c5;
|
||||||
--main-wrapper-bg: white;
|
--main-wrapper-bg: white;
|
||||||
--main-border-color: #f3f3f3;
|
--main-border-color: #f3f3f3;
|
||||||
--scrollbar-track-bg: rgba(0, 0, 0, 0.3);
|
|
||||||
--scrollbar-thumb-bg: rgba(0, 0, 0, 0.3);
|
|
||||||
|
|
||||||
/* Common color */
|
/* Common color */
|
||||||
--text-color: #34343c;
|
--text-color: #34343c;
|
||||||
|
|
Loading…
Reference in a new issue