@naarni/design-system
Version:
Naarni React Native Design System for EV Fleet Apps
177 lines (176 loc) • 3.95 kB
JavaScript
import { useColorScheme } from 'react-native';
const lightColors = {
primary: {
main: '#6366F1',
light: '#818CF8',
dark: '#4F46E5',
gradient: ['#6366F1', '#8B5CF6'],
},
secondary: {
main: '#10B981',
light: '#34D399',
dark: '#059669',
gradient: ['#10B981', '#06B6D4'],
},
success: {
main: '#10B981',
light: '#34D399',
dark: '#059669',
gradient: ['#10B981', '#059669'],
},
error: {
main: '#EF4444',
light: '#F87171',
dark: '#DC2626',
gradient: ['#EF4444', '#DC2626'],
},
warning: {
main: '#F59E0B',
light: '#FBBF24',
dark: '#D97706',
gradient: ['#F59E0B', '#D97706'],
},
info: {
main: '#3B82F6',
light: '#60A5FA',
dark: '#2563EB',
gradient: ['#3B82F6', '#1D4ED8'],
},
accent: {
purple: '#8B5CF6',
pink: '#EC4899',
orange: '#F97316',
teal: '#14B8A6',
},
grey: {
50: '#F8FAFC',
100: '#F1F5F9',
200: '#E2E8F0',
300: '#CBD5E1',
400: '#94A3B8',
500: '#64748B',
600: '#475569',
700: '#334155',
800: '#1E293B',
900: '#0F172A',
},
common: {
black: '#000000',
white: '#FFFFFF',
},
text: {
primary: '#1E293B',
secondary: '#475569',
disabled: '#94A3B8',
inverse: '#FFFFFF',
},
background: {
default: '#FFFFFF',
paper: '#F8FAFC',
elevated: '#FFFFFF',
gradient: ['#F8FAFC', '#F1F5F9'],
},
surface: {
card: '#FFFFFF',
cardHover: '#F1F5F9',
border: '#E2E8F0',
divider: '#E2E8F0',
},
};
const darkColors = {
primary: {
main: '#8B5CF6',
light: '#A78BFA',
dark: '#7C3AED',
gradient: ['#8B5CF6', '#EC4899'],
},
secondary: {
main: '#06B6D4',
light: '#22D3EE',
dark: '#0891B2',
gradient: ['#06B6D4', '#10B981'],
},
success: {
main: '#10B981',
light: '#34D399',
dark: '#059669',
gradient: ['#10B981', '#059669'],
},
error: {
main: '#F87171',
light: '#FCA5A5',
dark: '#EF4444',
gradient: ['#F87171', '#EF4444'],
},
warning: {
main: '#FBBF24',
light: '#FCD34D',
dark: '#F59E0B',
gradient: ['#FBBF24', '#F59E0B'],
},
info: {
main: '#60A5FA',
light: '#93C5FD',
dark: '#3B82F6',
gradient: ['#60A5FA', '#3B82F6'],
},
accent: {
purple: '#A78BFA',
pink: '#F472B6',
orange: '#FB923C',
teal: '#2DD4BF',
},
grey: {
50: '#0F172A',
100: '#1E293B',
200: '#334155',
300: '#475569',
400: '#64748B',
500: '#94A3B8',
600: '#CBD5E1',
700: '#E2E8F0',
800: '#F1F5F9',
900: '#F8FAFC',
},
common: {
black: '#000000',
white: '#FFFFFF',
},
text: {
primary: '#F8FAFC',
secondary: '#CBD5E1',
disabled: '#64748B',
inverse: '#0F172A',
},
background: {
default: '#0F172A',
paper: '#1E293B',
elevated: '#334155',
gradient: ['#0F172A', '#1E293B'],
},
surface: {
card: '#1E293B',
cardHover: '#334155',
border: '#334155',
divider: '#475569',
},
};
export const useDeviceTheme = () => {
const colorScheme = useColorScheme();
const isDark = colorScheme === 'dark';
return {
colors: isDark ? darkColors : lightColors,
isDark,
mode: colorScheme || 'light',
};
};
export const lightTheme = {
colors: lightColors,
isDark: false,
mode: 'light',
};
export const darkTheme = {
colors: darkColors,
isDark: true,
mode: 'dark',
};