From b63c195a10073b63d5a206637862989090aa3752 Mon Sep 17 00:00:00 2001
From: "Huang, Zhaoquan" <zhaoquan2008@hotmail.com>
Date: Sun, 26 Oct 2025 21:21:50 +0800
Subject: [PATCH] Use data-theme attribute for theme switching and set
 color-scheme (#1808)

- 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>
---
 assets/css/common/header.css       |  5 ++---
 assets/css/common/post-single.css  |  2 +-
 assets/css/core/theme-vars.css     |  6 ++++--
 assets/css/includes/scroll-bar.css |  6 +-----
 layouts/partials/footer.html       |  7 ++++---
 layouts/partials/head.html         | 11 +++++++----
 layouts/partials/header.html       | 16 ++++++++++------
 7 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/assets/css/common/header.css b/assets/css/common/header.css
index 64894da4..68964333 100644
--- a/assets/css/common/header.css
+++ b/assets/css/common/header.css
@@ -41,12 +41,11 @@ button#theme-toggle {
     margin: auto 4px;
 }
 
-body.dark #moon {
-    vertical-align: middle;
+[data-theme="dark"] #moon {
     display: none;
 }
 
-body:not(.dark) #sun {
+[data-theme="light"] #sun {
     display: none;
 }
 
diff --git a/assets/css/common/post-single.css b/assets/css/common/post-single.css
index 3c4477a9..8906c1f3 100644
--- a/assets/css/common/post-single.css
+++ b/assets/css/common/post-single.css
@@ -268,7 +268,7 @@
     padding: 0.4em;
 }
 
-.dark .toc {
+[data-theme="dark"] .toc {
     background: var(--entry);
 }
 
diff --git a/assets/css/core/theme-vars.css b/assets/css/core/theme-vars.css
index db1845d3..1ce34ef8 100644
--- a/assets/css/core/theme-vars.css
+++ b/assets/css/core/theme-vars.css
@@ -15,9 +15,10 @@
     --code-block-bg: rgb(28, 29, 33);
     --code-bg: rgb(245, 245, 245);
     --border: rgb(238, 238, 238);
+    color-scheme: light;
 }
 
-.dark {
+:root[data-theme="dark"] {
     --theme: rgb(29, 30, 32);
     --entry: rgb(46, 46, 51);
     --primary: rgb(218, 218, 219);
@@ -27,12 +28,13 @@
     --code-block-bg: rgb(46, 46, 51);
     --code-bg: rgb(55, 56, 62);
     --border: rgb(51, 51, 51);
+    color-scheme: dark;
 }
 
 .list {
     background: var(--code-bg);
 }
 
-.dark.list {
+[data-theme="dark"] .list {
     background: var(--theme);
 }
diff --git a/assets/css/includes/scroll-bar.css b/assets/css/includes/scroll-bar.css
index f6e577de..e88430bc 100644
--- a/assets/css/includes/scroll-bar.css
+++ b/assets/css/includes/scroll-bar.css
@@ -3,17 +3,13 @@
     background: 0 0;
 }
 
-.list:not(.dark)::-webkit-scrollbar-track {
-    background: var(--code-bg);
-}
-
 ::-webkit-scrollbar-thumb {
     background: var(--tertiary);
     border: 5px solid var(--theme);
     border-radius: var(--radius);
 }
 
-.list:not(.dark)::-webkit-scrollbar-thumb {
+[data-theme="light"] .list::-webkit-scrollbar-thumb {
     border: 5px solid var(--code-bg);
 }
 
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 832cdbad..a6cc28e2 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -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');
         }
     })
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index c2e669ec..c99b45e6 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -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);
             }
         }
 
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 21b0318f..25c58f2b 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -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>