160 lines
7.6 KiB
TypeScript
160 lines
7.6 KiB
TypeScript
export interface ThemeColors {
|
|
// Sidebar specific
|
|
sidebar?: string; // --sidebar
|
|
sidebarBackground?: string; // --sidebar-background
|
|
sidebarForeground?: string; // --sidebar-foreground
|
|
sidebarPrimary?: string; // --sidebar-primary
|
|
sidebarPrimaryForeground?: string; // --sidebar-primary-foreground
|
|
sidebarAccent?: string; // --sidebar-accent
|
|
sidebarAccentForeground?: string; // --sidebar-accent-foreground
|
|
sidebarBorder?: string; // --sidebar-border
|
|
sidebarRing?: string; // --sidebar-ring
|
|
|
|
// General theme colors
|
|
background?: string; // --background
|
|
foreground?: string; // --foreground
|
|
|
|
muted?: string; // --muted
|
|
mutedForeground?: string; // --muted-foreground
|
|
|
|
popover?: string; // --popover
|
|
popoverForeground?: string; // --popover-foreground
|
|
|
|
card?: string; // --card
|
|
cardForeground?: string; // --card-foreground
|
|
|
|
border?: string; // --border
|
|
input?: string; // --input
|
|
|
|
primary?: string; // --primary
|
|
primaryForeground?: string; // --primary-foreground
|
|
|
|
secondary?: string; // --secondary
|
|
secondaryForeground?: string; // --secondary-foreground
|
|
|
|
accent?: string; // --accent
|
|
accentForeground?: string; // --accent-foreground
|
|
|
|
destructive?: string; // --destructive
|
|
destructiveForeground?: string; // --destructive-foreground
|
|
|
|
ring?: string; // --ring
|
|
}
|
|
|
|
export interface ThemeConfig {
|
|
// Sidebar settings
|
|
sidebarVariant?: "inset" | "sidebar";
|
|
sidebarDarkMode?: boolean; // Force dark mode for sidebar even in light theme
|
|
|
|
// Theme colors (CSS variables)
|
|
colors?: ThemeColors;
|
|
|
|
// Dark mode colors (CSS variables)
|
|
darkColors?: ThemeColors;
|
|
|
|
// Other theme settings
|
|
radius?: string; // Border radius (e.g., "0.5rem")
|
|
fontFamily?: string; // Font family (e.g., "ui-sans-serif, system-ui, -apple-system...")
|
|
}
|
|
|
|
export const defaultThemeConfig: ThemeConfig = {
|
|
sidebarVariant: "inset",
|
|
sidebarDarkMode: false,
|
|
colors: {},
|
|
radius: "0.5rem",
|
|
};
|
|
|
|
export function parseThemeConfig(config: string | null | undefined): ThemeConfig {
|
|
if (!config) return defaultThemeConfig;
|
|
try {
|
|
return JSON.parse(config) as ThemeConfig;
|
|
} catch {
|
|
return defaultThemeConfig;
|
|
}
|
|
}
|
|
|
|
export function stringifyThemeConfig(config: ThemeConfig): string {
|
|
return JSON.stringify(config);
|
|
}
|
|
|
|
export function getThemeStyle({ themeConfig, isDarkMode }: { themeConfig: ThemeConfig; isDarkMode: boolean }): Record<string, string> {
|
|
// Prepare style object with theme CSS variables
|
|
const themeStyle: Record<string, string> = {};
|
|
|
|
// Apply light mode colors
|
|
if (themeConfig?.colors) {
|
|
const colors = themeConfig.colors;
|
|
// General theme colors
|
|
if (colors.background) themeStyle["--background"] = colors.background;
|
|
if (colors.foreground) themeStyle["--foreground"] = colors.foreground;
|
|
if (colors.muted) themeStyle["--muted"] = colors.muted;
|
|
if (colors.mutedForeground) themeStyle["--muted-foreground"] = colors.mutedForeground;
|
|
if (colors.popover) themeStyle["--popover"] = colors.popover;
|
|
if (colors.popoverForeground) themeStyle["--popover-foreground"] = colors.popoverForeground;
|
|
if (colors.card) themeStyle["--card"] = colors.card;
|
|
if (colors.cardForeground) themeStyle["--card-foreground"] = colors.cardForeground;
|
|
if (colors.border) themeStyle["--border"] = colors.border;
|
|
if (colors.input) themeStyle["--input"] = colors.input;
|
|
if (colors.primary) themeStyle["--primary"] = colors.primary;
|
|
if (colors.primaryForeground) themeStyle["--primary-foreground"] = colors.primaryForeground;
|
|
if (colors.secondary) themeStyle["--secondary"] = colors.secondary;
|
|
if (colors.secondaryForeground) themeStyle["--secondary-foreground"] = colors.secondaryForeground;
|
|
if (colors.accent) themeStyle["--accent"] = colors.accent;
|
|
if (colors.accentForeground) themeStyle["--accent-foreground"] = colors.accentForeground;
|
|
if (colors.destructive) themeStyle["--destructive"] = colors.destructive;
|
|
if (colors.destructiveForeground) themeStyle["--destructive-foreground"] = colors.destructiveForeground;
|
|
if (colors.ring) themeStyle["--ring"] = colors.ring;
|
|
|
|
// Sidebar colors (applied at root level for global access)
|
|
if (colors.sidebar) themeStyle["--sidebar"] = colors.sidebar;
|
|
if (colors.sidebarBackground) themeStyle["--sidebar-background"] = colors.sidebarBackground;
|
|
if (colors.sidebarForeground) themeStyle["--sidebar-foreground"] = colors.sidebarForeground;
|
|
if (colors.sidebarPrimary) themeStyle["--sidebar-primary"] = colors.sidebarPrimary;
|
|
if (colors.sidebarPrimaryForeground) themeStyle["--sidebar-primary-foreground"] = colors.sidebarPrimaryForeground;
|
|
if (colors.sidebarAccent) themeStyle["--sidebar-accent"] = colors.sidebarAccent;
|
|
if (colors.sidebarAccentForeground) themeStyle["--sidebar-accent-foreground"] = colors.sidebarAccentForeground;
|
|
if (colors.sidebarBorder) themeStyle["--sidebar-border"] = colors.sidebarBorder;
|
|
if (colors.sidebarRing) themeStyle["--sidebar-ring"] = colors.sidebarRing;
|
|
}
|
|
if (themeConfig?.radius) {
|
|
themeStyle["--radius"] = themeConfig.radius;
|
|
}
|
|
if (themeConfig?.fontFamily) {
|
|
themeStyle["font-family"] = themeConfig.fontFamily;
|
|
}
|
|
|
|
if (isDarkMode && themeConfig?.darkColors) {
|
|
const darkColors = themeConfig.darkColors;
|
|
|
|
if (darkColors.background) themeStyle["--background"] = darkColors.background;
|
|
if (darkColors.foreground) themeStyle["--foreground"] = darkColors.foreground;
|
|
if (darkColors.muted) themeStyle["--muted"] = darkColors.muted;
|
|
if (darkColors.mutedForeground) themeStyle["--muted-foreground"] = darkColors.mutedForeground;
|
|
if (darkColors.popover) themeStyle["--popover"] = darkColors.popover;
|
|
if (darkColors.popoverForeground) themeStyle["--popover-foreground"] = darkColors.popoverForeground;
|
|
if (darkColors.card) themeStyle["--card"] = darkColors.card;
|
|
if (darkColors.cardForeground) themeStyle["--card-foreground"] = darkColors.cardForeground;
|
|
if (darkColors.border) themeStyle["--border"] = darkColors.border;
|
|
if (darkColors.input) themeStyle["--input"] = darkColors.input;
|
|
if (darkColors.primary) themeStyle["--primary"] = darkColors.primary;
|
|
if (darkColors.primaryForeground) themeStyle["--primary-foreground"] = darkColors.primaryForeground;
|
|
if (darkColors.secondary) themeStyle["--secondary"] = darkColors.secondary;
|
|
if (darkColors.secondaryForeground) themeStyle["--secondary-foreground"] = darkColors.secondaryForeground;
|
|
if (darkColors.accent) themeStyle["--accent"] = darkColors.accent;
|
|
if (darkColors.accentForeground) themeStyle["--accent-foreground"] = darkColors.accentForeground;
|
|
if (darkColors.destructive) themeStyle["--destructive"] = darkColors.destructive;
|
|
if (darkColors.destructiveForeground) themeStyle["--destructive-foreground"] = darkColors.destructiveForeground;
|
|
if (darkColors.ring) themeStyle["--ring"] = darkColors.ring;
|
|
if (darkColors.sidebar) themeStyle["--sidebar"] = darkColors.sidebar;
|
|
if (darkColors.sidebarBackground) themeStyle["--sidebar-background"] = darkColors.sidebarBackground;
|
|
if (darkColors.sidebarForeground) themeStyle["--sidebar-foreground"] = darkColors.sidebarForeground;
|
|
if (darkColors.sidebarPrimary) themeStyle["--sidebar-primary"] = darkColors.sidebarPrimary;
|
|
if (darkColors.sidebarPrimaryForeground) themeStyle["--sidebar-primary-foreground"] = darkColors.sidebarPrimaryForeground;
|
|
if (darkColors.sidebarAccent) themeStyle["--sidebar-accent"] = darkColors.sidebarAccent;
|
|
if (darkColors.sidebarAccentForeground) themeStyle["--sidebar-accent-foreground"] = darkColors.sidebarAccentForeground;
|
|
if (darkColors.sidebarBorder) themeStyle["--sidebar-border"] = darkColors.sidebarBorder;
|
|
if (darkColors.sidebarRing) themeStyle["--sidebar-ring"] = darkColors.sidebarRing;
|
|
}
|
|
return themeStyle;
|
|
}
|