updateThemePlugin() — ui Function Reference

Architecture documentation for the updateThemePlugin() function in update-css-vars.ts from the ui codebase.

Function typescript FrameworkTooling CLICore calls 3 called by 1

Entity Profile

FrameworkTooling→ CLICore→ updateThemePlugin() — ui Function Reference

Dependency Diagram

graph TD
  9e221c92_a132_552e_5f2f_e0d1591df611["updateThemePlugin()"]
  09244f5d_7fce_b385_220b_05945bb9e93b["update-css-vars.ts"]
  9e221c92_a132_552e_5f2f_e0d1591df611 -->|defined in| 09244f5d_7fce_b385_220b_05945bb9e93b
  4b9d28e9_450c_12b3_5ef0_44434fa9535b["transformCssVars()"]
  4b9d28e9_450c_12b3_5ef0_44434fa9535b -->|calls| 9e221c92_a132_552e_5f2f_e0d1591df611
  3662dc7c_005d_b2d3_9a08_eb02c2acaad8["upsertThemeNode()"]
  9e221c92_a132_552e_5f2f_e0d1591df611 -->|calls| 3662dc7c_005d_b2d3_9a08_eb02c2acaad8
  989639e5_72dc_2426_39e9_5a75ddec4756["isLocalHSLValue()"]
  9e221c92_a132_552e_5f2f_e0d1591df611 -->|calls| 989639e5_72dc_2426_39e9_5a75ddec4756
  80c1c0cd_6316_f919_46c4_1f1c0a4b93f1["isColorValue()"]
  9e221c92_a132_552e_5f2f_e0d1591df611 -->|calls| 80c1c0cd_6316_f919_46c4_1f1c0a4b93f1
  style 9e221c92_a132_552e_5f2f_e0d1591df611 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/shadcn/src/utils/updaters/update-css-vars.ts lines 498–595

function updateThemePlugin(cssVars: z.infer<typeof registryItemCssVarsSchema>) {
  return {
    postcssPlugin: "update-theme",
    Once(root: Root) {
      // Find unique color names from light and dark.
      const variables = Array.from(
        new Set(
          Object.keys(cssVars).flatMap((key) =>
            Object.keys(cssVars[key as keyof typeof cssVars] || {})
          )
        )
      )

      if (!variables.length) {
        return
      }

      const themeNode = upsertThemeNode(root)

      const themeVarNodes = themeNode.nodes?.filter(
        (node): node is postcss.Declaration =>
          node.type === "decl" && node.prop.startsWith("--")
      )

      for (const variable of variables) {
        const value = Object.values(cssVars).find((vars) => vars[variable])?.[
          variable
        ]

        if (!value) {
          continue
        }

        if (variable === "radius") {
          const radiusVariables = {
            sm: "calc(var(--radius) - 4px)",
            md: "calc(var(--radius) - 2px)",
            lg: "var(--radius)",
            xl: "calc(var(--radius) + 4px)",
            "2xl": "calc(var(--radius) + 8px)",
            "3xl": "calc(var(--radius) + 12px)",
            "4xl": "calc(var(--radius) + 16px)",
          }
          for (const [key, value] of Object.entries(radiusVariables)) {
            const cssVarNode = postcss.decl({
              prop: `--radius-${key}`,
              value,
              raws: { semicolon: true },
            })
            if (
              themeNode?.nodes?.find(
                (node): node is postcss.Declaration =>
                  node.type === "decl" && node.prop === cssVarNode.prop
              )
            ) {
              continue
            }
            themeNode?.append(cssVarNode)
          }
          continue
        }

        let prop =
          isLocalHSLValue(value) || isColorValue(value)
            ? `--color-${variable.replace(/^--/, "")}`
            : `--${variable.replace(/^--/, "")}`
        if (prop === "--color-sidebar-background") {
          prop = "--color-sidebar"
        }

        let propValue = `var(--${variable})`
        if (prop === "--color-sidebar") {
          propValue = "var(--sidebar)"
        }

        const cssVarNode = postcss.decl({
          prop,
          value: propValue,
          raws: { semicolon: true },
        })
        const existingDecl = themeNode?.nodes?.find(