451 lines
14 KiB
TypeScript
451 lines
14 KiB
TypeScript
import { MD3LightTheme, MD3DarkTheme } from 'react-native-paper';
|
|
|
|
const themes = {
|
|
purple: {
|
|
light: MD3LightTheme,
|
|
dark: MD3DarkTheme,
|
|
},
|
|
red: {
|
|
light: {
|
|
...MD3LightTheme,
|
|
colors: {
|
|
...MD3LightTheme.colors,
|
|
primary: '#7F0000',
|
|
primaryContainer: '#FF5252',
|
|
inversePrimary: '#D32F2F',
|
|
},
|
|
},
|
|
dark: {
|
|
...MD3DarkTheme,
|
|
colors: {
|
|
...MD3DarkTheme.colors,
|
|
primary: '#FF5252',
|
|
primaryContainer: '#7F0000',
|
|
inversePrimary: '#D32F2F',
|
|
},
|
|
},
|
|
},
|
|
blue: {
|
|
light: {
|
|
...MD3LightTheme,
|
|
colors: {
|
|
...MD3LightTheme.colors,
|
|
primary: '#0D47A1',
|
|
primaryContainer: '#64B5F6',
|
|
inversePrimary: '#1976D2',
|
|
},
|
|
},
|
|
dark: {
|
|
...MD3DarkTheme,
|
|
colors: {
|
|
...MD3DarkTheme.colors,
|
|
primary: '#64B5F6',
|
|
primaryContainer: '#0D47A1',
|
|
inversePrimary: '#1976D2',
|
|
},
|
|
},
|
|
},
|
|
yellow: {
|
|
light: {
|
|
...MD3LightTheme,
|
|
colors: {
|
|
...MD3LightTheme.colors,
|
|
primary: '#efb100',
|
|
primaryContainer: '#FFEB8F',
|
|
inversePrimary: '#fbc338',
|
|
},
|
|
},
|
|
dark: {
|
|
...MD3DarkTheme,
|
|
colors: {
|
|
...MD3DarkTheme.colors,
|
|
primary: '#FFEB8F',
|
|
primaryContainer: '#EFB100',
|
|
inversePrimary: '#FBC02D',
|
|
},
|
|
},
|
|
},
|
|
green: {
|
|
light: {
|
|
...MD3LightTheme,
|
|
colors: {
|
|
...MD3LightTheme.colors,
|
|
primary: '#004D00',
|
|
primaryContainer: '#66BB6A',
|
|
inversePrimary: '#388E3C',
|
|
},
|
|
},
|
|
dark: {
|
|
...MD3DarkTheme,
|
|
colors: {
|
|
...MD3DarkTheme.colors,
|
|
primary: '#66BB6A',
|
|
primaryContainer: '#004D00',
|
|
inversePrimary: '#388E3C',
|
|
},
|
|
},
|
|
},
|
|
orange: {
|
|
light: {
|
|
...MD3LightTheme,
|
|
colors: {
|
|
...MD3LightTheme.colors,
|
|
primary: '#F57C00',
|
|
primaryContainer: '#FFCC80',
|
|
inversePrimary: '#FFAB40',
|
|
},
|
|
},
|
|
dark: {
|
|
...MD3DarkTheme,
|
|
colors: {
|
|
...MD3DarkTheme.colors,
|
|
primary: '#FFCC80',
|
|
primaryContainer: '#F57C00',
|
|
inversePrimary: '#FFAB40',
|
|
},
|
|
},
|
|
}
|
|
};
|
|
|
|
export const oldThemes = {
|
|
purple: {
|
|
light: MD3LightTheme,
|
|
dark: MD3DarkTheme,
|
|
},
|
|
red: {
|
|
light: {
|
|
...MD3LightTheme,
|
|
colors: {
|
|
...MD3LightTheme.colors,
|
|
primary: '#D32F2F',
|
|
onPrimary: '#FFFFFF',
|
|
primaryContainer: '#FFCDD2',
|
|
onPrimaryContainer: '#4A0D0D',
|
|
secondary: '#FF5252',
|
|
onSecondary: '#FFFFFF',
|
|
secondaryContainer: '#FFEBEE',
|
|
onSecondaryContainer: '#5D1E1E',
|
|
tertiary: '#C2185B',
|
|
onTertiary: '#FFFFFF',
|
|
tertiaryContainer: '#F8BBD0',
|
|
onTertiaryContainer: '#550027',
|
|
background: '#FFFFFF',
|
|
onBackground: '#121212',
|
|
surface: '#F5F5F5',
|
|
onSurface: '#1E1E1E',
|
|
error: '#B00020',
|
|
onError: '#FFFFFF',
|
|
outline: '#B71C1C',
|
|
inverseSurface: '#333333',
|
|
inverseOnSurface: '#FAFAFA',
|
|
inversePrimary: '#FFB4A9',
|
|
},
|
|
},
|
|
dark: {
|
|
...MD3DarkTheme,
|
|
colors: {
|
|
...MD3DarkTheme.colors,
|
|
primary: '#FF5252',
|
|
onPrimary: '#FFFFFF',
|
|
primaryContainer: '#7F0000',
|
|
onPrimaryContainer: '#FFDAD4',
|
|
secondary: '#FF8A80',
|
|
onSecondary: '#1E0000',
|
|
secondaryContainer: '#4A0D0D',
|
|
onSecondaryContainer: '#FFEBEE',
|
|
tertiary: '#FF4081',
|
|
onTertiary: '#1E001E',
|
|
tertiaryContainer: '#7A001A',
|
|
onTertiaryContainer: '#FFD9E3',
|
|
background: '#121212',
|
|
onBackground: '#E1E1E1',
|
|
surface: '#1E1E1E',
|
|
onSurface: '#FFFFFF',
|
|
error: '#CF6679',
|
|
onError: '#FFFFFF',
|
|
outline: '#FF6F61',
|
|
inverseSurface: '#E1E1E1',
|
|
inverseOnSurface: '#1E1E1E',
|
|
inversePrimary: '#D32F2F',
|
|
},
|
|
},
|
|
},
|
|
blue: {
|
|
light: {
|
|
...MD3LightTheme,
|
|
colors: {
|
|
...MD3LightTheme.colors,
|
|
primary: '#1976D2',
|
|
onPrimary: '#FFFFFF',
|
|
primaryContainer: '#BBDEFB',
|
|
onPrimaryContainer: '#0D47A1',
|
|
secondary: '#64B5F6',
|
|
onSecondary: '#FFFFFF',
|
|
secondaryContainer: '#E3F2FD',
|
|
onSecondaryContainer: '#1565C0',
|
|
tertiary: '#0288D1',
|
|
onTertiary: '#FFFFFF',
|
|
tertiaryContainer: '#81D4FA',
|
|
onTertiaryContainer: '#01579B',
|
|
background: '#FFFFFF',
|
|
onBackground: '#121212',
|
|
surface: '#F5F5F5',
|
|
onSurface: '#1E1E1E',
|
|
error: '#B00020',
|
|
onError: '#FFFFFF',
|
|
outline: '#1565C0',
|
|
inverseSurface: '#333333',
|
|
inverseOnSurface: '#FAFAFA',
|
|
inversePrimary: '#90CAF9',
|
|
},
|
|
},
|
|
dark: {
|
|
...MD3DarkTheme,
|
|
colors: {
|
|
...MD3DarkTheme.colors,
|
|
primary: '#64B5F6',
|
|
onPrimary: '#FFFFFF',
|
|
primaryContainer: '#0D47A1',
|
|
onPrimaryContainer: '#BBDEFB',
|
|
secondary: '#81D4FA',
|
|
onSecondary: '#1E1E1E',
|
|
secondaryContainer: '#1565C0',
|
|
onSecondaryContainer: '#E3F2FD',
|
|
tertiary: '#29B6F6',
|
|
onTertiary: '#1E1E1E',
|
|
tertiaryContainer: '#01579B',
|
|
onTertiaryContainer: '#81D4FA',
|
|
background: '#121212',
|
|
onBackground: '#E1E1E1',
|
|
surface: '#1E1E1E',
|
|
onSurface: '#FFFFFF',
|
|
error: '#CF6679',
|
|
onError: '#FFFFFF',
|
|
outline: '#64B5F6',
|
|
inverseSurface: '#E1E1E1',
|
|
inverseOnSurface: '#1E1E1E',
|
|
inversePrimary: '#1976D2',
|
|
},
|
|
},
|
|
},
|
|
yellow: {
|
|
light: {
|
|
...MD3LightTheme,
|
|
colors: {
|
|
...MD3LightTheme.colors,
|
|
primary: '#FBC02D',
|
|
onPrimary: '#000000',
|
|
primaryContainer: '#FFF9C4',
|
|
onPrimaryContainer: '#5F3700',
|
|
secondary: '#FFD54F',
|
|
onSecondary: '#000000',
|
|
secondaryContainer: '#FFF8E1',
|
|
onSecondaryContainer: '#775A00',
|
|
tertiary: '#FFB300',
|
|
onTertiary: '#FFFFFF',
|
|
tertiaryContainer: '#FFECB3',
|
|
onTertiaryContainer: '#603800',
|
|
background: '#FFFFFF',
|
|
onBackground: '#121212',
|
|
surface: '#F5F5F5',
|
|
onSurface: '#1E1E1E',
|
|
error: '#B00020',
|
|
onError: '#FFFFFF',
|
|
outline: '#FF8F00',
|
|
inverseSurface: '#333333',
|
|
inverseOnSurface: '#FAFAFA',
|
|
inversePrimary: '#FDD835',
|
|
},
|
|
},
|
|
dark: {
|
|
...MD3DarkTheme,
|
|
colors: {
|
|
...MD3DarkTheme.colors,
|
|
primary: '#FFD54F',
|
|
onPrimary: '#000000',
|
|
primaryContainer: '#5F3700',
|
|
onPrimaryContainer: '#FFF9C4',
|
|
secondary: '#FFEB3B',
|
|
onSecondary: '#000000',
|
|
secondaryContainer: '#775A00',
|
|
onSecondaryContainer: '#FFF8E1',
|
|
tertiary: '#FFB300',
|
|
onTertiary: '#1E1E1E',
|
|
tertiaryContainer: '#603800',
|
|
onTertiaryContainer: '#FFECB3',
|
|
background: '#121212',
|
|
onBackground: '#E1E1E1',
|
|
surface: '#1E1E1E',
|
|
onSurface: '#FFFFFF',
|
|
error: '#CF6679',
|
|
onError: '#FFFFFF',
|
|
outline: '#FDD835',
|
|
inverseSurface: '#E1E1E1',
|
|
inverseOnSurface: '#1E1E1E',
|
|
inversePrimary: '#FBC02D',
|
|
},
|
|
},
|
|
},
|
|
green: {
|
|
light: {
|
|
...MD3LightTheme,
|
|
colors: {
|
|
...MD3LightTheme.colors,
|
|
primary: '#388E3C', // Material Green 700
|
|
onPrimary: '#FFFFFF',
|
|
primaryContainer: '#C8E6C9',
|
|
onPrimaryContainer: '#004D00',
|
|
|
|
secondary: '#66BB6A',
|
|
onSecondary: '#FFFFFF',
|
|
secondaryContainer: '#E8F5E9',
|
|
onSecondaryContainer: '#1B5E20',
|
|
|
|
tertiary: '#2E7D32',
|
|
onTertiary: '#FFFFFF',
|
|
tertiaryContainer: '#A5D6A7',
|
|
onTertiaryContainer: '#003300',
|
|
|
|
background: '#FFFFFF',
|
|
onBackground: '#121212',
|
|
surface: '#F5F5F5',
|
|
onSurface: '#1E1E1E',
|
|
error: '#B00020',
|
|
onError: '#FFFFFF',
|
|
outline: '#388E3C',
|
|
|
|
inverseSurface: '#333333',
|
|
inverseOnSurface: '#FAFAFA',
|
|
inversePrimary: '#A5D6A7', // Soft green
|
|
},
|
|
},
|
|
dark: {
|
|
...MD3DarkTheme,
|
|
colors: {
|
|
...MD3DarkTheme.colors,
|
|
primary: '#66BB6A',
|
|
onPrimary: '#FFFFFF',
|
|
primaryContainer: '#004D00',
|
|
onPrimaryContainer: '#C8E6C9',
|
|
|
|
secondary: '#81C784',
|
|
onSecondary: '#1E1E1E',
|
|
secondaryContainer: '#1B5E20',
|
|
onSecondaryContainer: '#E8F5E9',
|
|
|
|
tertiary: '#43A047',
|
|
onTertiary: '#1E1E1E',
|
|
tertiaryContainer: '#003300',
|
|
onTertiaryContainer: '#A5D6A7',
|
|
|
|
background: '#121212',
|
|
onBackground: '#E1E1E1',
|
|
surface: '#1E1E1E',
|
|
onSurface: '#FFFFFF',
|
|
error: '#CF6679',
|
|
onError: '#FFFFFF',
|
|
outline: '#A5D6A7',
|
|
|
|
inverseSurface: '#E1E1E1',
|
|
inverseOnSurface: '#1E1E1E',
|
|
inversePrimary: '#388E3C', // Same as light theme primary
|
|
}
|
|
}
|
|
},
|
|
orange: {
|
|
light: {
|
|
...MD3LightTheme,
|
|
colors: {
|
|
...MD3LightTheme.colors,
|
|
primary: '#F57C00', // Material Orange 700
|
|
onPrimary: '#FFFFFF',
|
|
primaryContainer: '#FFCC80',
|
|
onPrimaryContainer: '#7A3300',
|
|
|
|
secondary: '#FFA726',
|
|
onSecondary: '#FFFFFF',
|
|
secondaryContainer: '#FFE0B2',
|
|
onSecondaryContainer: '#8E4700',
|
|
|
|
tertiary: '#EF6C00', // Deep orange
|
|
onTertiary: '#FFFFFF',
|
|
tertiaryContainer: '#FFD180',
|
|
onTertiaryContainer: '#622600',
|
|
|
|
background: '#FFFFFF',
|
|
onBackground: '#121212',
|
|
surface: '#F5F5F5',
|
|
onSurface: '#1E1E1E',
|
|
error: '#B00020',
|
|
onError: '#FFFFFF',
|
|
outline: '#F57C00',
|
|
|
|
inverseSurface: '#333333',
|
|
inverseOnSurface: '#FAFAFA',
|
|
inversePrimary: '#FFAB40', // Soft orange
|
|
},
|
|
},
|
|
dark: {
|
|
...MD3DarkTheme,
|
|
colors: {
|
|
...MD3DarkTheme.colors,
|
|
primary: '#FFA726',
|
|
onPrimary: '#FFFFFF',
|
|
primaryContainer: '#b38800',
|
|
onPrimaryContainer: '#FFCC80',
|
|
|
|
secondary: '#FFB74D',
|
|
onSecondary: '#1E1E1E',
|
|
secondaryContainer: '#5a4406',
|
|
onSecondaryContainer: '#FFE0B2',
|
|
|
|
tertiary: '#FB8C00',
|
|
onTertiary: '#1E1E1E',
|
|
tertiaryContainer: '#623400',
|
|
onTertiaryContainer: '#FFD180',
|
|
|
|
background: '#121212',
|
|
onBackground: '#E1E1E1',
|
|
surface: '#1E1E1E',
|
|
onSurface: '#FFFFFF',
|
|
error: '#CF6679',
|
|
onError: '#FFFFFF',
|
|
outline: '#FFAB40',
|
|
|
|
inverseSurface: '#E1E1E1',
|
|
inverseOnSurface: '#1E1E1E',
|
|
inversePrimary: '#F57C00', // Same as light theme primary
|
|
},
|
|
}
|
|
}
|
|
};
|
|
|
|
export const themePreviews = {
|
|
purple: {
|
|
light: '#6200EA', // Default Purple Light
|
|
dark: '#BB86FC', // Default Purple Dark
|
|
},
|
|
red: {
|
|
light: '#D32F2F',
|
|
dark: '#FF5252',
|
|
},
|
|
blue: {
|
|
light: '#1976D2',
|
|
dark: '#64B5F6',
|
|
},
|
|
yellow: {
|
|
light: '#FBC02D',
|
|
dark: '#FFD54F',
|
|
},
|
|
green: {
|
|
light: '#388E3C',
|
|
dark: '#66BB6A',
|
|
},
|
|
orange: {
|
|
light: '#F57C00',
|
|
dark: '#FFA726',
|
|
},
|
|
};
|
|
|
|
export default themes;
|