Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | 22x 262x 262x 262x 262x 2x 1x 1x | import React from "react";
import { useTranslation } from "react-i18next";
import { useColorModes } from "~app/hooks/use-color-modes";
import { Button } from "~components/button";
import { Icon } from "~components/icons";
import { Text } from "~components/text";
import { View } from "~components/view";
export const ColorModeSettings: React.FC = () => {
const { t } = useTranslation("settings");
const {
system: [systemColorMode],
selected: [
selectedColorMode,
setSelectedColorMode,
removeSelectedColorMode,
],
} = useColorModes();
const colorMode = selectedColorMode ?? systemColorMode;
return (
<View className="flex-row items-center gap-4">
<Text className="text-xl">{t("colorMode.header")}</Text>
<Button
testID="color-mode-button"
isIconOnly
variant="bordered"
onPress={() => {
if (!selectedColorMode || selectedColorMode === systemColorMode) {
setSelectedColorMode(systemColorMode === "dark" ? "light" : "dark");
} else {
removeSelectedColorMode();
}
}}
>
<Icon
name={colorMode === "light" ? "moon" : "sun"}
className="text-foreground"
/>
</Button>
</View>
);
};
|