ThemeSelector() — ui Function Reference

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

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ ThemeSelector() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/app/(internal)/sink/components/theme-selector.tsx lines 104–147

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

  return (
    <div className={cn("flex items-center gap-2", className)}>
      <Label htmlFor="theme-selector" className="sr-only">
        Theme
      </Label>
      <Select value={activeTheme} onValueChange={setActiveTheme}>
        <SelectTrigger
          id="theme-selector"
          size="sm"
          className="bg-secondary text-secondary-foreground border-secondary justify-start shadow-none *:data-[slot=select-value]:w-16"
        >
          <SelectValue placeholder="Select" />
        </SelectTrigger>
        <SelectContent align="end">
          {Object.entries(THEMES).map(
            ([key, themes], index) =>
              themes.length > 0 && (
                <div key={key}>
                  {index > 0 && <SelectSeparator />}
                  <SelectGroup>
                    <SelectLabel>
                      {key.charAt(0).toUpperCase() + key.slice(1)}
                    </SelectLabel>
                    {themes.map((theme) => (
                      <SelectItem
                        key={theme.name}
                        value={theme.value}
                        className="data-[state=checked]:opacity-50"
                      >
                        {theme.name}
                      </SelectItem>
                    ))}
                  </SelectGroup>
                </div>
              )
          )}
        </SelectContent>
      </Select>
    </div>
  )
}