1
- "use client" ;
2
-
3
- import {
4
- rem ,
5
- ActionIcon ,
6
- useComputedColorScheme ,
7
- useMantineColorScheme ,
8
- } from "@mantine/core" ;
1
+ import { useMantineColorScheme , rem , ActionIcon } from "@mantine/core" ;
9
2
import { IconBrightnessFilled , IconSun , IconMoon } from "@tabler/icons-react" ;
10
3
import { FC } from "react" ;
11
4
12
5
export const ThemeSelector : FC = ( ) => {
13
- const { setColorScheme } = useMantineColorScheme ( ) ;
14
- const computedColorScheme = useComputedColorScheme ( "light" , {
15
- getInitialValueInEffect : true ,
16
- } ) ;
6
+ const { colorScheme, setColorScheme } = useMantineColorScheme ( ) ;
17
7
const iconProps = {
18
8
style : { width : rem ( 20 ) , height : rem ( 20 ) , display : "block" } ,
19
9
stroke : 1.5 ,
@@ -24,36 +14,36 @@ export const ThemeSelector: FC = () => {
24
14
color = "gray"
25
15
variant = "subtle"
26
16
title = { `Switch to ${
27
- computedColorScheme === "light"
17
+ colorScheme === "light"
28
18
? "dark"
29
- : computedColorScheme === "dark"
19
+ : colorScheme === "dark"
30
20
? "browser-preferred"
31
21
: "light"
32
22
} theme`}
33
23
aria-label = { `Switch to ${
34
- computedColorScheme === "light"
24
+ colorScheme === "light"
35
25
? "dark"
36
- : computedColorScheme === "dark"
26
+ : colorScheme === "dark"
37
27
? "browser-preferred"
38
28
: "light"
39
29
} theme`}
40
30
size = { 32 }
41
31
onClick = { ( ) =>
42
32
setColorScheme (
43
- computedColorScheme === "light"
33
+ colorScheme === "light"
44
34
? "dark"
45
- : computedColorScheme === "dark"
35
+ : colorScheme === "dark"
46
36
? "auto"
47
37
: "light"
48
38
)
49
39
}
50
40
>
51
- { computedColorScheme === "light" ? (
52
- < IconSun { ...iconProps } />
53
- ) : computedColorScheme === "dark" ? (
54
- < IconMoon { ...iconProps } />
41
+ { colorScheme === "light" ? (
42
+ < IconSun suppressHydrationWarning { ...iconProps } />
43
+ ) : colorScheme === "dark" ? (
44
+ < IconMoon suppressHydrationWarning { ...iconProps } />
55
45
) : (
56
- < IconBrightnessFilled { ...iconProps } />
46
+ < IconBrightnessFilled suppressHydrationWarning { ...iconProps } />
57
47
) }
58
48
</ ActionIcon >
59
49
) ;
0 commit comments