41 lines
1.4 KiB
TypeScript
41 lines
1.4 KiB
TypeScript
import { View, Text, Pressable, Switch } from "react-native";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
import { useTheme, useThemeToggle } from "../theme";
|
|
|
|
export function ThemeToggleRow() {
|
|
const theme = useTheme();
|
|
const { isDarkMode, toggleTheme } = useThemeToggle();
|
|
|
|
return (
|
|
<Pressable
|
|
accessible
|
|
accessibilityLabel={isDarkMode ? "Префрли на светол режим" : "Префрли на темен режим"}
|
|
accessibilityRole="button"
|
|
onPress={toggleTheme}
|
|
style={{
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: theme.spacing.md,
|
|
padding: theme.spacing.lg,
|
|
}}
|
|
>
|
|
<View style={{ width: 36, height: 36, borderRadius: 18, backgroundColor: theme.colors.surfaceAlt, alignItems: "center", justifyContent: "center" }}>
|
|
<Ionicons
|
|
name={isDarkMode ? "moon" : "sunny"}
|
|
size={20}
|
|
color={theme.colors.textSecondary}
|
|
/>
|
|
</View>
|
|
<Text style={{ ...theme.typography.body, color: theme.colors.text, flex: 1 }}>
|
|
{isDarkMode ? "Светол режим" : "Темен режим"}
|
|
</Text>
|
|
<Switch
|
|
value={isDarkMode}
|
|
onValueChange={toggleTheme}
|
|
trackColor={{ false: theme.colors.borderLight, true: theme.colors.primaryLight }}
|
|
thumbColor={isDarkMode ? theme.colors.primary : theme.colors.textTertiary}
|
|
/>
|
|
</Pressable>
|
|
);
|
|
}
|