ThemeSelector() — ui Function Reference

Architecture documentation for the ThemeSelector() function in theme-selector.tsx from the ui codebase.

Function tsx Internationalization RTLLayout

Entity Profile

Internationalization→ RTLLayout→ ThemeSelector() — ui Function Reference

Dependency Diagram

graph TD
  9ab73020_ac2a_11cc_8cf4_8b354ea6e232["ThemeSelector()"]
  f19a4ce1_eb06_8b0a_2bc4_7548c2e53c57["theme-selector.tsx"]
  9ab73020_ac2a_11cc_8cf4_8b354ea6e232 -->|defined in| f19a4ce1_eb06_8b0a_2bc4_7548c2e53c57
  style 9ab73020_ac2a_11cc_8cf4_8b354ea6e232 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/components/theme-selector.tsx lines 20–65

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

  const value = activeTheme === "default" ? "neutral" : activeTheme

  const items = THEMES.map((theme) => ({
    label: theme.label,
    value: theme.name,
  }))

  return (
    <div className={cn("flex items-center gap-2", className)}>
      <Label htmlFor="theme-selector" className="sr-only">
        Theme
      </Label>
      <Select
        items={items}
        value={value}
        onValueChange={(value) => value && setActiveTheme(value)}
      >
        <SelectTrigger id="theme-selector" className="w-36">
          <SelectValue placeholder="Select a theme" />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            <SelectLabel>Theme</SelectLabel>
            {items.map((item) => (
              <SelectItem
                key={item.value}
                value={item.value}
                className="data-[state=checked]:opacity-50"
              >
                {item.label}
              </SelectItem>
            ))}
          </SelectGroup>
        </SelectContent>
      </Select>
      <CopyCodeButton
        variant="secondary"
        size="icon-sm"
        className="rounded-lg border bg-transparent"
      />
    </div>
  )
}