- Create ThemeContext with light/dark/system mode support - Add DarkColors palette for dark mode UI - Extend Colors object with full dark theme variants - Update useThemeColor hook to use ThemeContext - Add useThemeColors, useResolvedTheme, useIsDarkMode hooks - Update RootLayout (native and web) with ThemeProvider - Add theme toggle UI in ProfileDrawer settings - Theme preference persisted to AsyncStorage - Add comprehensive tests for ThemeContext and hooks 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
/**
|
|
* Theme color hook with dark mode support
|
|
* Uses ThemeContext for user preference, falls back to system preference
|
|
*/
|
|
|
|
import { Colors } from '@/constants/theme';
|
|
import { useThemeOptional } from '@/contexts/ThemeContext';
|
|
import { useColorScheme } from '@/hooks/use-color-scheme';
|
|
|
|
export type ThemeColorName = keyof typeof Colors.light & keyof typeof Colors.dark;
|
|
|
|
export function useThemeColor(
|
|
props: { light?: string; dark?: string },
|
|
colorName: ThemeColorName
|
|
) {
|
|
const themeContext = useThemeOptional();
|
|
const systemTheme = useColorScheme();
|
|
|
|
// Use ThemeContext if available, otherwise fall back to system
|
|
const theme = themeContext?.resolvedTheme ?? systemTheme ?? 'light';
|
|
const colorFromProps = props[theme];
|
|
|
|
if (colorFromProps) {
|
|
return colorFromProps;
|
|
} else {
|
|
return Colors[theme][colorName];
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Hook to get all theme colors at once
|
|
* Useful for components that need multiple colors
|
|
*/
|
|
export function useThemeColors() {
|
|
const themeContext = useThemeOptional();
|
|
const systemTheme = useColorScheme();
|
|
const theme = themeContext?.resolvedTheme ?? systemTheme ?? 'light';
|
|
|
|
return Colors[theme];
|
|
}
|
|
|
|
/**
|
|
* Hook to get resolved theme
|
|
*/
|
|
export function useResolvedTheme(): 'light' | 'dark' {
|
|
const themeContext = useThemeOptional();
|
|
const systemTheme = useColorScheme();
|
|
return themeContext?.resolvedTheme ?? systemTheme ?? 'light';
|
|
}
|
|
|
|
/**
|
|
* Hook to check if dark mode is active
|
|
*/
|
|
export function useIsDarkMode(): boolean {
|
|
const themeContext = useThemeOptional();
|
|
const systemTheme = useColorScheme();
|
|
const resolvedTheme = themeContext?.resolvedTheme ?? systemTheme ?? 'light';
|
|
return resolvedTheme === 'dark';
|
|
}
|