themes_css.ts (2755B)
1 import type { ThemeId, ThemeKey, ThemeMode } from "../core/types.js"; 2 import { theme_presets } from "../presets/index.js"; 3 import type { OsThemePreset, ThemePreset } from "../presets/types.js"; 4 import { 5 collect_theme_color_entries, 6 format_hsl, 7 select_theme_presets_keys, 8 theme_modes, 9 to_css_name_suffix 10 } from "./theme_utils.js"; 11 12 export interface PluginOptions { 13 id: ThemeId; 14 prefers_dark: boolean; 15 color_scheme: ThemeMode; 16 theme: OsThemePreset; 17 } 18 19 export const build_theme_css = (options: PluginOptions): string => { 20 const lines: string[] = []; 21 lines.push('@plugin "daisyui/theme" {'); 22 lines.push(` name: "${options.id}";`); 23 lines.push(" default: false;"); 24 lines.push(` prefersdark: ${options.prefers_dark ? "true" : "false"};`); 25 lines.push(` color-scheme: ${options.color_scheme};`); 26 27 const entries = collect_theme_color_entries(options.theme); 28 29 for (const entry of entries) { 30 const layer = options.theme[entry.layer_key]; 31 const layer_prefix = `--color-${entry.layer_key}`; 32 const suffix = to_css_name_suffix(entry.token_key); 33 34 if (entry.category === "surfaces") { 35 const surfaces = layer.surfaces; 36 const color = surfaces[entry.token_key as keyof typeof surfaces]; 37 const css_var_name = `${layer_prefix}${suffix}`; 38 lines.push(` ${css_var_name}: ${format_hsl(color)};`); 39 } else { 40 const glyphs = layer.glyphs; 41 const color = glyphs[entry.token_key as keyof typeof glyphs]; 42 const css_var_name = `${layer_prefix}-gl${suffix}`; 43 lines.push(` ${css_var_name}: ${format_hsl(color)};`); 44 } 45 } 46 47 lines.push("}"); 48 lines.push(""); 49 50 return lines.join("\n"); 51 }; 52 53 const build_theme_blocks = ( 54 theme_key: ThemeKey, 55 preset: ThemePreset 56 ): string[] => { 57 const blocks: string[] = []; 58 59 for (const mode of theme_modes) { 60 const theme = preset[mode]; 61 const id: ThemeId = `${theme_key}_${mode}`; 62 const block = build_theme_css({ 63 id, 64 prefers_dark: mode === "dark", 65 color_scheme: mode, 66 theme 67 }); 68 blocks.push(block); 69 } 70 71 return blocks; 72 }; 73 74 export const build_themes_css_by_preset = ( 75 presets: string[] | undefined 76 ): Record<ThemeKey, string> => { 77 const selected_theme_keys = select_theme_presets_keys(presets); 78 const css_by_preset = {} as Record<ThemeKey, string>; 79 80 for (const theme_key of selected_theme_keys) { 81 const preset = theme_presets[theme_key]; 82 const blocks = build_theme_blocks(theme_key, preset); 83 css_by_preset[theme_key] = blocks.join("\n"); 84 } 85 86 return css_by_preset; 87 };