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

theme-customizer.tsx — ui Source File

Architecture documentation for theme-customizer.tsx, a tsx file in the ui codebase. 16 imports, 1 dependents.

File tsx Internationalization RTLLayout 16 imports 1 dependents 7 functions

Entity Profile

Dependency Diagram

graph LR
  99c48ee8_09f0_5ee4_48c9_597d941f294c["theme-customizer.tsx"]
  1d141819_425e_b5fd_4c8e_32f7c6a42cf2["react"]
  99c48ee8_09f0_5ee4_48c9_597d941f294c --> 1d141819_425e_b5fd_4c8e_32f7c6a42cf2
  39a0d62e_8e7d_d097_eb95_91d2bca361f7["icons-react"]
  99c48ee8_09f0_5ee4_48c9_597d941f294c --> 39a0d62e_8e7d_d097_eb95_91d2bca361f7
  5114a58f_1c1e_01f8_fc73_9dc86ff2bf5c["template"]
  99c48ee8_09f0_5ee4_48c9_597d941f294c --> 5114a58f_1c1e_01f8_fc73_9dc86ff2bf5c
  051af7df_a60b_d4df_95ed_ca045420060f["themes"]
  99c48ee8_09f0_5ee4_48c9_597d941f294c --> 051af7df_a60b_d4df_95ed_ca045420060f
  79081a1f_55a3_945a_fb8c_d53d6d3eab81["utils"]
  99c48ee8_09f0_5ee4_48c9_597d941f294c --> 79081a1f_55a3_945a_fb8c_d53d6d3eab81
  100b413d_51e5_56e4_1d60_2d6768e7fd5c["active-theme"]
  99c48ee8_09f0_5ee4_48c9_597d941f294c --> 100b413d_51e5_56e4_1d60_2d6768e7fd5c
  402113bd_a10d_0255_fccf_87fa40fd281a["copy-button"]
  99c48ee8_09f0_5ee4_48c9_597d941f294c --> 402113bd_a10d_0255_fccf_87fa40fd281a
  aae3c3f1_230a_9c11_a663_8bbc3f0ad054["icons"]
  99c48ee8_09f0_5ee4_48c9_597d941f294c --> aae3c3f1_230a_9c11_a663_8bbc3f0ad054
  84488a99_a369_d798_8d8d_936b0575aea6["_legacy-base-colors"]
  99c48ee8_09f0_5ee4_48c9_597d941f294c --> 84488a99_a369_d798_8d8d_936b0575aea6
  57e86e45_ac6e_7278_be08_9092724e8401["button"]
  99c48ee8_09f0_5ee4_48c9_597d941f294c --> 57e86e45_ac6e_7278_be08_9092724e8401
  0896a8fa_5462_a73a_5add_fb8176921778["dialog"]
  99c48ee8_09f0_5ee4_48c9_597d941f294c --> 0896a8fa_5462_a73a_5add_fb8176921778
  538a1992_2e44_c995_0fe9_493e88eb6ea5["drawer"]
  99c48ee8_09f0_5ee4_48c9_597d941f294c --> 538a1992_2e44_c995_0fe9_493e88eb6ea5
  d752035b_6ed3_c6ef_e27c_eef51af9ec8d["label"]
  99c48ee8_09f0_5ee4_48c9_597d941f294c --> d752035b_6ed3_c6ef_e27c_eef51af9ec8d
  47fa1d7a_8370_cd8e_01f5_44e7f16431cc["scroll-area"]
  99c48ee8_09f0_5ee4_48c9_597d941f294c --> 47fa1d7a_8370_cd8e_01f5_44e7f16431cc
  style 99c48ee8_09f0_5ee4_48c9_597d941f294c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

import * as React from "react"
import { IconCheck, IconCopy } from "@tabler/icons-react"
import template from "lodash/template"

import { THEMES } from "@/lib/themes"
import { cn } from "@/lib/utils"
import { useThemeConfig } from "@/components/active-theme"
import { copyToClipboardWithMeta } from "@/components/copy-button"
import { Icons } from "@/components/icons"
import {
  baseColors,
  baseColorsOKLCH,
  type BaseColor,
} from "@/registry/_legacy-base-colors"
import { Button } from "@/registry/new-york-v4/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/registry/new-york-v4/ui/dialog"
import {
  Drawer,
  DrawerContent,
  DrawerDescription,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/registry/new-york-v4/ui/drawer"
import { Label } from "@/registry/new-york-v4/ui/label"
import { ScrollArea, ScrollBar } from "@/registry/new-york-v4/ui/scroll-area"
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/registry/new-york-v4/ui/select"
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/registry/new-york-v4/ui/tabs"

interface BaseColorOKLCH {
  light: Record<string, string>
  dark: Record<string, string>
}

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

  return (
    <div className={cn("flex w-full items-center gap-2", className)}>
// ... (692 more lines)

Domain

Subdomains

Functions

Types

Dependencies

  • _legacy-base-colors
  • active-theme
  • button
  • copy-button
  • dialog
  • drawer
  • icons
  • icons-react
  • label
  • react
  • scroll-area
  • select
  • tabs
  • template
  • themes
  • utils

Imported By

Source

Frequently Asked Questions

What does theme-customizer.tsx do?
theme-customizer.tsx is a source file in the ui codebase, written in tsx. It belongs to the Internationalization domain, RTLLayout subdomain.
What functions are defined in theme-customizer.tsx?
theme-customizer.tsx defines 7 function(s): ColorIndicator, CopyCodeButton, CustomizerCode, ThemeCustomizer, getThemeCode, getThemeCodeHSLV4, getThemeCodeOKLCH.
What does theme-customizer.tsx depend on?
theme-customizer.tsx imports 16 module(s): _legacy-base-colors, active-theme, button, copy-button, dialog, drawer, icons, icons-react, and 8 more.
What files import theme-customizer.tsx?
theme-customizer.tsx is imported by 1 file(s): theme-selector.tsx.
Where is theme-customizer.tsx in the architecture?
theme-customizer.tsx is located at apps/v4/components/theme-customizer.tsx (domain: Internationalization, subdomain: RTLLayout, directory: apps/v4/components).

Analyze Your Own Codebase

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

Try Supermodel Free