import { MD3LightTheme, MD3DarkTheme, adaptNavigationTheme, ThemeOverride, } from 'react-native-paper'; import type { MD3Theme } from 'react-native-paper'; import { lightOverrides, darkOverrides, antaramColors } from './colors'; import { spacing } from './spacing'; // ─── Light Theme ──────────────────────────────────────────────────────────────── export const lightTheme: MD3Theme = { ...MD3LightTheme, dark: false, roundness: 12, colors: { ...MD3LightTheme.colors, ...lightOverrides, }, }; // ─── Dark Theme ───────────────────────────────────────────────────────────────── export const darkTheme: MD3Theme = { ...MD3DarkTheme, dark: true, roundness: 12, colors: { ...MD3DarkTheme.colors, ...darkOverrides, }, }; // ─── Navigation Themes ───────────────────────────────────────────────────────── // Used with `@react-navigation/native` to keep the nav bar / header in sync // with the Paper theme. const { LightTheme: PaperNavLight, DarkTheme: PaperNavDark } = adaptNavigationTheme({ reactNavigationLight: { colors: { background: lightTheme.colors.background, card: lightTheme.colors.surface, text: lightTheme.colors.onSurface, border: lightTheme.colors.outline, primary: lightTheme.colors.primary, }, }, reactNavigationDark: { colors: { background: darkTheme.colors.background, card: darkTheme.colors.surface, text: darkTheme.colors.onSurface, border: darkTheme.colors.outline, primary: darkTheme.colors.primary, }, }, }); /** Navigation theme for light mode */ export const LightNavTheme = PaperNavLight; /** Navigation theme for dark mode */ export const DarkNavTheme = PaperNavDark; // ─── Custom Theme Tokens ──────────────────────────────────────────────────────── // Shape tokens for consistent border-radius across the app. export const customTheme = { /** Corner radius presets */ shape: { shapeCornerNone: 0, shapeCornerExtraSmall: 4, shapeCornerSmall: 8, shapeCornerMedium: 12, shapeCornerLarge: 16, shapeCornerExtraLarge: 28, shapeCornerFull: 9999, }, /** Re-export spacing for easy single-import access */ spacing, /** Brand and status colors */ colors: antaramColors, } as const; // ─── Helper ───────────────────────────────────────────────────────────────────── /** * Returns the appropriate Paper theme based on a dark-mode flag. * Defaults to the light theme when the flag is falsy. */ export function getAppTheme(isDark: boolean): MD3Theme { return isDark ? darkTheme : lightTheme; } /** * Returns the appropriate navigation theme based on a dark-mode flag. */ export function getNavTheme(isDark: boolean) { return isDark ? DarkNavTheme : LightNavTheme; }