[V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config: Config = { content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, }, }, plugins: [], } export default config [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { useState, useCallback, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { RefreshCw, Sun, Moon, Clipboard } from "lucide-react" type ColorScheme = Record const initialLightScheme: ColorScheme = { background: "#ffffff", foreground: "#09090b", card: "#ffffff", cardForeground: "#09090b", popover: "#ffffff", popoverForeground: "#09090b", primary: "#18181b", primaryForeground: "#fafafa", secondary: "#f4f4f5", secondaryForeground: "#18181b", muted: "#f4f4f5", mutedForeground: "#71717a", accent: "#f4f4f5", accentForeground: "#18181b", destructive: "#ef4444", destructiveForeground: "#fafafa", border: "#e4e4e7", input: "#e4e4e7", ring: "#a1a1aa", } const initialDarkScheme: ColorScheme = { background: "#09090b", foreground: "#fafafa", card: "#09090b", cardForeground: "#fafafa", popover: "#09090b", popoverForeground: "#fafafa", primary: "#fafafa", primaryForeground: "#18181b", secondary: "#27272a", secondaryForeground: "#fafafa", muted: "#27272a", mutedForeground: "#a1a1aa", accent: "#27272a", accentForeground: "#fafafa", destructive: "#7f1d1d", destructiveForeground: "#fafafa", border: "#27272a", input: "#27272a", ring: "#7f7f7f", } const colorSections = [ { name: "Base", colors: ["background", "foreground"] }, { name: "Primary", colors: ["primary", "primaryForeground"] }, { name: "Secondary", colors: ["secondary", "secondaryForeground"] }, { name: "Accent", colors: ["accent", "accentForeground"] }, { name: "Muted", colors: ["muted", "mutedForeground"] }, { name: "Card", colors: ["card", "cardForeground"] }, { name: "Popover", colors: ["popover", "popoverForeground"] }, { name: "Destructive", colors: ["destructive", "destructiveForeground"] }, { name: "Others", colors: ["border", "input", "ring"] }, ] const ColorPicker = ({ lightColor, darkColor, onLightChange, onDarkChange, label, }: { lightColor: string darkColor: string onLightChange: (color: string) => void onDarkChange: (color: string) => void label: string }) => (

{label}

onLightChange(e.target.value)} className="h-4 w-4 border border-input" />

onLightChange(e.target.value)} className="pl-10 pr-10" />

onDarkChange(e.target.value)} className="h-4 w-4 border border-input" />

onDarkChange(e.target.value)} className="pl-10 pr-10" />

) export default function Home() { const [lightScheme, setLightScheme] = useState(initialLightScheme) const [darkScheme, setDarkScheme] = useState(initialDarkScheme) const [radius, setRadius] = useState("0.5rem") const [generatedCSS, setGeneratedCSS] = useState("") useEffect(() => { const storedLightScheme = localStorage.getItem("lightScheme") const storedDarkScheme = localStorage.getItem("darkScheme") const storedRadius = localStorage.getItem("radius") if (storedLightScheme) setLightScheme(JSON.parse(storedLightScheme)) if (storedDarkScheme) setDarkScheme(JSON.parse(storedDarkScheme)) if (storedRadius) setRadius(storedRadius) }, []) useEffect(() => { localStorage.setItem("lightScheme", JSON.stringify(lightScheme)) localStorage.setItem("darkScheme", JSON.stringify(darkScheme)) localStorage.setItem("radius", radius) generateCSS() }, [lightScheme, darkScheme, radius]) const updateLightScheme = useCallback((key: string, value: string) => { setLightScheme((prev) => ({ ...prev, [key]: value })) }, []) const updateDarkScheme = useCallback((key: string, value: string) => { setDarkScheme((prev) => ({ ...prev, [key]: value })) }, []) const generateCSS = useCallback(() => { const lightCSS = Object.entries(lightScheme) .map(([key, value]) => `--${key.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${value};`) .join("\n ") const darkCSS = Object.entries(darkScheme) .map(([key, value]) => `--${key.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${value};`) .join("\n ") const css = `:root { ${lightCSS} --radius: ${radius}; } .dark { ${darkCSS} }` setGeneratedCSS(css) }, [lightScheme, darkScheme, radius]) return (

Noice Schema Generator 👌

{colorSections.map((section) => ( {section.name} ))} {colorSections.map((section) => (

{section.colors.map((key) => ( updateLightScheme(key, color)} onDarkChange={(color) => updateDarkScheme(key, color)} label={key.replace(/([A-Z])/g, " $1").toLowerCase()} /> ))}

))}

Border Radius setRadius(e.target.value)} className="w-40" />

Generated CSS

            {generatedCSS}

) }

About

Tags

Share

More from beakman

More Templates Like This

About

Tags

Share

About

Tags

Share

More from beakman

More Templates Like This