FunctionalHacker/hugo-toha
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: Added default theme

Browse source
This commit is contained in:
JY Hsu 2024-08-24 10:50:23 +08:00
parent dde735d3af
commit a11a99f92a
3 changed files with 12 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

6
assets/scripts/features/darkmode/index.js
View file

@ -14,7 +14,11 @@ window.addEventListener('load', async () => {
function loadScheme() {
return localStorage.getItem(PERSISTENCE_KEY) || "system"
return localStorage.getItem(PERSISTENCE_KEY) || loadDefaultScheme()
}
function loadDefaultScheme() {
return document.getElementById('defaultTheme').innerText || "system"
}
function saveScheme(scheme) {

2
layouts/_default/baseof.html
View file

@ -12,7 +12,7 @@
<!--================= add analytics if enabled =========================-->
{{- partial "analytics.html" . -}}
<script>
theme = localStorage.getItem('darkmode:color-scheme') || 'system';
theme = localStorage.getItem('darkmode:color-scheme') || document.getElementById('defaultTheme').innerText || "system"
if (theme == 'system') {
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
theme = 'dark';

7
layouts/index.html
View file

@ -3,13 +3,18 @@
<head>
<title>{{- .Site.Title -}}</title>
{{ $siteDescription := .Site.Params.description }}
{{ $siteDefaultTheme := .Site.Params.defaultTheme }}
{{ if (index .Site.Data .Site.Language.Lang).site }}
{{ $siteConfig := (index .Site.Data .Site.Language.Lang).site }}
{{ if $siteConfig.description }}
{{ $siteDescription = $siteConfig.description }}
{{ end }}
{{ if $siteConfig.defaultTheme }}
{{ $siteDefaultTheme = $siteConfig.defaultTheme }}
{{ end }}
{{ end }}
<meta name="description" content="{{ $siteDescription }}" />
<p id="defaultTheme" hidden>{{ $siteDefaultTheme }}</p>
<!-- import common headers -->
{{- partial "header.html" . -}}
@ -18,7 +23,7 @@
<!--================= add analytics if enabled =========================-->
{{- partial "analytics.html" . -}}
<script>
theme = localStorage.getItem('darkmode:color-scheme') || 'system';
theme = localStorage.getItem('darkmode:color-scheme') || document.getElementById('defaultTheme').innerText || "system"
if (theme == 'system') {
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
theme = 'dark';