110 lines
2.6 KiB
TypeScript
110 lines
2.6 KiB
TypeScript
/**
|
|
* Theme Toggle Component for switching between light, dark, and system themes
|
|
*/
|
|
|
|
import React from "react";
|
|
import { View, TouchableOpacity, StyleSheet } from "react-native";
|
|
import { ThemedText } from "@/components/themed-text";
|
|
import { useThemeContext } from "@/hooks/use-theme-context";
|
|
import { useI18n } from "@/hooks/use-i18n";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
|
|
interface ThemeToggleProps {
|
|
style?: any;
|
|
}
|
|
|
|
export function ThemeToggle({ style }: ThemeToggleProps) {
|
|
const { themeMode, setThemeMode, colors } = useThemeContext();
|
|
const { t } = useI18n();
|
|
|
|
const themeOptions = [
|
|
{
|
|
mode: "light" as const,
|
|
label: t("common.theme_light"),
|
|
icon: "sunny-outline" as const,
|
|
},
|
|
{
|
|
mode: "dark" as const,
|
|
label: t("common.theme_dark"),
|
|
icon: "moon-outline" as const,
|
|
},
|
|
{
|
|
mode: "system" as const,
|
|
label: t("common.theme_system"),
|
|
icon: "phone-portrait-outline" as const,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<View
|
|
style={[styles.container, style, { backgroundColor: colors.surface }]}
|
|
>
|
|
<ThemedText style={styles.title}>{t("common.theme")}</ThemedText>
|
|
<View style={styles.optionsContainer}>
|
|
{themeOptions.map((option) => (
|
|
<TouchableOpacity
|
|
key={option.mode}
|
|
style={[
|
|
styles.option,
|
|
{
|
|
backgroundColor:
|
|
themeMode === option.mode
|
|
? colors.primary
|
|
: colors.backgroundSecondary,
|
|
borderColor: colors.border,
|
|
},
|
|
]}
|
|
onPress={() => setThemeMode(option.mode)}
|
|
>
|
|
<Ionicons
|
|
name={option.icon}
|
|
size={20}
|
|
color={themeMode === option.mode ? "#fff" : colors.icon}
|
|
/>
|
|
<ThemedText
|
|
style={[
|
|
styles.optionText,
|
|
{ color: themeMode === option.mode ? "#fff" : colors.text },
|
|
]}
|
|
>
|
|
{option.label}
|
|
</ThemedText>
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
padding: 16,
|
|
borderRadius: 12,
|
|
marginVertical: 8,
|
|
},
|
|
title: {
|
|
fontSize: 16,
|
|
fontWeight: "600",
|
|
marginBottom: 12,
|
|
},
|
|
optionsContainer: {
|
|
flexDirection: "row",
|
|
gap: 8,
|
|
},
|
|
option: {
|
|
flex: 1,
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
paddingVertical: 12,
|
|
paddingHorizontal: 8,
|
|
borderRadius: 8,
|
|
borderWidth: 1,
|
|
gap: 6,
|
|
},
|
|
optionText: {
|
|
fontSize: 14,
|
|
fontWeight: "500",
|
|
},
|
|
});
|