From e3766bda2a5d43f536bcf97e4e264492ae16bcac Mon Sep 17 00:00:00 2001
From: Julius Volz <julius.volz@gmail.com>
Date: Wed, 28 May 2025 16:55:09 +0200
Subject: [PATCH] Revert accidentally committed theme selector change

This reverts things back to the state of
https://github.com/prometheus/docs/blob/18209a382727bcc6c1f7a2c8404462b7193fff3d/src/components/ThemeSelector.tsx

Signed-off-by: Julius Volz <julius.volz@gmail.com>
---
 src/components/ThemeSelector.tsx | 36 ++++++++++++--------------------
 1 file changed, 13 insertions(+), 23 deletions(-)

diff --git a/src/components/ThemeSelector.tsx b/src/components/ThemeSelector.tsx
index ec4fa085..19e841a2 100644
--- a/src/components/ThemeSelector.tsx
+++ b/src/components/ThemeSelector.tsx
@@ -1,19 +1,9 @@
-"use client";
-
-import {
-  rem,
-  ActionIcon,
-  useComputedColorScheme,
-  useMantineColorScheme,
-} from "@mantine/core";
+import { useMantineColorScheme, rem, ActionIcon } from "@mantine/core";
 import { IconBrightnessFilled, IconSun, IconMoon } from "@tabler/icons-react";
 import { FC } from "react";
 
 export const ThemeSelector: FC = () => {
-  const { setColorScheme } = useMantineColorScheme();
-  const computedColorScheme = useComputedColorScheme("light", {
-    getInitialValueInEffect: true,
-  });
+  const { colorScheme, setColorScheme } = useMantineColorScheme();
   const iconProps = {
     style: { width: rem(20), height: rem(20), display: "block" },
     stroke: 1.5,
@@ -24,36 +14,36 @@ export const ThemeSelector: FC = () => {
       color="gray"
       variant="subtle"
       title={`Switch to ${
-        computedColorScheme === "light"
+        colorScheme === "light"
           ? "dark"
-          : computedColorScheme === "dark"
+          : colorScheme === "dark"
           ? "browser-preferred"
           : "light"
       } theme`}
       aria-label={`Switch to ${
-        computedColorScheme === "light"
+        colorScheme === "light"
           ? "dark"
-          : computedColorScheme === "dark"
+          : colorScheme === "dark"
           ? "browser-preferred"
           : "light"
       } theme`}
       size={32}
       onClick={() =>
         setColorScheme(
-          computedColorScheme === "light"
+          colorScheme === "light"
             ? "dark"
-            : computedColorScheme === "dark"
+            : colorScheme === "dark"
             ? "auto"
             : "light"
         )
       }
     >
-      {computedColorScheme === "light" ? (
-        <IconSun {...iconProps} />
-      ) : computedColorScheme === "dark" ? (
-        <IconMoon {...iconProps} />
+      {colorScheme === "light" ? (
+        <IconSun suppressHydrationWarning {...iconProps} />
+      ) : colorScheme === "dark" ? (
+        <IconMoon suppressHydrationWarning {...iconProps} />
       ) : (
-        <IconBrightnessFilled {...iconProps} />
+        <IconBrightnessFilled suppressHydrationWarning {...iconProps} />
       )}
     </ActionIcon>
   );