buildTheme() — ui Function Reference

Architecture documentation for the buildTheme() function in merge-theme.ts from the ui codebase.

Function typescript DesignEngine StateManagement

Entity Profile

DesignEngine→ StateManagement→ buildTheme() — ui Function Reference

Dependency Diagram

graph TD
  c9736f47_14a3_13c9_94b2_b3f20c1ce625["buildTheme()"]
  12447887_bd7b_5eba_2717_085623b94c4c["merge-theme.ts"]
  c9736f47_14a3_13c9_94b2_b3f20c1ce625 -->|defined in| 12447887_bd7b_5eba_2717_085623b94c4c
  style c9736f47_14a3_13c9_94b2_b3f20c1ce625 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(create)/lib/merge-theme.ts lines 5–32

export function buildTheme(baseColorName: string, themeName: string) {
  const baseColor = BASE_COLORS.find((c) => c.name === baseColorName)
  const theme = THEMES.find((t) => t.name === themeName)

  if (!baseColor || !theme) {
    throw new Error(
      `Base color "${baseColorName}" or theme "${themeName}" not found`
    )
  }

  const mergedTheme: RegistryItem = {
    name: `${baseColor.name}-${theme.name}`,
    title: `${baseColor.title} ${theme.title}`,
    type: "registry:theme",
    cssVars: {
      light: {
        ...baseColor.cssVars?.light,
        ...theme.cssVars?.light,
      },
      dark: {
        ...baseColor.cssVars?.dark,
        ...theme.cssVars?.dark,
      },
    },
  }

  return registryItemSchema.parse(mergedTheme)
}