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 <html>
tag. This is needed in order to make the dark styles accesible from the
<html> 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 <html> tag. Allowing us to access the dark and light color
schemes from the <html> 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 <jimmehcai@gmail.com>
---
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);
})
</script>
-{{- 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)
})
-</script>
\ No newline at end of file
+</script>
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 @@
</style>
{{- 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';
}
})();
-</script>
\ No newline at end of file
+</script>