Skip to content

Commit 6f30614

Browse files
authored
Merge pull request #2661 from prometheus/revert-themepicker-breakage
Revert accidentally committed theme selector change
2 parents a946db5 + e3766bd commit 6f30614

File tree

1 file changed

+13
-23
lines changed

1 file changed

+13
-23
lines changed

src/components/ThemeSelector.tsx

Lines changed: 13 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,9 @@
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";
92
import { IconBrightnessFilled, IconSun, IconMoon } from "@tabler/icons-react";
103
import { FC } from "react";
114

125
export const ThemeSelector: FC = () => {
13-
const { setColorScheme } = useMantineColorScheme();
14-
const computedColorScheme = useComputedColorScheme("light", {
15-
getInitialValueInEffect: true,
16-
});
6+
const { colorScheme, setColorScheme } = useMantineColorScheme();
177
const iconProps = {
188
style: { width: rem(20), height: rem(20), display: "block" },
199
stroke: 1.5,
@@ -24,36 +14,36 @@ export const ThemeSelector: FC = () => {
2414
color="gray"
2515
variant="subtle"
2616
title={`Switch to ${
27-
computedColorScheme === "light"
17+
colorScheme === "light"
2818
? "dark"
29-
: computedColorScheme === "dark"
19+
: colorScheme === "dark"
3020
? "browser-preferred"
3121
: "light"
3222
} theme`}
3323
aria-label={`Switch to ${
34-
computedColorScheme === "light"
24+
colorScheme === "light"
3525
? "dark"
36-
: computedColorScheme === "dark"
26+
: colorScheme === "dark"
3727
? "browser-preferred"
3828
: "light"
3929
} theme`}
4030
size={32}
4131
onClick={() =>
4232
setColorScheme(
43-
computedColorScheme === "light"
33+
colorScheme === "light"
4434
? "dark"
45-
: computedColorScheme === "dark"
35+
: colorScheme === "dark"
4636
? "auto"
4737
: "light"
4838
)
4939
}
5040
>
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} />
5545
) : (
56-
<IconBrightnessFilled {...iconProps} />
46+
<IconBrightnessFilled suppressHydrationWarning {...iconProps} />
5747
)}
5848
</ActionIcon>
5949
);

0 commit comments

Comments
 (0)