54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import { Monitor, Moon, Sun } from 'lucide-react';
|
|
import React from 'react';
|
|
|
|
import { useTheme } from '../../lib/theme';
|
|
import { Button } from '../Button/Button';
|
|
import { HStack } from '../HStack/HStack';
|
|
import { Separator } from '../Separator/Separator';
|
|
import { Switch } from '../Switch/Switch';
|
|
import { Text } from '../Text/Text';
|
|
|
|
/**
|
|
* A composite component for managing theme preferences.
|
|
* Includes a toggle for Light/Dark and a button for System mode.
|
|
*
|
|
* @returns A React element representing the theme switcher.
|
|
* @example
|
|
* ```tsx
|
|
* <ThemeSwitch />
|
|
* ```
|
|
*/
|
|
export function ThemeSwitch(): React.JSX.Element {
|
|
const { preference, setPreference, resolvedTheme } = useTheme();
|
|
|
|
const isDark = resolvedTheme === 'dark';
|
|
|
|
return (
|
|
<HStack align="center" gap={4}>
|
|
<HStack align="center" gap={2}>
|
|
<Sun className="w-4 h-4 text-[var(--rb-text)] opacity-60" />
|
|
<Switch
|
|
aria-label="Toggle dark mode"
|
|
isSelected={isDark}
|
|
variant="outline"
|
|
onChange={(isSelected) => setPreference(isSelected ? 'dark' : 'light')}
|
|
/>
|
|
<Moon className="w-4 h-4 text-[var(--rb-text)] opacity-60" />
|
|
</HStack>
|
|
<Separator direction="vertical" thinned={false} />
|
|
<Button
|
|
aria-label="Follow system theme"
|
|
color={preference === 'system' ? 'primary' : 'neutral'}
|
|
renderStartIcon={(className) => <Monitor className={className} />}
|
|
size="s"
|
|
variant={preference === 'system' ? 'solid' : 'ghost'}
|
|
onPress={() => setPreference('system')}
|
|
>
|
|
<Text bold={preference === 'system'} size="s" type="label">
|
|
Auto
|
|
</Text>
|
|
</Button>
|
|
</HStack>
|
|
);
|
|
}
|