82 lines
2.3 KiB
TypeScript
82 lines
2.3 KiB
TypeScript
import { DarkTheme, DefaultTheme, type Theme } from '@react-navigation/native';
|
|
|
|
export const THEME = {
|
|
light: {
|
|
background: 'hsl(0 0% 98%)',
|
|
foreground: 'hsl(0 0% 10.6%)',
|
|
card: 'hsl(0 0% 100%)',
|
|
cardForeground: 'hsl(0 0% 10.6%)',
|
|
popover: 'hsl(0 0% 100%)',
|
|
popoverForeground: 'hsl(0 0% 10.6%)',
|
|
primary: 'hsl(153 42% 30%)',
|
|
primaryForeground: 'hsl(0 0% 100%)',
|
|
secondary: 'hsl(147 46% 89%)',
|
|
secondaryForeground: 'hsl(153 42% 30%)',
|
|
muted: 'hsl(0 0% 96.1%)',
|
|
mutedForeground: 'hsl(0 0% 42%)',
|
|
accent: 'hsl(147 46% 89%)',
|
|
accentForeground: 'hsl(153 42% 30%)',
|
|
destructive: 'hsl(14 100% 63%)',
|
|
border: 'hsl(0 0% 87.8%)',
|
|
input: 'hsl(0 0% 87.8%)',
|
|
ring: 'hsl(153 42% 30%)',
|
|
radius: '0.625rem',
|
|
chart1: 'hsl(153 42% 30%)',
|
|
chart2: 'hsl(147 46% 89%)',
|
|
chart3: 'hsl(282 100% 22%)',
|
|
chart4: 'hsl(37 100% 65%)',
|
|
chart5: 'hsl(14 100% 63%)',
|
|
},
|
|
dark: {
|
|
background: 'hsl(0 0% 6.7%)',
|
|
foreground: 'hsl(0 0% 98%)',
|
|
card: 'hsl(0 0% 10.6%)',
|
|
cardForeground: 'hsl(0 0% 98%)',
|
|
popover: 'hsl(0 0% 10.6%)',
|
|
popoverForeground: 'hsl(0 0% 98%)',
|
|
primary: 'hsl(147 46% 89%)',
|
|
primaryForeground: 'hsl(153 42% 30%)',
|
|
secondary: 'hsl(153 42% 30%)',
|
|
secondaryForeground: 'hsl(147 46% 89%)',
|
|
muted: 'hsl(0 0% 17.6%)',
|
|
mutedForeground: 'hsl(0 0% 61%)',
|
|
accent: 'hsl(153 42% 30%)',
|
|
accentForeground: 'hsl(147 46% 89%)',
|
|
destructive: 'hsl(14 100% 63%)',
|
|
border: 'hsl(0 0% 17.6%)',
|
|
input: 'hsl(0 0% 17.6%)',
|
|
ring: 'hsl(147 46% 89%)',
|
|
radius: '0.625rem',
|
|
chart1: 'hsl(147 46% 89%)',
|
|
chart2: 'hsl(153 42% 30%)',
|
|
chart3: 'hsl(282 100% 50%)',
|
|
chart4: 'hsl(37 100% 65%)',
|
|
chart5: 'hsl(14 100% 63%)',
|
|
},
|
|
};
|
|
|
|
export const NAV_THEME: Record<'light' | 'dark', Theme> = {
|
|
light: {
|
|
...DefaultTheme,
|
|
colors: {
|
|
background: THEME.light.background,
|
|
border: THEME.light.border,
|
|
card: THEME.light.card,
|
|
notification: THEME.light.destructive,
|
|
primary: THEME.light.primary,
|
|
text: THEME.light.foreground,
|
|
},
|
|
},
|
|
dark: {
|
|
...DarkTheme,
|
|
colors: {
|
|
background: THEME.dark.background,
|
|
border: THEME.dark.border,
|
|
card: THEME.dark.card,
|
|
notification: THEME.dark.destructive,
|
|
primary: THEME.dark.primary,
|
|
text: THEME.dark.foreground,
|
|
},
|
|
},
|
|
};
|