caadiq
91d751fc93
- ThemeContext.jsx: 테마 상태 관리, localStorage 저장, 시스템 테마 감지 - index.css: CSS 변수 시스템 (다크/라이트 테마 색상) - tailwind.config.js: darkMode: 'class' 설정 - App.jsx: ThemeProvider 래핑 - Sidebar.jsx: 테마 토글 버튼 (시스템/다크/라이트 순환) 아직 페이지 컴포넌트의 하드코딩 색상 수정 필요
87 lines
3 KiB
JavaScript
87 lines
3 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
|
darkMode: "class", // 클래스 기반 다크 모드
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ["Pretendard", "Inter", "sans-serif"],
|
|
},
|
|
colors: {
|
|
mc: {
|
|
// 기존 다크 테마에서 약간 밝게 조정
|
|
bg: "#141414",
|
|
card: "#1c1c1c",
|
|
green: {
|
|
DEFAULT: "#4ade80",
|
|
hover: "#22c55e",
|
|
dark: "#166534",
|
|
light: "#22c55e20",
|
|
},
|
|
emerald: "#10b981",
|
|
diamond: "#22d3ee",
|
|
gold: "#fbbf24",
|
|
gray: "#252525",
|
|
"gray-light": "#333333",
|
|
"gray-dark": "#64748b",
|
|
},
|
|
},
|
|
// 애니메이션 키프레임 정의
|
|
keyframes: {
|
|
shimmer: {
|
|
"0%": { backgroundPosition: "-200% 0" },
|
|
"100%": { backgroundPosition: "200% 0" },
|
|
},
|
|
float: {
|
|
"0%, 100%": { transform: "translateY(0px)" },
|
|
"50%": { transform: "translateY(-10px)" },
|
|
},
|
|
"glow-pulse": {
|
|
"0%, 100%": { boxShadow: "0 0 20px rgba(74, 222, 128, 0.3)" },
|
|
"50%": { boxShadow: "0 0 40px rgba(74, 222, 128, 0.5)" },
|
|
},
|
|
"border-glow": {
|
|
"0%, 100%": { borderColor: "rgba(74, 222, 128, 0.3)" },
|
|
"50%": { borderColor: "rgba(74, 222, 128, 0.6)" },
|
|
},
|
|
"fade-in-up": {
|
|
"0%": { opacity: "0", transform: "translateY(20px)" },
|
|
"100%": { opacity: "1", transform: "translateY(0)" },
|
|
},
|
|
"scale-in": {
|
|
"0%": { opacity: "0", transform: "scale(0.95)" },
|
|
"100%": { opacity: "1", transform: "scale(1)" },
|
|
},
|
|
shake: {
|
|
"0%, 100%": { transform: "scale(1)" },
|
|
"50%": { transform: "scale(1.02)" },
|
|
},
|
|
},
|
|
animation: {
|
|
shimmer: "shimmer 2s infinite linear",
|
|
float: "float 3s ease-in-out infinite",
|
|
"glow-pulse": "glow-pulse 2s ease-in-out infinite",
|
|
"border-glow": "border-glow 2s ease-in-out infinite",
|
|
"fade-in-up": "fade-in-up 0.5s ease-out",
|
|
"scale-in": "scale-in 0.3s ease-out",
|
|
},
|
|
boxShadow: {
|
|
glow: "0 0 20px rgba(74, 222, 128, 0.3)",
|
|
"glow-lg": "0 0 40px rgba(74, 222, 128, 0.4)",
|
|
"glow-emerald": "0 0 20px rgba(16, 185, 129, 0.3)",
|
|
"glow-diamond": "0 0 20px rgba(34, 211, 238, 0.3)",
|
|
"inner-glow": "inset 0 0 20px rgba(74, 222, 128, 0.1)",
|
|
soft: "0 4px 20px rgba(0, 0, 0, 0.3)",
|
|
},
|
|
backgroundImage: {
|
|
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
|
|
"gradient-conic":
|
|
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
|
|
"mc-gradient": "linear-gradient(135deg, #4ade80 0%, #22d3ee 100%)",
|
|
"mc-gradient-dark":
|
|
"linear-gradient(135deg, rgba(74, 222, 128, 0.2) 0%, rgba(34, 211, 238, 0.2) 100%)",
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|