49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
import React, { createContext, useContext, useState, useEffect, type ReactNode } from "react";
|
|
import AsyncStorage from "@react-native-async-storage/async-storage";
|
|
import { darkColors, lightColors, type Colors } from "../theme/colors";
|
|
|
|
type ThemeMode = "dark" | "light";
|
|
|
|
interface ThemeContextType {
|
|
colors: Colors;
|
|
mode: ThemeMode;
|
|
toggleTheme: () => void;
|
|
isDark: boolean;
|
|
}
|
|
|
|
const STORAGE_KEY = "@theme_mode";
|
|
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
|
|
|
|
export function ThemeProvider({ children }: { children: ReactNode }) {
|
|
const [mode, setMode] = useState<ThemeMode>("dark");
|
|
|
|
useEffect(() => {
|
|
AsyncStorage.getItem(STORAGE_KEY).then((val) => {
|
|
if (val === "light" || val === "dark") setMode(val);
|
|
});
|
|
}, []);
|
|
|
|
const toggleTheme = () => {
|
|
const next = mode === "dark" ? "light" : "dark";
|
|
setMode(next);
|
|
AsyncStorage.setItem(STORAGE_KEY, next);
|
|
};
|
|
|
|
const value: ThemeContextType = {
|
|
colors: mode === "dark" ? darkColors : lightColors,
|
|
mode,
|
|
toggleTheme,
|
|
isDark: mode === "dark",
|
|
};
|
|
|
|
return (
|
|
<ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
|
|
);
|
|
}
|
|
|
|
export function useTheme() {
|
|
const ctx = useContext(ThemeContext);
|
|
if (!ctx) throw new Error("useTheme must be used within ThemeProvider");
|
|
return ctx;
|
|
}
|