Theme Generator

1export interface ThemeColors {
2  primary: string;
3  primaryForeground: string;
4  background: string;
5  foreground: string;
6  card: string;
7  cardForeground: string;
8  popover: string;
9  popoverForeground: string;
10  secondary: string;
11  secondaryForeground: string;
12  muted: string;
13  mutedForeground: string;
14  accent: string;
15  accentForeground: string;
16  destructive: string;
17  destructiveForeground: string;
18  border: string;
19  input: string;
20  ring: string;
21  radius?: string;
22  // Glass effect variables
23  glassBg?: string;
24  glassBorder?: string;
25  glassShadow?: string;
26  glassShadowLg?: string;
27  glassShadowSm?: string;
28  blur?: string;
29  blurSm?: string;
30  blurLg?: string;
31  // Dark mode glass variables
32  darkGlassBg?: string;
33  darkGlassBorder?: string;
34  darkGlassShadow?: string;
35  darkGlassShadowLg?: string;
36  darkGlassShadowSm?: string;
37}
38 
39export function generateThemeCSS(colors: ThemeColors, darkColors?: Partial<ThemeColors>): string {
40  const lightTheme = `:root {
41  --radius: ${colors.radius || "0.625rem"};
42  --primary: ${colors.primary};
43  --primary-foreground: ${colors.primaryForeground};
44  --background: ${colors.background};
45  --foreground: ${colors.foreground};
46  --card: ${colors.card};
47  --card-foreground: ${colors.cardForeground};
48  --popover: ${colors.popover};
49  --popover-foreground: ${colors.popoverForeground};
50  --secondary: ${colors.secondary};
51  --secondary-foreground: ${colors.secondaryForeground};
52  --muted: ${colors.muted};
53  --muted-foreground: ${colors.mutedForeground};
54  --accent: ${colors.accent};
55  --accent-foreground: ${colors.accentForeground};
56  --destructive: ${colors.destructive};
57  --destructive-foreground: ${colors.destructiveForeground};
58  --border: ${colors.border};
59  --input: ${colors.input};
60  --ring: ${colors.ring};
61  
62  /* Glass effect variables - Enhanced with gradient tint and border glow */
63  --glass-bg: ${colors.glassBg || "linear-gradient(in oklch, 135deg, oklch(100.000% 0.000000 0.000000 / 0.400000) 0%, oklch(100.000% 0.000000 0.000000 / 0.250000) 50%, oklch(97.6470% 0.010680 245.000000 / 0.300000) 100%)"};
64  --glass-border: ${colors.glassBorder || "oklch(100.000% 0.000000 0.000000 / 0.300000)"};
65  --glass-shadow: ${colors.glassShadow || "0 8px 32px oklch(0.000000% 0.000000 0.000000 / 0.120000), 0 2px 8px oklch(0.000000% 0.000000 0.000000 / 0.080000), 0 0 0 1px oklch(100.000% 0.000000 0.000000 / 0.100000) inset, 0 0 20px oklch(100.000% 0.000000 0.000000 / 0.050000)"};
66// … truncated