getThemeCodeHSLV4() — ui Function Reference

Architecture documentation for the getThemeCodeHSLV4() function in theme-customizer.tsx from the ui codebase.

Function tsx Internationalization RTLLayout called by 1

Entity Profile

Internationalization→ RTLLayout→ getThemeCodeHSLV4() — ui Function Reference

Dependency Diagram

graph TD
  10972c41_4a25_67bf_3dbf_48697c857cdc["getThemeCodeHSLV4()"]
  99c48ee8_09f0_5ee4_48c9_597d941f294c["theme-customizer.tsx"]
  10972c41_4a25_67bf_3dbf_48697c857cdc -->|defined in| 99c48ee8_09f0_5ee4_48c9_597d941f294c
  58ff6be5_2050_2b1b_9268_3918ae1d2f4e["CustomizerCode()"]
  58ff6be5_2050_2b1b_9268_3918ae1d2f4e -->|calls| 10972c41_4a25_67bf_3dbf_48697c857cdc
  style 10972c41_4a25_67bf_3dbf_48697c857cdc fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/components/theme-customizer.tsx lines 673–692

function getThemeCodeHSLV4(theme: BaseColor | undefined, radius: number) {
  if (!theme) {
    return ""
  }

  const rootSection =
    ":root {\n  --radius: " +
    radius +
    "rem;\n" +
    Object.entries(theme.cssVars.light)
      .map((entry) => "  --" + entry[0] + ": hsl(" + entry[1] + ");")
      .join("\n") +
    "\n}\n\n.dark {\n" +
    Object.entries(theme.cssVars.dark)
      .map((entry) => "  --" + entry[0] + ": hsl(" + entry[1] + ");")
      .join("\n") +
    "\n}\n"

  return rootSection
}