ThemeCustomizer() — ui Function Reference

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

Function tsx Internationalization RTLLayout

Entity Profile

Internationalization→ RTLLayout→ ThemeCustomizer() — ui Function Reference

Dependency Diagram

graph TD
  522052ac_29d4_6579_08e9_54a5db9235ed["ThemeCustomizer()"]
  99c48ee8_09f0_5ee4_48c9_597d941f294c["theme-customizer.tsx"]
  522052ac_29d4_6579_08e9_54a5db9235ed -->|defined in| 99c48ee8_09f0_5ee4_48c9_597d941f294c
  style 522052ac_29d4_6579_08e9_54a5db9235ed fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/components/theme-customizer.tsx lines 56–112

export function ThemeCustomizer({ className }: React.ComponentProps<"div">) {
  const { activeTheme = "neutral", setActiveTheme } = useThemeConfig()

  return (
    <div className={cn("flex w-full items-center gap-2", className)}>
      <ScrollArea className="hidden max-w-[96%] md:max-w-[600px] lg:flex lg:max-w-none">
        <div className="flex items-center">
          {THEMES.map((theme) => (
            <Button
              key={theme.name}
              variant="link"
              size="sm"
              data-active={activeTheme === theme.name}
              className="text-muted-foreground hover:text-primary data-[active=true]:text-primary flex h-7 cursor-pointer items-center justify-center px-4 text-center text-base font-medium capitalize transition-colors hover:no-underline"
              onClick={() => setActiveTheme(theme.name)}
            >
              {theme.name === "neutral" ? "Default" : theme.name}
            </Button>
          ))}
        </div>
        <ScrollBar orientation="horizontal" className="invisible" />
      </ScrollArea>
      <div className="flex items-center gap-2 lg:hidden">
        <Label htmlFor="theme-selector" className="sr-only">
          Theme
        </Label>
        <Select
          value={activeTheme === "default" ? "neutral" : activeTheme}
          onValueChange={setActiveTheme}
        >
          <SelectTrigger
            id="theme-selector"
            size="sm"
            className="justify-start capitalize shadow-none *:data-[slot=select-value]:w-12 *:data-[slot=select-value]:capitalize"
          >
            <span className="font-medium">Theme:</span>
            <SelectValue placeholder="Select a theme" />
          </SelectTrigger>
          <SelectContent align="end">
            <SelectGroup>
              {THEMES.map((theme) => (
                <SelectItem
                  key={theme.name}
                  value={theme.name}
                  className="capitalize data-[state=checked]:opacity-50"
                >
                  {theme.name}
                </SelectItem>
              ))}
            </SelectGroup>
          </SelectContent>
        </Select>
      </div>
      <CopyCodeButton variant="secondary" size="sm" className="ml-auto" />
    </div>
  )
}