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