ui Architecture Docs
Home / File/ theme-selector.tsx — ui Source File

theme-selector.tsx — ui Source File

Architecture documentation for theme-selector.tsx, a tsx file in the ui codebase. 3 imports, 0 dependents.

File tsx DocumentationAtlas SearchAPI 3 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  f0500d9b_68f9_5845_60ce_ce101876ad90["theme-selector.tsx"]
  100b413d_51e5_56e4_1d60_2d6768e7fd5c["active-theme"]
  f0500d9b_68f9_5845_60ce_ce101876ad90 --> 100b413d_51e5_56e4_1d60_2d6768e7fd5c
  d752035b_6ed3_c6ef_e27c_eef51af9ec8d["label"]
  f0500d9b_68f9_5845_60ce_ce101876ad90 --> d752035b_6ed3_c6ef_e27c_eef51af9ec8d
  c2fa7225_1ddd_1cbc_8810_ee5e42af14d6["select"]
  f0500d9b_68f9_5845_60ce_ce101876ad90 --> c2fa7225_1ddd_1cbc_8810_ee5e42af14d6
  style f0500d9b_68f9_5845_60ce_ce101876ad90 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

import { useThemeConfig } from "@/components/active-theme"
import { Label } from "@/registry/new-york-v4/ui/label"
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
} from "@/registry/new-york-v4/ui/select"

const DEFAULT_THEMES = [
  {
    name: "Default",
    value: "default",
  },
  {
    name: "Blue",
    value: "blue",
  },
  {
    name: "Green",
    value: "green",
  },
  {
    name: "Amber",
    value: "amber",
  },
]

const SCALED_THEMES = [
  {
    name: "Default",
    value: "default-scaled",
  },
  {
    name: "Blue",
    value: "blue-scaled",
  },
]

const MONO_THEMES = [
  {
    name: "Mono",
    value: "mono-scaled",
  },
]

export function ThemeSelector() {
  const { activeTheme, setActiveTheme } = useThemeConfig()

  return (
    <div className="flex items-center gap-2">
      <Label htmlFor="theme-selector" className="sr-only">
        Theme
      </Label>
      <Select value={activeTheme} onValueChange={setActiveTheme}>
        <SelectTrigger
          id="theme-selector"
          size="sm"
          className="justify-start *:data-[slot=select-value]:w-12"
        >
          <span className="text-muted-foreground hidden sm:block">
            Select a theme:
          </span>
          <span className="text-muted-foreground block sm:hidden">Theme</span>
          <SelectValue placeholder="Select a theme" />
        </SelectTrigger>
        <SelectContent align="end">
          <SelectGroup>
            <SelectLabel>Default</SelectLabel>
            {DEFAULT_THEMES.map((theme) => (
              <SelectItem key={theme.name} value={theme.value}>
                {theme.name}
              </SelectItem>
            ))}
          </SelectGroup>
          <SelectSeparator />
          <SelectGroup>
            <SelectLabel>Scaled</SelectLabel>
            {SCALED_THEMES.map((theme) => (
              <SelectItem key={theme.name} value={theme.value}>
                {theme.name}
              </SelectItem>
            ))}
          </SelectGroup>
          <SelectGroup>
            <SelectLabel>Monospaced</SelectLabel>
            {MONO_THEMES.map((theme) => (
              <SelectItem key={theme.name} value={theme.value}>
                {theme.name}
              </SelectItem>
            ))}
          </SelectGroup>
        </SelectContent>
      </Select>
    </div>
  )
}

Domain

Subdomains

Functions

Dependencies

  • active-theme
  • label
  • select

Source

Frequently Asked Questions

What does theme-selector.tsx do?
theme-selector.tsx is a source file in the ui codebase, written in tsx. It belongs to the DocumentationAtlas domain, SearchAPI subdomain.
What functions are defined in theme-selector.tsx?
theme-selector.tsx defines 1 function(s): ThemeSelector.
What does theme-selector.tsx depend on?
theme-selector.tsx imports 3 module(s): active-theme, label, select.
Where is theme-selector.tsx in the architecture?
theme-selector.tsx is located at apps/v4/app/(examples)/dashboard/components/theme-selector.tsx (domain: DocumentationAtlas, subdomain: SearchAPI, directory: apps/v4/app/(examples)/dashboard/components).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free