mirrors/hugo-PaperMod
1
0
Fork 0
mirror of https://github.com/adityatelange/hugo-PaperMod.git synced 2025-10-27 14:42: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

7
layouts/partials/footer.html
View File

@@ -81,11 +81,12 @@
{{- if (not site.Params.disableThemeToggle) }}
<script>
document.getElementById("theme-toggle").addEventListener("click", () => {
if (document.body.className.includes("dark")) {
document.body.classList.remove('dark');
const html = document.querySelector("html");
if (html.dataset.theme === "dark") {
html.dataset.theme = 'light';
localStorage.setItem("pref-theme", 'light');
} else {
document.body.classList.add('dark');
html.dataset.theme = 'dark';
localStorage.setItem("pref-theme", 'dark');
}
})

11
layouts/partials/head.html
View File

@@ -127,18 +127,21 @@
--code-block-bg: rgb(46, 46, 51);
--code-bg: rgb(55, 56, 62);
--border: rgb(51, 51, 51);
color-scheme: dark;
}
.list {
background: var(--theme);
}
.list:not(.dark)::-webkit-scrollbar-track {
background: 0 0;
.toc {
background: var(--entry);
}
}
.list:not(.dark)::-webkit-scrollbar-thumb {
border-color: var(--theme);
@media (prefers-color-scheme: light) {
.list::-webkit-scrollbar-thumb {
border-color: var(--code-bg);
}
}

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>