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>
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

View File

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