Sync/hugo-theme-stack
1
0
Fork 1
mirror of https://github.com/CaiJimmy/hugo-theme-stack.git synced 2025-04-29 12:03:31 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

add head/darkmode

Browse Source
This commit is contained in:
Jimmy Cai 2020-12-23 17:31:56 +01:00
parent 8e87827726
commit e49d77ec91
No known key found for this signature in database
GPG Key ID: 3EA408E527F37B18
2 changed files with 21 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
layouts/_default/baseof.html
View File

@ -5,26 +5,8 @@
{{- block "head" . -}}{{ end }} {{- block "head" . -}}{{ end }}
</head> </head>
<body class="{{ block `body-class` . }}{{ end }}"> <body class="{{ block `body-class` . }}{{ end }}">
<script> {{- partial "head/darkmode" . -}}
(function() {
const colorSchemeKey = 'StackColorScheme';
const colorSchemeItem = localStorage.getItem(colorSchemeKey);
const supportDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches === true;
if (colorSchemeItem == 'dark' || !colorSchemeItem && supportDarkMode || colorSchemeItem === 'auto' && supportDarkMode) {
/**
* Enable dark mode if:
* 1. If dark mode is set already (in local storage)
* 2. No color scheme preference is set in localstorage, and user's browser indicates preference for dark mode
* 3. Auto mode & prefere color scheme is dark
*/
document.body.dataset.scheme = 'dark';
} else {
document.body.dataset.scheme = 'light';
}
})();
</script>
<div class="container flex on-phone--column {{ if .Site.Params.widgets.enabled }}extended{{ else }}compact{{ end }} {{ block `container-class` . }}{{end}}"> <div class="container flex on-phone--column {{ if .Site.Params.widgets.enabled }}extended{{ else }}compact{{ end }} {{ block `container-class` . }}{{end}}">
{{ partial "sidebar/left.html" . }} {{ partial "sidebar/left.html" . }}
<main class="main full-width"> <main class="main full-width">

19
layouts/partials/head/darkmode.html Normal file
View File

@ -0,0 +1,19 @@
<script>
(function() {
const colorSchemeKey = 'StackColorScheme';
const colorSchemeItem = localStorage.getItem(colorSchemeKey);
const supportDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches === true;
if (colorSchemeItem == 'dark' || !colorSchemeItem && supportDarkMode || colorSchemeItem === 'auto' && supportDarkMode) {
/**
* Enable dark mode if:
* 1. If dark mode is set already (in local storage)
* 2. No color scheme preference is set in localstorage, and user's browser indicates preference for dark mode
* 3. Auto mode & prefere color scheme is dark
*/
document.body.dataset.scheme = 'dark';
} else {
document.body.dataset.scheme = 'light';
}
})();
</script>