registryGetTheme() — ui Function Reference

Architecture documentation for the registryGetTheme() function in resolver.ts from the ui codebase.

Function typescript FrameworkTooling SchemaValidation called by 1

Entity Profile

FrameworkTooling→ SchemaValidation→ registryGetTheme() — ui Function Reference

Dependency Diagram

graph TD
  90671d4d_bf58_54b1_e3f7_4070e03faa12["registryGetTheme()"]
  c819bacb_5122_731b_64d6_d23131b1f806["resolver.ts"]
  90671d4d_bf58_54b1_e3f7_4070e03faa12 -->|defined in| c819bacb_5122_731b_64d6_d23131b1f806
  e645527e_af9e_1457_dc85_48f0a4c79a9a["resolveRegistryTree()"]
  e645527e_af9e_1457_dc85_48f0a4c79a9a -->|calls| 90671d4d_bf58_54b1_e3f7_4070e03faa12
  style 90671d4d_bf58_54b1_e3f7_4070e03faa12 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/shadcn/src/registry/resolver.ts lines 502–576

async function registryGetTheme(name: string, config: Config) {
  const [baseColor, tailwindVersion] = await Promise.all([
    getRegistryBaseColor(name),
    getProjectTailwindVersionFromConfig(config),
  ])
  if (!baseColor) {
    return null
  }

  // TODO: Move this to the registry i.e registry:theme.
  const theme = {
    name,
    type: "registry:theme",
    tailwind: {
      config: {
        theme: {
          extend: {
            borderRadius: {
              lg: "var(--radius)",
              md: "calc(var(--radius) - 2px)",
              sm: "calc(var(--radius) - 4px)",
            },
            colors: {},
          },
        },
      },
    },
    cssVars: {
      theme: {},
      light: {
        radius: "0.5rem",
      },
      dark: {},
    },
  } satisfies z.infer<typeof registryItemSchema>

  if (config.tailwind.cssVariables) {
    theme.tailwind.config.theme.extend.colors = {
      ...theme.tailwind.config.theme.extend.colors,
      ...buildTailwindThemeColorsFromCssVars(baseColor.cssVars.dark ?? {}),
    }
    theme.cssVars = {
      theme: {
        ...baseColor.cssVars.theme,
        ...theme.cssVars.theme,
      },
      light: {
        ...baseColor.cssVars.light,
        ...theme.cssVars.light,
      },
      dark: {
        ...baseColor.cssVars.dark,
        ...theme.cssVars.dark,
      },
    }

    if (tailwindVersion === "v4" && baseColor.cssVarsV4) {
      theme.cssVars = {
        theme: {
          ...baseColor.cssVarsV4.theme,
          ...theme.cssVars.theme,
        },
        light: {
          radius: "0.625rem",
          ...baseColor.cssVarsV4.light,
        },
        dark: {
          ...baseColor.cssVarsV4.dark,
        },
      }
    }
  }

  return theme
}