mirrors/hugo-PaperMod
1
0
Fork 0
mirror of https://github.com/adityatelange/hugo-PaperMod.git synced 2025-10-27 22:52:30 +01:00
Code Issues Packages Projects Releases Wiki Activity

Use data-theme attribute for theme switching and set color-scheme (#1808)

Browse Source 
- Update theme toggle and initialization scripts to set data-theme attribute
- Replace CSS selectors using .dark class with [data-theme="dark"] and 
  [data-theme="light"] attribute selectors
- Set CSS color-scheme variable alongside theme colors for better native 
  control appearance
- Removes redundant styles

---------

Co-authored-by: Aditya Telange <21258296+adityatelange@users.noreply.github.com>
This commit is contained in:
Huang, Zhaoquan
2025-10-26 21:21:50 +08:00
committed by GitHub
parent c98a924842
commit b63c195a10
7 changed files with 29 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
layouts/partials/header.html
View File

@@ -4,7 +4,7 @@
{{- if (eq site.Params.defaultTheme "light") }}
<script>
if (localStorage.getItem("pref-theme") === "dark") {
document.body.classList.add('dark');
document.querySelector("html").dataset.theme = 'dark';
}
</script>
@@ -12,7 +12,7 @@
{{- else if (eq site.Params.defaultTheme "dark") }}
<script>
if (localStorage.getItem("pref-theme") === "light") {
document.body.classList.remove('dark')
document.querySelector("html").dataset.theme = 'light';
}
</script>
@@ -20,11 +20,13 @@
{{- /* theme is auto */}}
<script>
if (localStorage.getItem("pref-theme") === "dark") {
document.body.classList.add('dark');
document.querySelector("html").dataset.theme = 'dark';
} else if (localStorage.getItem("pref-theme") === "light") {
document.body.classList.remove('dark')
document.querySelector("html").dataset.theme = 'light';
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add('dark');
document.querySelector("html").dataset.theme = 'dark';
} else {
document.querySelector("html").dataset.theme = 'light';
}
</script>
@@ -33,7 +35,9 @@
{{- else if (and (ne site.Params.defaultTheme "light") (ne site.Params.defaultTheme "dark"))}}
<script>
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add('dark');
document.querySelector("html").dataset.theme = 'dark';
} else {
document.querySelector("html").dataset.theme = 'light';
}
</script>