Mohamed Boudra
2f77674c55
Add theme dropdown in settings with Light, Dark, System plus Zinc, Midnight, Claude, and Ghostty dark variants. Each theme has its own accent color and surface tints. Desaturate terminal ANSI colors across all dark themes. Add surfaceSidebarHover semantic token so hover states go the right direction in both light and dark modes. Self-heal if a stored theme no longer exists.
54 lines
1.0 KiB
TypeScript
54 lines
1.0 KiB
TypeScript
import { StyleSheet } from "react-native-unistyles";
|
|
import {
|
|
lightTheme,
|
|
darkTheme,
|
|
darkZincTheme,
|
|
darkMidnightTheme,
|
|
darkClaudeTheme,
|
|
darkGhosttyTheme,
|
|
} from "./theme";
|
|
|
|
StyleSheet.configure({
|
|
themes: {
|
|
light: lightTheme,
|
|
dark: darkTheme,
|
|
darkZinc: darkZincTheme,
|
|
darkMidnight: darkMidnightTheme,
|
|
darkClaude: darkClaudeTheme,
|
|
darkGhostty: darkGhosttyTheme,
|
|
},
|
|
breakpoints: {
|
|
xs: 0,
|
|
sm: 576,
|
|
md: 768,
|
|
lg: 992,
|
|
xl: 1200,
|
|
},
|
|
settings: {
|
|
adaptiveThemes: true,
|
|
},
|
|
});
|
|
|
|
// Type augmentation for TypeScript
|
|
type AppThemes = {
|
|
light: typeof lightTheme;
|
|
dark: typeof darkTheme;
|
|
darkZinc: typeof darkZincTheme;
|
|
darkMidnight: typeof darkMidnightTheme;
|
|
darkClaude: typeof darkClaudeTheme;
|
|
darkGhostty: typeof darkGhosttyTheme;
|
|
};
|
|
|
|
type AppBreakpoints = {
|
|
xs: number;
|
|
sm: number;
|
|
md: number;
|
|
lg: number;
|
|
xl: number;
|
|
};
|
|
|
|
declare module "react-native-unistyles" {
|
|
export interface UnistylesThemes extends AppThemes {}
|
|
export interface UnistylesBreakpoints extends AppBreakpoints {}
|
|
}
|