41 lines
1.5 KiB
TypeScript
41 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect, useCallback } from "react";
|
|
|
|
export type ColorTheme = "purple" | "blue" | "green" | "orange" | "pink" | "cyan";
|
|
|
|
export const COLOR_THEME_STORAGE_KEY = "v5-color-theme";
|
|
export const DEFAULT_COLOR_THEME: ColorTheme = "purple";
|
|
|
|
export const COLOR_THEMES: { id: ColorTheme; label: string; light: string; dark: string }[] = [
|
|
{ id: "purple", label: "보라", light: "#6c5ce7", dark: "#a29bfe" },
|
|
{ id: "blue", label: "블루", light: "#3b82f6", dark: "#93c5fd" },
|
|
{ id: "green", label: "그린", light: "#10b981", dark: "#6ee7b7" },
|
|
{ id: "orange", label: "오렌지", light: "#f97316", dark: "#fdba74" },
|
|
{ id: "pink", label: "핑크", light: "#ec4899", dark: "#f472b6" },
|
|
{ id: "cyan", label: "시안", light: "#0891b2", dark: "#7dd3fc" },
|
|
];
|
|
|
|
export function useColorTheme() {
|
|
const [color, setColorState] = useState<ColorTheme>(DEFAULT_COLOR_THEME);
|
|
|
|
useEffect(() => {
|
|
const current = (document.documentElement.getAttribute("data-color") as ColorTheme) || DEFAULT_COLOR_THEME;
|
|
setColorState(current);
|
|
}, []);
|
|
|
|
const setColor = useCallback((next: ColorTheme) => {
|
|
if (next === DEFAULT_COLOR_THEME) {
|
|
document.documentElement.removeAttribute("data-color");
|
|
} else {
|
|
document.documentElement.setAttribute("data-color", next);
|
|
}
|
|
try {
|
|
localStorage.setItem(COLOR_THEME_STORAGE_KEY, next);
|
|
} catch {}
|
|
setColorState(next);
|
|
}, []);
|
|
|
|
return { color, setColor };
|
|
}
|