From a944fa1e7af03b7bff0733bbd2ce03558a69e612 Mon Sep 17 00:00:00 2001
From: Julius Volz <julius.volz@gmail.com>
Date: Wed, 12 Feb 2025 15:56:00 +0100
Subject: [PATCH] Make theme switcher a single three-state toggle button
 (#16000)

This should help a bit with the header icon overflow on narrow screens and
also overall make things look less cluttered.

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

diff --git a/web/ui/mantine-ui/src/components/ThemeSelector.tsx b/web/ui/mantine-ui/src/components/ThemeSelector.tsx
index a7f5d1dcaa..964d491a04 100644
--- a/web/ui/mantine-ui/src/components/ThemeSelector.tsx
+++ b/web/ui/mantine-ui/src/components/ThemeSelector.tsx
@@ -1,14 +1,8 @@
+import { useMantineColorScheme, rem, ActionIcon } from "@mantine/core";
 import {
-  useMantineColorScheme,
-  SegmentedControl,
-  rem,
-  MantineColorScheme,
-  Tooltip,
-} from "@mantine/core";
-import {
+  IconBrightnessFilled,
   IconMoonFilled,
   IconSunFilled,
-  IconUserFilled,
 } from "@tabler/icons-react";
 import { FC } from "react";
 
@@ -20,45 +14,28 @@ export const ThemeSelector: FC = () => {
   };
 
   return (
-    <SegmentedControl
-      color="gray.7"
-      size="xs"
-      // styles={{ root: { backgroundColor: "var(--mantine-color-gray-7)" } }}
-      styles={{
-        root: {
-          padding: 3,
-          backgroundColor: "var(--mantine-color-gray-6)",
-        },
-      }}
-      withItemsBorders={false}
-      value={colorScheme}
-      onChange={(v) => setColorScheme(v as MantineColorScheme)}
-      data={[
-        {
-          value: "light",
-          label: (
-            <Tooltip label="Use light theme" offset={15}>
-              <IconSunFilled {...iconProps} />
-            </Tooltip>
-          ),
-        },
-        {
-          value: "dark",
-          label: (
-            <Tooltip label="Use dark theme" offset={15}>
-              <IconMoonFilled {...iconProps} />
-            </Tooltip>
-          ),
-        },
-        {
-          value: "auto",
-          label: (
-            <Tooltip label="Use browser-preferred theme" offset={15}>
-              <IconUserFilled {...iconProps} />
-            </Tooltip>
-          ),
-        },
-      ]}
-    />
+    <ActionIcon
+      color="gray"
+      title={`Switch to ${colorScheme === "light" ? "dark" : colorScheme === "dark" ? "browser-preferred" : "light"} theme`}
+      aria-label={`Switch to ${colorScheme === "light" ? "dark" : colorScheme === "dark" ? "browser-preferred" : "light"} theme`}
+      size={32}
+      onClick={() =>
+        setColorScheme(
+          colorScheme === "light"
+            ? "dark"
+            : colorScheme === "dark"
+              ? "auto"
+              : "light"
+        )
+      }
+    >
+      {colorScheme === "light" ? (
+        <IconMoonFilled {...iconProps} />
+      ) : colorScheme === "dark" ? (
+        <IconBrightnessFilled {...iconProps} />
+      ) : (
+        <IconSunFilled {...iconProps} />
+      )}
+    </ActionIcon>
   );
 };