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

@@ -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;
 }
 

assets/css/common/post-single.css

@@ -268,7 +268,7 @@
     padding: 0.4em;
 }
 
-.dark .toc {
+[data-theme="dark"] .toc {
     background: var(--entry);
 }
 

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);
 }

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);
 }