208 lines
4.3 KiB
TypeScript
208 lines
4.3 KiB
TypeScript
import { MD3DarkTheme, MD3LightTheme, adaptNavigationTheme, configureFonts } from 'react-native-paper';
|
|
import { DefaultTheme, DarkTheme } from '@react-navigation/native';
|
|
import { Platform } from 'react-native';
|
|
|
|
// Базовые настройки шрифтов
|
|
const baseFont = Platform.select({
|
|
ios: {
|
|
fontFamily: 'System',
|
|
letterSpacing: 0,
|
|
},
|
|
android: {
|
|
fontFamily: 'Roboto',
|
|
letterSpacing: 0,
|
|
},
|
|
default: {
|
|
fontFamily: 'System',
|
|
letterSpacing: 0,
|
|
},
|
|
});
|
|
|
|
const baseVariants = configureFonts({
|
|
config: {
|
|
...baseFont,
|
|
},
|
|
});
|
|
|
|
// Цвета для темной темы
|
|
const darkColors = {
|
|
primary: '#6366f1',
|
|
onPrimary: '#ffffff',
|
|
primaryContainer: '#4f46e5',
|
|
onPrimaryContainer: '#e0e7ff',
|
|
|
|
secondary: '#818cf8',
|
|
onSecondary: '#ffffff',
|
|
secondaryContainer: '#6366f1',
|
|
onSecondaryContainer: '#e0e7ff',
|
|
|
|
tertiary: '#a78bfa',
|
|
onTertiary: '#ffffff',
|
|
tertiaryContainer: '#8b5cf6',
|
|
onTertiaryContainer: '#ede9fe',
|
|
|
|
error: '#ef4444',
|
|
onError: '#ffffff',
|
|
errorContainer: '#dc2626',
|
|
onErrorContainer: '#fee2e2',
|
|
|
|
background: '#0f0f0f',
|
|
onBackground: '#e5e5e5',
|
|
|
|
surface: '#1a1a1a',
|
|
onSurface: '#e5e5e5',
|
|
|
|
surfaceVariant: '#262626',
|
|
onSurfaceVariant: '#d4d4d4',
|
|
|
|
outline: '#404040',
|
|
outlineVariant: '#2a2a2a',
|
|
|
|
shadow: '#000000',
|
|
scrim: '#000000',
|
|
|
|
inverseSurface: '#e5e5e5',
|
|
inverseOnSurface: '#1a1a1a',
|
|
inversePrimary: '#4f46e5',
|
|
|
|
elevation: {
|
|
level0: 'transparent',
|
|
level1: '#1f1f1f',
|
|
level2: '#232323',
|
|
level3: '#282828',
|
|
level4: '#2a2a2a',
|
|
level5: '#2d2d2d',
|
|
},
|
|
};
|
|
|
|
// Объединяем темы Paper и Navigation
|
|
const { LightTheme: NavigationLightTheme, DarkTheme: NavigationDarkTheme } = adaptNavigationTheme({
|
|
reactNavigationLight: DefaultTheme,
|
|
reactNavigationDark: DarkTheme,
|
|
});
|
|
|
|
// Темная тема (основная)
|
|
export const darkTheme = {
|
|
...MD3DarkTheme,
|
|
...NavigationDarkTheme,
|
|
colors: {
|
|
...MD3DarkTheme.colors,
|
|
...NavigationDarkTheme.colors,
|
|
...darkColors,
|
|
},
|
|
fonts: configureFonts({
|
|
config: {
|
|
...baseFont,
|
|
displayLarge: {
|
|
...baseFont,
|
|
fontSize: 57,
|
|
lineHeight: 64,
|
|
letterSpacing: 0,
|
|
},
|
|
displayMedium: {
|
|
...baseFont,
|
|
fontSize: 45,
|
|
lineHeight: 52,
|
|
letterSpacing: 0,
|
|
},
|
|
displaySmall: {
|
|
...baseFont,
|
|
fontSize: 36,
|
|
lineHeight: 44,
|
|
letterSpacing: 0,
|
|
},
|
|
headlineLarge: {
|
|
...baseFont,
|
|
fontSize: 32,
|
|
lineHeight: 40,
|
|
letterSpacing: 0,
|
|
},
|
|
headlineMedium: {
|
|
...baseFont,
|
|
fontSize: 28,
|
|
lineHeight: 36,
|
|
letterSpacing: 0,
|
|
},
|
|
headlineSmall: {
|
|
...baseFont,
|
|
fontSize: 24,
|
|
lineHeight: 32,
|
|
letterSpacing: 0,
|
|
},
|
|
titleLarge: {
|
|
...baseFont,
|
|
fontSize: 22,
|
|
lineHeight: 28,
|
|
letterSpacing: 0,
|
|
},
|
|
titleMedium: {
|
|
...baseFont,
|
|
fontSize: 16,
|
|
lineHeight: 24,
|
|
letterSpacing: 0.15,
|
|
},
|
|
titleSmall: {
|
|
...baseFont,
|
|
fontSize: 14,
|
|
lineHeight: 20,
|
|
letterSpacing: 0.1,
|
|
},
|
|
bodyLarge: {
|
|
...baseFont,
|
|
fontSize: 16,
|
|
lineHeight: 24,
|
|
letterSpacing: 0.15,
|
|
},
|
|
bodyMedium: {
|
|
...baseFont,
|
|
fontSize: 14,
|
|
lineHeight: 20,
|
|
letterSpacing: 0.25,
|
|
},
|
|
bodySmall: {
|
|
...baseFont,
|
|
fontSize: 12,
|
|
lineHeight: 16,
|
|
letterSpacing: 0.4,
|
|
},
|
|
labelLarge: {
|
|
...baseFont,
|
|
fontSize: 14,
|
|
lineHeight: 20,
|
|
letterSpacing: 0.1,
|
|
},
|
|
labelMedium: {
|
|
...baseFont,
|
|
fontSize: 12,
|
|
lineHeight: 16,
|
|
letterSpacing: 0.5,
|
|
},
|
|
labelSmall: {
|
|
...baseFont,
|
|
fontSize: 11,
|
|
lineHeight: 16,
|
|
letterSpacing: 0.5,
|
|
},
|
|
default: {
|
|
...baseFont,
|
|
fontSize: 14,
|
|
lineHeight: 20,
|
|
letterSpacing: 0,
|
|
},
|
|
},
|
|
}),
|
|
};
|
|
|
|
// Светлая тема (на будущее)
|
|
export const lightTheme = {
|
|
...MD3LightTheme,
|
|
...NavigationLightTheme,
|
|
colors: {
|
|
...MD3LightTheme.colors,
|
|
...NavigationLightTheme.colors,
|
|
},
|
|
fonts: MD3LightTheme.fonts,
|
|
};
|
|
|
|
// Экспортируем текущую тему
|
|
export const theme = darkTheme; |