@@ -2,45 +2,49 @@ import { createSignal, onMount } from "solid-js";
2
2
3
3
export default function ThemeToggle ( ) {
4
4
const [ isDarkMode , setIsDarkMode ] = createSignal ( false ) ;
5
-
5
+
6
6
// Initialize theme based on localStorage or system preference
7
7
onMount ( ( ) => {
8
- if ( typeof localStorage !== ' undefined' ) {
9
- const savedTheme = localStorage . getItem ( ' theme' ) ;
10
- if ( savedTheme === ' dark' ) {
8
+ if ( typeof localStorage !== " undefined" ) {
9
+ const savedTheme = localStorage . getItem ( " theme" ) ;
10
+ if ( savedTheme === " dark" ) {
11
11
setIsDarkMode ( true ) ;
12
- } else if ( savedTheme === ' light' ) {
12
+ } else if ( savedTheme === " light" ) {
13
13
setIsDarkMode ( false ) ;
14
14
} else {
15
15
// Check system preference if no saved preference
16
- const prefersDark = window . matchMedia ( '(prefers-color-scheme: dark)' ) . matches ;
16
+ const prefersDark = window . matchMedia (
17
+ "(prefers-color-scheme: dark)" ,
18
+ ) . matches ;
17
19
setIsDarkMode ( prefersDark ) ;
18
- localStorage . setItem ( ' theme' , prefersDark ? ' dark' : ' light' ) ;
20
+ localStorage . setItem ( " theme" , prefersDark ? " dark" : " light" ) ;
19
21
}
20
22
}
21
23
} ) ;
22
-
24
+
23
25
// Handle theme toggle
24
26
const toggleTheme = ( ) => {
25
27
const newTheme = ! isDarkMode ( ) ;
26
28
setIsDarkMode ( newTheme ) ;
27
-
29
+
28
30
// Update theme in localStorage and document
29
- const themeName = newTheme ? ' dark' : ' light' ;
30
- if ( typeof localStorage !== ' undefined' ) {
31
- localStorage . setItem ( ' theme' , themeName ) ;
31
+ const themeName = newTheme ? " dark" : " light" ;
32
+ if ( typeof localStorage !== " undefined" ) {
33
+ localStorage . setItem ( " theme" , themeName ) ;
32
34
}
33
- document . documentElement . setAttribute ( ' data-theme' , themeName ) ;
35
+ document . documentElement . setAttribute ( " data-theme" , themeName ) ;
34
36
} ;
35
-
37
+
36
38
return (
37
39
< label class = "swap swap-rotate btn btn-ghost btn-circle" >
38
- < input
39
- type = "checkbox"
40
- class = "theme-controller"
41
- checked = { isDarkMode ( ) }
42
- onChange = { toggleTheme }
40
+ < input
41
+ type = "checkbox"
42
+ class = "theme-controller"
43
+ checked = { isDarkMode ( ) }
44
+ onChange = { toggleTheme }
43
45
/>
46
+ { /* 屏幕阅读器专用文本 */ }
47
+ < span class = "sr-only" > 切换主题模式</ span >
44
48
{ /* Sun icon */ }
45
49
< svg
46
50
class = "swap-on fill-current w-5 h-5"
@@ -59,4 +63,4 @@ export default function ThemeToggle() {
59
63
</ svg >
60
64
</ label >
61
65
) ;
62
- }
66
+ }
0 commit comments