mudhorn/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2025-02-21 03:16:00 -08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Make theme switcher a single three-state toggle button (#16000)

Browse source 
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>
This commit is contained in:
Julius Volz 2025-02-12 15:56:00 +01:00 committed by GitHub
parent 906f6a33b6
commit a944fa1e7a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 25 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
web/ui/mantine-ui/src/components/ThemeSelector.tsx
View file

@ -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>
);
};