mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-16 00:59:40 +02:00
05d074c57e
Migrate figgos from single Expo app to multi-app monorepo structure: - Move mobile app to apps/mobile/ - Add apps/web/ (SvelteKit) and apps/backend/ (NestJS) scaffolds - Add packages/shared/ for shared types and constants - Update root package.json with new dev commands - Temporarily skip type-check (run pnpm install first) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
150 lines
3.1 KiB
TypeScript
150 lines
3.1 KiB
TypeScript
// Theme definitions for the WTFigure app
|
|
// Each theme has a light and dark variant
|
|
|
|
export type ThemeColors = {
|
|
// Base colors
|
|
background: string;
|
|
text: string;
|
|
primary: string;
|
|
secondary: string;
|
|
accent: string;
|
|
|
|
// UI elements
|
|
card: string;
|
|
border: string;
|
|
input: string;
|
|
inputActive: string;
|
|
|
|
// Status colors
|
|
success: string;
|
|
warning: string;
|
|
error: string;
|
|
};
|
|
|
|
export type ThemeVariant = 'light' | 'dark';
|
|
export type ThemeName = 'default' | 'pastel' | 'vibrant';
|
|
export type ThemeMode = 'system' | 'light' | 'dark';
|
|
|
|
export type Theme = {
|
|
name: ThemeName;
|
|
variant: ThemeVariant;
|
|
colors: ThemeColors;
|
|
};
|
|
|
|
// Default theme
|
|
const defaultLightTheme: ThemeColors = {
|
|
background: '#ffffff',
|
|
text: '#333333',
|
|
primary: '#ff69b4', // Pink
|
|
secondary: '#87ceeb', // Sky blue
|
|
accent: '#ffb6c1', // Light pink
|
|
card: '#f8f8f8',
|
|
border: '#e0e0e0',
|
|
input: '#f5f5f5',
|
|
inputActive: '#ffffff',
|
|
success: '#4caf50',
|
|
warning: '#ff9800',
|
|
error: '#f44336',
|
|
};
|
|
|
|
const defaultDarkTheme: ThemeColors = {
|
|
background: '#121212',
|
|
text: '#f5f5f5',
|
|
primary: '#ff69b4', // Pink
|
|
secondary: '#4a90e2', // Blue
|
|
accent: '#d81b60', // Deep pink
|
|
card: '#1e1e1e',
|
|
border: '#333333',
|
|
input: '#2c2c2c',
|
|
inputActive: '#3a3a3a',
|
|
success: '#4caf50',
|
|
warning: '#ff9800',
|
|
error: '#f44336',
|
|
};
|
|
|
|
// Pastel theme
|
|
const pastelLightTheme: ThemeColors = {
|
|
background: '#f8f5f2',
|
|
text: '#5d534f',
|
|
primary: '#d4a5a5', // Pastel pink
|
|
secondary: '#a5c0d4', // Pastel blue
|
|
accent: '#a5d4a5', // Pastel green
|
|
card: '#ffffff',
|
|
border: '#e8e0d8',
|
|
input: '#f0ebe6',
|
|
inputActive: '#ffffff',
|
|
success: '#a5d4a5',
|
|
warning: '#d4c7a5',
|
|
error: '#d4a5a5',
|
|
};
|
|
|
|
const pastelDarkTheme: ThemeColors = {
|
|
background: '#2d2a2e',
|
|
text: '#e8e0d8',
|
|
primary: '#c9a0a0', // Dark pastel pink
|
|
secondary: '#a0b8c9', // Dark pastel blue
|
|
accent: '#a0c9a0', // Dark pastel green
|
|
card: '#3a3639',
|
|
border: '#4a464a',
|
|
input: '#3a3639',
|
|
inputActive: '#4a4649',
|
|
success: '#a0c9a0',
|
|
warning: '#c9bda0',
|
|
error: '#c9a0a0',
|
|
};
|
|
|
|
// Vibrant theme
|
|
const vibrantLightTheme: ThemeColors = {
|
|
background: '#ffffff',
|
|
text: '#1a1a1a',
|
|
primary: '#ff1493', // Deep pink
|
|
secondary: '#00bfff', // Deep sky blue
|
|
accent: '#32cd32', // Lime green
|
|
card: '#f0f0f0',
|
|
border: '#d0d0d0',
|
|
input: '#f8f8f8',
|
|
inputActive: '#ffffff',
|
|
success: '#00cc44',
|
|
warning: '#ffcc00',
|
|
error: '#ff3333',
|
|
};
|
|
|
|
const vibrantDarkTheme: ThemeColors = {
|
|
background: '#0a0a0a',
|
|
text: '#ffffff',
|
|
primary: '#ff1493', // Deep pink
|
|
secondary: '#00bfff', // Deep sky blue
|
|
accent: '#32cd32', // Lime green
|
|
card: '#1a1a1a',
|
|
border: '#2a2a2a',
|
|
input: '#1f1f1f',
|
|
inputActive: '#2a2a2a',
|
|
success: '#00cc44',
|
|
warning: '#ffcc00',
|
|
error: '#ff3333',
|
|
};
|
|
|
|
// Theme collections
|
|
export const themes: Record<ThemeName, Record<ThemeVariant, ThemeColors>> = {
|
|
default: {
|
|
light: defaultLightTheme,
|
|
dark: defaultDarkTheme,
|
|
},
|
|
pastel: {
|
|
light: pastelLightTheme,
|
|
dark: pastelDarkTheme,
|
|
},
|
|
vibrant: {
|
|
light: vibrantLightTheme,
|
|
dark: vibrantDarkTheme,
|
|
},
|
|
};
|
|
|
|
// Helper function to get a theme
|
|
export function getTheme(name: ThemeName, variant: ThemeVariant): Theme {
|
|
return {
|
|
name,
|
|
variant,
|
|
colors: themes[name][variant],
|
|
};
|
|
}
|