KureShisen/Hugo-theme-stack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: change the page vertical scrollbar styles (#227)

Browse Source 
* 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>
This commit is contained in:
k 2021-06-20 08:49:35 -05:00 committed by GitHub
parent 495a3b0289
commit dda55f87e2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 37 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
assets/scss/partials/base.scss
View File

@ -15,3 +15,24 @@ body {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -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;
}
/**/

18
assets/scss/partials/layout/list.scss
View File

@ -52,24 +52,6 @@
margin-bottom: var(--section-separation); margin-bottom: var(--section-separation);
overflow-x: auto; 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 { .article-list--tile {
display: flex; display: flex;
padding-bottom: 15px; padding-bottom: 15px;

6
assets/scss/variables.scss
View File

@ -39,7 +39,7 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
--scrollbar-thumb: hsl(0, 0%, 85%); --scrollbar-thumb: hsl(0, 0%, 85%);
--scrollbar-track: var(--body-background); --scrollbar-track: var(--body-background);
[data-scheme="dark"] { &[data-scheme="dark"] {
--body-background: #303030; --body-background: #303030;
--accent-color: #ecf0f1; --accent-color: #ecf0f1;
--accent-color-darker: #bdc3c7; --accent-color-darker: #bdc3c7;
@ -91,7 +91,7 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
--small-card-padding: 25px; --small-card-padding: 25px;
} }
[data-scheme="dark"] { &[data-scheme="dark"] {
--card-background: #424242; --card-background: #424242;
--card-background-selected: rgba(255, 255, 255, 0.16); --card-background-selected: rgba(255, 255, 255, 0.16);
--card-text-color-main: rgba(255, 255, 255, 0.9); --card-text-color-main: rgba(255, 255, 255, 0.9);
@ -137,7 +137,7 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
--table-border-color: #dadada; --table-border-color: #dadada;
--tr-even-background-color: #efefee; --tr-even-background-color: #efefee;
[data-scheme="dark"] { &[data-scheme="dark"] {
--code-background-color: #272822; --code-background-color: #272822;
--code-text-color: rgba(255, 255, 255, 0.9); --code-text-color: rgba(255, 255, 255, 0.9);

10
assets/ts/colorScheme.ts
View File

@ -9,7 +9,7 @@ class StackColorScheme {
this.bindMatchMedia(); this.bindMatchMedia();
this.currentScheme = this.getSavedScheme(); this.currentScheme = this.getSavedScheme();
this.dispatchEvent(document.body.dataset.scheme as colorScheme); this.dispatchEvent(document.documentElement.dataset.scheme as colorScheme);
if (toggleEl) if (toggleEl)
this.bindClick(toggleEl); this.bindClick(toggleEl);
@ -56,13 +56,13 @@ class StackColorScheme {
private setBodyClass() { private setBodyClass() {
if (this.isDark()) { if (this.isDark()) {
document.body.dataset.scheme = 'dark'; document.documentElement.dataset.scheme = 'dark';
} }
else { 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 { private getSavedScheme(): colorScheme {
@ -85,4 +85,4 @@ class StackColorScheme {
} }
} }
export default StackColorScheme; export default StackColorScheme;

4
layouts/partials/comments/provider/remark42.html
View File

@ -7,7 +7,7 @@
components: ['embed'], components: ['embed'],
url: "{{ $.Permalink }}", url: "{{ $.Permalink }}",
max_shown_comments: {{ default 15 .max_shown_comments }}, max_shown_comments: {{ default 15 .max_shown_comments }},
theme: document.body.dataset.scheme, theme: document.documentElement.dataset.scheme,
page_title: '{{ $.Title }}', page_title: '{{ $.Title }}',
locale: '{{ default "en" .locale }}', locale: '{{ default "en" .locale }}',
show_email_subscription: {{ default true .show_email_subscription }} show_email_subscription: {{ default true .show_email_subscription }}
@ -26,4 +26,4 @@
window.REMARK42.changeTheme(e.detail); window.REMARK42.changeTheme(e.detail);
}) })
</script> </script>
{{- end -}} {{- end -}}

4
layouts/partials/comments/provider/utterances.html
View File

@ -31,10 +31,10 @@
addEventListener('message', event => { addEventListener('message', event => {
if (event.origin !== 'https://utteranc.es') return; if (event.origin !== 'https://utteranc.es') return;
setUtterancesTheme(document.body.dataset.scheme) setUtterancesTheme(document.documentElement.dataset.scheme)
}); });
window.addEventListener('onColorSchemeChange', (e) => { window.addEventListener('onColorSchemeChange', (e) => {
setUtterancesTheme(e.detail) setUtterancesTheme(e.detail)
}) })
</script> </script>

2
layouts/partials/comments/provider/waline.html
View File

@ -13,7 +13,7 @@
</style> </style>
{{- with .Site.Params.comments.waline -}} {{- 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" -}} {{- $replaceKeys := dict "serverurl" "serverURL" "requiredmeta" "requiredMeta" "wordlimit" "wordLimit" "pagesize" "pageSize" "avatarcdn" "avatarCDN" "avatarforce" "avatarForce" -}}
{{- range $key, $val := . -}} {{- range $key, $val := . -}}

6
layouts/partials/head/colorScheme.html
View File

@ -31,9 +31,9 @@
* 1. If dark mode is set already (in local storage) * 1. If dark mode is set already (in local storage)
* 2. Auto mode & prefere color scheme is dark * 2. Auto mode & prefere color scheme is dark
*/ */
document.body.dataset.scheme = 'dark'; document.documentElement.dataset.scheme = 'dark';
} else { } else {
document.body.dataset.scheme = 'light'; document.documentElement.dataset.scheme = 'light';
} }
})(); })();
</script> </script>