91:I[903690,["/chat-static/_next/static/chunks/19ru4sx2xipbx.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/0c34czz85xh3f.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/3ot6wcd5ecpln.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/1c4pf12npy4a_.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/0l5nai4znivqy.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/3abf52lxefhni.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/0zgz5up_moiwf.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/3u5f5fge21f5p.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/2cbmnugpvavl4.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/0_nok25qs0eix.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/09z6ri07r3sma.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/420uifudym9av.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/3xq43ir2t7902.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/3z-fk_6xzfhai.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/0-9zq73z_eohn.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/1axcumexuksf-.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/2iwiq6nmum4w5.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/3eqa6zdyi0ea7.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/15ymjgsba8m5y.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/392jkop5s_22u.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/0n-x3aspzp3e2.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/1_kx0_cln4rnk.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/0o-tlt78ggel0.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/3fqvzp2yqv6c9.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/001c2fksllqct.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/3pwc98sa29io0.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6"],"ExplicitChatIdProvider"] 92:I[838238,["/chat-static/_next/static/chunks/19ru4sx2xipbx.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/0c34czz85xh3f.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/3ot6wcd5ecpln.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/1c4pf12npy4a_.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/0l5nai4znivqy.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/3abf52lxefhni.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/0zgz5up_moiwf.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/3u5f5fge21f5p.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/2cbmnugpvavl4.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/0_nok25qs0eix.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/09z6ri07r3sma.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/420uifudym9av.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/3xq43ir2t7902.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/3z-fk_6xzfhai.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/0-9zq73z_eohn.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/1axcumexuksf-.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/2iwiq6nmum4w5.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/3eqa6zdyi0ea7.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/15ymjgsba8m5y.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/392jkop5s_22u.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/0n-x3aspzp3e2.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/1_kx0_cln4rnk.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/0o-tlt78ggel0.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/3fqvzp2yqv6c9.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/001c2fksllqct.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/3pwc98sa29io0.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6"],"SWRDataProvider"] 93:T2669,[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}

) } 89:["$","$L91",null,{"chatId":"smyODRaXmF3","children":["$","$L92",null,{"data":{"@\"active-block\",\"smyODRaXmF3\",":{"id":"b_pa0qoxwNG52","messageId":"R3b9Ordojg0qBXXZBqxyR9yR277EI3hJ","source":"$93","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"css-variable-generator","type":"code-project","project":"css-variable-generator"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"smyODRaXmF3\",":false,"":null},"children":"$L94"}]}]

About

Tags

Share

About

Tags

Share

More from beakman

More Templates Like This