74 lines
2.3 KiB
TypeScript
74 lines
2.3 KiB
TypeScript
import React, { createContext, useContext, useState, useEffect } from 'react';
|
|
import { useColorScheme, Platform } from 'react-native';
|
|
import { Theme } from '../constants/theme';
|
|
import { storage } from '../utils/storage';
|
|
import { useAppConfig } from './ConfigContext';
|
|
|
|
type ThemeMode = 'light' | 'dark' | 'system';
|
|
|
|
interface ThemeContextType {
|
|
mode: ThemeMode;
|
|
setMode: (mode: ThemeMode) => void;
|
|
colors: typeof Theme.dark;
|
|
isDark: boolean;
|
|
}
|
|
|
|
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
|
|
|
|
// Storage helper is now imported from utils/storage
|
|
|
|
export function ThemeProvider({ children }: { children: React.ReactNode }) {
|
|
const systemColorScheme = useColorScheme();
|
|
const [mode, setRawMode] = useState<ThemeMode>('light');
|
|
const { config } = useAppConfig();
|
|
|
|
useEffect(() => {
|
|
loadTheme();
|
|
}, []);
|
|
|
|
const loadTheme = async () => {
|
|
const savedMode = await storage.get('theme_mode');
|
|
if (savedMode) {
|
|
setRawMode(savedMode as ThemeMode);
|
|
}
|
|
};
|
|
|
|
const setMode = async (newMode: ThemeMode) => {
|
|
setRawMode(newMode);
|
|
await storage.save('theme_mode', newMode);
|
|
};
|
|
|
|
const isDark = mode === 'system' ? systemColorScheme === 'dark' : mode === 'dark';
|
|
|
|
// Layer admin-controlled brand colors and logo on top of the static design tokens
|
|
// so consumers always receive the full palette (surfaceLight, glass, accent, etc).
|
|
const baseColors = isDark ? Theme.dark : Theme.light;
|
|
const colors = {
|
|
...baseColors,
|
|
primary: config?.branding?.theme_color_primary || baseColors.primary,
|
|
accent: config?.branding?.theme_color_primary || baseColors.accent,
|
|
secondary: config?.branding?.theme_color_secondary || baseColors.secondary,
|
|
logo: config?.branding?.logo_url || null,
|
|
} as typeof Theme.dark & { logo: string | null };
|
|
|
|
return (
|
|
<ThemeContext.Provider value={{ mode, setMode, colors, isDark }}>
|
|
{children}
|
|
</ThemeContext.Provider>
|
|
);
|
|
}
|
|
|
|
export function useAppTheme() {
|
|
const context = useContext(ThemeContext);
|
|
if (context === undefined) {
|
|
// Fallback safely instead of crashing — return the full design-token palette
|
|
return {
|
|
mode: 'light',
|
|
setMode: () => {},
|
|
isDark: false,
|
|
colors: { ...Theme.light, logo: null }
|
|
};
|
|
}
|
|
return context;
|
|
}
|