From dda55f87e28e5132abfe0bcb4991e93c79688e5e Mon Sep 17 00:00:00 2001 From: k <68973000+moll-y@users.noreply.github.com> Date: Sun, 20 Jun 2021 08:49:35 -0500 Subject: [PATCH] feat: change the page vertical scrollbar styles (#227) * fix: take out [data-scheme="dark"] from :root Taking out the [data-scheme="dark"] from :root allows us to fix the precedence of CSS when the [data-scheme="dark"] is placed in the tag. This is needed in order to make the dark styles accesible from the elment, this will allow us to change the vertical scrollbar styles following the dark and light schemes. * change document.body.dataset.scheme to document.documentElement.dataset.scheme When the dark mode is on or when the light mode is on, the [data-scheme="light"] or [data-scheme="dark"], respectively, will be placed in the tag. Allowing us to access the dark and light color schemes from the to change the vertical scrollbar styles according to the current color scheme. * feat: change the page vertical scrollbar styles This change will make the vertical scrollbar styles to follow the dark and light color scheme modes. Also, this change will make the vertical scrollbar to look consistent in both, Chromium and Firefox. * make the scrollbar-track background-color transparent The body has this transition: 'transition: background-color 0.3s ease 0s'. Making the scrollbar-track background-color transparent allow us to appreciate that transition in the scrollbar-track when switching the background-color. * Move [data-scheme=dark] back to :root block * fix(comment/waline): detect dark mode from html tag * feat: apply custom scrollbar style to all elements Co-authored-by: Jimmy Cai --- assets/scss/partials/base.scss | 21 +++++++++++++++++++ assets/scss/partials/layout/list.scss | 18 ---------------- assets/scss/variables.scss | 6 +++--- assets/ts/colorScheme.ts | 10 ++++----- .../partials/comments/provider/remark42.html | 4 ++-- .../comments/provider/utterances.html | 4 ++-- .../partials/comments/provider/waline.html | 2 +- layouts/partials/head/colorScheme.html | 6 +++--- 8 files changed, 37 insertions(+), 34 deletions(-) diff --git a/assets/scss/partials/base.scss b/assets/scss/partials/base.scss index 42e460e..e7aefe6 100644 --- a/assets/scss/partials/base.scss +++ b/assets/scss/partials/base.scss @@ -15,3 +15,24 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } + +/* scrollbar styles for Firefox */ +* { + scrollbar-width: auto; + scrollbar-color: var(--scrollbar-thumb) transparent; +} +/**/ + +/* scrollbar styles for Chromium */ +::-webkit-scrollbar { + height: auto; +} + +::-webkit-scrollbar-thumb { + background-color: var(--scrollbar-thumb); +} + +::-webkit-scrollbar-track { + background-color: transparent; +} +/**/ diff --git a/assets/scss/partials/layout/list.scss b/assets/scss/partials/layout/list.scss index f9e7b6a..1a0e346 100644 --- a/assets/scss/partials/layout/list.scss +++ b/assets/scss/partials/layout/list.scss @@ -52,24 +52,6 @@ margin-bottom: var(--section-separation); overflow-x: auto; - /* scrollbar styles for Firefox */ - scrollbar-width: auto; - scrollbar-color: var(--scrollbar-thumb) transparent; - - /* scrollbar styles for Chromium */ - &::-webkit-scrollbar { - height: auto; - } - - &::-webkit-scrollbar-thumb { - background-color: var(--scrollbar-thumb); - } - - &::-webkit-scrollbar-track { - background-color: transparent; - } - /**/ - .article-list--tile { display: flex; padding-bottom: 15px; diff --git a/assets/scss/variables.scss b/assets/scss/variables.scss index d1ad08d..c75eb5c 100644 --- a/assets/scss/variables.scss +++ b/assets/scss/variables.scss @@ -39,7 +39,7 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff; --scrollbar-thumb: hsl(0, 0%, 85%); --scrollbar-track: var(--body-background); - [data-scheme="dark"] { + &[data-scheme="dark"] { --body-background: #303030; --accent-color: #ecf0f1; --accent-color-darker: #bdc3c7; @@ -91,7 +91,7 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff; --small-card-padding: 25px; } - [data-scheme="dark"] { + &[data-scheme="dark"] { --card-background: #424242; --card-background-selected: rgba(255, 255, 255, 0.16); --card-text-color-main: rgba(255, 255, 255, 0.9); @@ -137,7 +137,7 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff; --table-border-color: #dadada; --tr-even-background-color: #efefee; - [data-scheme="dark"] { + &[data-scheme="dark"] { --code-background-color: #272822; --code-text-color: rgba(255, 255, 255, 0.9); diff --git a/assets/ts/colorScheme.ts b/assets/ts/colorScheme.ts index 7c4ff77..acb33ee 100644 --- a/assets/ts/colorScheme.ts +++ b/assets/ts/colorScheme.ts @@ -9,7 +9,7 @@ class StackColorScheme { this.bindMatchMedia(); this.currentScheme = this.getSavedScheme(); - this.dispatchEvent(document.body.dataset.scheme as colorScheme); + this.dispatchEvent(document.documentElement.dataset.scheme as colorScheme); if (toggleEl) this.bindClick(toggleEl); @@ -56,13 +56,13 @@ class StackColorScheme { private setBodyClass() { if (this.isDark()) { - document.body.dataset.scheme = 'dark'; + document.documentElement.dataset.scheme = 'dark'; } else { - document.body.dataset.scheme = 'light'; + document.documentElement.dataset.scheme = 'light'; } - this.dispatchEvent(document.body.dataset.scheme as colorScheme); + this.dispatchEvent(document.documentElement.dataset.scheme as colorScheme); } private getSavedScheme(): colorScheme { @@ -85,4 +85,4 @@ class StackColorScheme { } } -export default StackColorScheme; \ No newline at end of file +export default StackColorScheme; diff --git a/layouts/partials/comments/provider/remark42.html b/layouts/partials/comments/provider/remark42.html index 9928825..97196c8 100644 --- a/layouts/partials/comments/provider/remark42.html +++ b/layouts/partials/comments/provider/remark42.html @@ -7,7 +7,7 @@ components: ['embed'], url: "{{ $.Permalink }}", max_shown_comments: {{ default 15 .max_shown_comments }}, - theme: document.body.dataset.scheme, + theme: document.documentElement.dataset.scheme, page_title: '{{ $.Title }}', locale: '{{ default "en" .locale }}', show_email_subscription: {{ default true .show_email_subscription }} @@ -26,4 +26,4 @@ window.REMARK42.changeTheme(e.detail); }) -{{- end -}} \ No newline at end of file +{{- end -}} diff --git a/layouts/partials/comments/provider/utterances.html b/layouts/partials/comments/provider/utterances.html index a0c07a6..97a0a3a 100644 --- a/layouts/partials/comments/provider/utterances.html +++ b/layouts/partials/comments/provider/utterances.html @@ -31,10 +31,10 @@ addEventListener('message', event => { if (event.origin !== 'https://utteranc.es') return; - setUtterancesTheme(document.body.dataset.scheme) + setUtterancesTheme(document.documentElement.dataset.scheme) }); window.addEventListener('onColorSchemeChange', (e) => { setUtterancesTheme(e.detail) }) - \ No newline at end of file + diff --git a/layouts/partials/comments/provider/waline.html b/layouts/partials/comments/provider/waline.html index a983eb0..3b6eee8 100644 --- a/layouts/partials/comments/provider/waline.html +++ b/layouts/partials/comments/provider/waline.html @@ -13,7 +13,7 @@ {{- with .Site.Params.comments.waline -}} -{{- $config := dict "el" "#waline" "dark" `body[data-scheme="dark"]` -}} +{{- $config := dict "el" "#waline" "dark" `html[data-scheme="dark"]` -}} {{- $replaceKeys := dict "serverurl" "serverURL" "requiredmeta" "requiredMeta" "wordlimit" "wordLimit" "pagesize" "pageSize" "avatarcdn" "avatarCDN" "avatarforce" "avatarForce" -}} {{- range $key, $val := . -}} diff --git a/layouts/partials/head/colorScheme.html b/layouts/partials/head/colorScheme.html index 560d6c0..42f4dd8 100644 --- a/layouts/partials/head/colorScheme.html +++ b/layouts/partials/head/colorScheme.html @@ -31,9 +31,9 @@ * 1. If dark mode is set already (in local storage) * 2. Auto mode & prefere color scheme is dark */ - document.body.dataset.scheme = 'dark'; + document.documentElement.dataset.scheme = 'dark'; } else { - document.body.dataset.scheme = 'light'; + document.documentElement.dataset.scheme = 'light'; } })(); - \ No newline at end of file +