diff --git a/_includes/disqus.html b/_includes/disqus.html index c4746de..f4897c8 100644 --- a/_includes/disqus.html +++ b/_includes/disqus.html @@ -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); } diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index 072ef2b..f04d583 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -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 { diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss index 6b2fbd7..000cd8e 100644 --- a/_sass/colors/dark-typography.scss +++ b/_sass/colors/dark-typography.scss @@ -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 diff --git a/_sass/colors/light-typography.scss b/_sass/colors/light-typography.scss index 9f9b92d..e9679f4 100644 --- a/_sass/colors/light-typography.scss +++ b/_sass/colors/light-typography.scss @@ -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;