feat(darkmode): dark mode toggle (#82)

* feat(darkmode): initial support for dark mode toggle

* fix(darkmode): add svg icons

* feat(darkmode): dispatch onColorSchemeChange event

* add head/darkmode

* feat(darkmode); add colorScheme config

* style: remove empty line

* refactor(darkmode): simplify code

* style: add comment for darkmode config

* i18n support for dark mode toggle

* Some renaming
This commit is contained in:
Jimmy Cai 2020-12-23 19:03:40 +01:00 committed by GitHub
parent df74fe5f19
commit 358e63e799
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 209 additions and 20 deletions

View file

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-toggle-left" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<circle cx="8" cy="12" r="2" />
<rect x="2" y="6" width="20" height="12" rx="6" />
</svg>

After

Width:  |  Height:  |  Size: 369 B

View file

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-toggle-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<circle cx="16" cy="12" r="2" />
<rect x="2" y="6" width="20" height="12" rx="6" />
</svg>

After

Width:  |  Height:  |  Size: 371 B

View file

@ -3,11 +3,6 @@
* https://xyproto.github.io/splash/docs/monokai.html
*/
:root {
--pre-text-color: #f8f8f2;
--pre-background-color: #272822;
}
/* Background */
.chroma {
color: #f8f8f2;

View file

@ -2,10 +2,6 @@
* Style: monokailight
* https://xyproto.github.io/splash/docs/monokailight.html
*/
:root {
--pre-text-color: #272822;
--pre-background-color: #fafafa;
}
/* Background */
.chroma {

View file

@ -129,6 +129,8 @@
margin-top: var(--sidebar-element-separation);
margin-bottom: 0;
overflow-y: auto;
flex-grow: 1;
font-size: 1.5rem;
@media (min-width: $on-desktop-large) {
margin-top: 30px;
@ -192,7 +194,6 @@
display: inline-flex;
align-items: center;
color: var(--body-text-color);
font-size: 1.5rem;
@media (max-width: $on-desktop-large) {
font-size: 1.4rem;

View file

@ -134,3 +134,30 @@
}
}
}
[data-scheme="dark"] {
#dark-mode-toggle {
color: var(--accent-color);
font-weight: 700;
.icon-tabler-toggle-left {
display: none;
}
.icon-tabler-toggle-right {
display: unset;
}
}
}
#dark-mode-toggle {
margin-top: auto;
color: var(--body-text-color);
display: flex;
align-items: center;
cursor: pointer;
.icon-tabler-toggle-right {
display: none;
}
}

View file

@ -1,6 +1,18 @@
$defaultTagBackgrounds: #8ea885, #df7988, #0177b8, #ffb900, #6b69d6;
$defaultTagColors: #fff, #fff, #fff, #fff, #fff;
[data-scheme="light"] {
--pre-text-color: #272822;
--pre-background-color: #fafafa;
@import "partials/highlight/light.scss";
}
[data-scheme="dark"] {
--pre-text-color: #f8f8f2;
--pre-background-color: #272822;
@import "partials/highlight/dark.scss";
}
/*
* Global style
*/
@ -13,7 +25,6 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
--main-top-padding: 50px;
}
--body-background: #f5f5fa;
--accent-color: #34495e;
@ -25,7 +36,7 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
--section-separation: 40px;
@media (prefers-color-scheme: dark) {
[data-scheme="dark"] {
--body-background: #303030;
--accent-color: #ecf0f1;
--accent-color-darker: #bdc3c7;
@ -72,7 +83,7 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
--small-card-padding: 25px 20px;
}
@media (prefers-color-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);
@ -116,7 +127,7 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
--table-border-color: #dadada;
--tr-even-background-color: #efefee;
@media (prefers-color-scheme: dark) {
[data-scheme="dark"] {
--code-background-color: #272822;
--code-text-color: rgba(255, 255, 255, 0.9);

86
assets/ts/colorScheme.ts Normal file
View file

@ -0,0 +1,86 @@
type colorScheme = 'light' | 'dark' | 'auto';
class StackColorScheme {
private localStorageKey = 'StackColorScheme';
private currentScheme: colorScheme;
private systemPreferScheme: colorScheme;
constructor(toggleEl: HTMLElement) {
this.bindMatchMedia();
this.currentScheme = this.getSavedScheme();
if (toggleEl)
this.bindClick(toggleEl);
if (document.body.style.transition == '')
document.body.style.setProperty('transition', 'background-color .3s ease');
}
private saveScheme() {
localStorage.setItem(this.localStorageKey, this.currentScheme);
}
private bindClick(toggleEl) {
toggleEl.addEventListener('click', (e) => {
if (this.isDark()) {
/// Disable dark mode
this.currentScheme = 'light';
}
else {
this.currentScheme = 'dark';
}
this.setBodyClass();
if (this.currentScheme == this.systemPreferScheme) {
/// Set to auto
this.currentScheme = 'auto';
}
this.saveScheme();
})
}
private isDark() {
return (this.currentScheme == 'dark' || this.currentScheme == 'auto' && this.systemPreferScheme == 'dark');
}
private dispatchEvent(colorScheme: colorScheme) {
const event = new CustomEvent('onColorSchemeChange', {
detail: colorScheme
});
window.dispatchEvent(event);
}
private setBodyClass() {
if (this.isDark()) {
document.body.dataset.scheme = 'dark';
}
else {
document.body.dataset.scheme = 'light';
}
this.dispatchEvent(document.body.dataset.scheme as colorScheme);
}
private getSavedScheme(): colorScheme {
const savedScheme = localStorage.getItem(this.localStorageKey);
if (savedScheme == 'light' || savedScheme == 'dark' || savedScheme == 'auto') return savedScheme;
else return 'auto';
}
private bindMatchMedia() {
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
if (e.matches) {
this.systemPreferScheme = 'dark';
}
else {
this.systemPreferScheme = 'light';
}
this.setBodyClass();
});
}
}
export default StackColorScheme;

View file

@ -9,6 +9,7 @@ import StackGallery from "ts/gallery";
import { getColor } from 'ts/color';
import menu from 'ts/menu';
import createElement from 'ts/createElement';
import StackColorScheme from 'ts/colorScheme';
let Stack = {
init: () => {
@ -52,6 +53,8 @@ let Stack = {
observer.observe(articleTile)
}
new StackColorScheme(document.getElementById('dark-mode-toggle'));
}
}

View file

@ -79,6 +79,13 @@ params:
local: false
src:
colorScheme:
# Display toggle
toggle: true
# Available values: auto, light, dark
default: auto
menu:
main:
- identifier: home

View file

@ -1,6 +1,9 @@
toggleMenu:
other: Toggle Menu
darkMode:
other: Dark Mode
list:
page:
one: "{{ .Count }} page"

View file

@ -1,6 +1,9 @@
toggleMenu:
other: 切换菜单
darkMode:
other: 暗色模式
archives:
categories:
other: 分类

View file

@ -5,7 +5,8 @@
{{- block "head" . -}}{{ end }}
</head>
<body class="{{ block `body-class` . }}{{ end }}">
<div class="container flex on-phone--column align-items--flex-start {{ if .Site.Params.widgets.enabled }}extended{{ else }}compact{{ end }} {{ block `container-class` . }}{{end}}">
{{- partial "head/colorScheme" . -}}
<div class="container flex on-phone--column {{ if .Site.Params.widgets.enabled }}extended{{ else }}compact{{ end }} {{ block `container-class` . }}{{end}}">
{{ partial "sidebar/left.html" . }}
<main class="main full-width">
{{- block "main" . }}{{- end }}

View file

@ -1,4 +0,0 @@
{{- $light := resources.Get "css/highlight/light.css" | minify -}}
{{- $dark := resources.Get "css/highlight/dark.css" | minify -}}
<link rel="stylesheet" href="{{ $light.RelPermalink }}" media="(prefers-color-scheme: light)">
<link rel="stylesheet" href="{{ $dark.RelPermalink }}" media="(prefers-color-scheme: dark)">

View file

@ -1,4 +1,3 @@
{{ partialCached "footer/components/script.html" . }}
{{ partialCached "footer/components/custom-font.html" . }}
{{ partialCached "footer/components/highlight.html" . }}
{{ partial "footer/custom.html" . }}

View file

@ -0,0 +1,39 @@
{{- $defaultColorScheme := default "auto" .Site.Params.colorScheme.default -}}
{{- if not (default false .Site.Params.colorScheme.toggle) -}}
{{/* If toggle is disabled, force default scheme */}}
<script>
(function() {
const colorSchemeKey = 'StackColorScheme';
localStorage.setItem(colorSchemeKey, "{{ $defaultColorScheme }}");
})();
</script>
{{- else -}}
{{/* Otherwise set to default scheme only if no preference is set by user */}}
<script>
(function() {
const colorSchemeKey = 'StackColorScheme';
if(!localStorage.getItem(colorSchemeKey)){
localStorage.setItem(colorSchemeKey, "{{ $defaultColorScheme }}");
}
})();
</script>
{{- end -}}
<script>
(function() {
const colorSchemeKey = 'StackColorScheme';
const colorSchemeItem = localStorage.getItem(colorSchemeKey);
const supportDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches === true;
if (colorSchemeItem == 'dark' || colorSchemeItem === 'auto' && supportDarkMode) {
/**
* Enable dark mode if:
* 1. If dark mode is set already (in local storage)
* 2. Auto mode & prefere color scheme is dark
*/
document.body.dataset.scheme = 'dark';
} else {
document.body.dataset.scheme = 'light';
}
})();
</script>

View file

@ -45,5 +45,13 @@
</a>
</li>
{{ end }}
{{ if (default false .Site.Params.colorScheme.toggle) }}
<li id="dark-mode-toggle">
{{ partial "helper/icon" "toggle-left" }}
{{ partial "helper/icon" "toggle-right" }}
<span>{{ T "darkMode" }}</span>
</li>
{{ end }}
</ol>
</aside>