feat: Add theme system with 7 themes including Otaku and Pink Pink
- Implement ThemeContext with CSS variables for dynamic theming - Add theme presets: Cyberpunk, Windows Classic, Dark Modern, Matrix, Industrial, Otaku Mode, Pink Pink - Add theme selector UI in Footer with color preview - Theme persists to localStorage - Each theme has unique background effects, colors, and styling - Otaku Mode: anime-style dark purple with pink/purple glow and star effects - Pink Pink: cute pastel pink with heart pattern overlay 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -8,6 +8,7 @@ import { HistoryPage } from './pages/HistoryPage';
|
||||
import { SystemState, Recipe, IOPoint, LogEntry, RobotTarget, ConfigItem } from './types';
|
||||
import { comms } from './communication';
|
||||
import { AlertProvider, useAlert } from './contexts/AlertContext';
|
||||
import { ThemeProvider } from './contexts/ThemeContext';
|
||||
import { PickerMoveDialog } from './components/PickerMoveDialog';
|
||||
|
||||
// PickerMoveDialog 전역 상태 Context
|
||||
@@ -329,11 +330,13 @@ function AppContent() {
|
||||
);
|
||||
}
|
||||
|
||||
// 외부 App 컴포넌트 - AlertProvider로 감싸기
|
||||
// 외부 App 컴포넌트 - ThemeProvider + AlertProvider로 감싸기
|
||||
export default function App() {
|
||||
return (
|
||||
<AlertProvider>
|
||||
<AppContent />
|
||||
</AlertProvider>
|
||||
<ThemeProvider>
|
||||
<AlertProvider>
|
||||
<AppContent />
|
||||
</AlertProvider>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import React, { useState, useEffect, useMemo } from 'react';
|
||||
import { Palette, ChevronUp } from 'lucide-react';
|
||||
import { RobotTarget } from '../../types';
|
||||
import { comms } from '../../communication';
|
||||
import { useTheme, themes, ThemeName } from '../../contexts/ThemeContext';
|
||||
|
||||
// HW 상태 타입 (윈폼 HWState와 동일)
|
||||
// status: 0=SET(미설정/회색), 1=ON(연결/녹색), 2=TRIG(트리거/노란색), 3=OFF(연결안됨/빨간색)
|
||||
@@ -38,6 +40,8 @@ const getStatusColor = (status: number): { bg: string; shadow: string; text: str
|
||||
|
||||
export const Footer: React.FC<FooterProps> = ({ isHostConnected, robotTarget }) => {
|
||||
const [hwStatus, setHwStatus] = useState<HWItem[]>([]);
|
||||
const [showThemeSelector, setShowThemeSelector] = useState(false);
|
||||
const { theme, themeName, setTheme, availableThemes } = useTheme();
|
||||
|
||||
useEffect(() => {
|
||||
// HW_STATUS_UPDATE 이벤트 구독
|
||||
@@ -75,6 +79,44 @@ export const Footer: React.FC<FooterProps> = ({ isHostConnected, robotTarget })
|
||||
return errors.sort((a, b) => a.priority - b.priority)[0];
|
||||
}, [hwStatus]);
|
||||
|
||||
// 테마 선택 팝업을 닫기 위한 외부 클릭 감지
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (e: MouseEvent) => {
|
||||
const target = e.target as HTMLElement;
|
||||
if (!target.closest('.theme-selector')) {
|
||||
setShowThemeSelector(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (showThemeSelector) {
|
||||
document.addEventListener('click', handleClickOutside);
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('click', handleClickOutside);
|
||||
};
|
||||
}, [showThemeSelector]);
|
||||
|
||||
// 테마별 배경색 스타일 (Windows Classic은 특별 처리)
|
||||
const getFooterBgClass = () => {
|
||||
switch (themeName) {
|
||||
case 'windows-classic':
|
||||
return 'bg-[#c0c0c0] border-t-2 border-white shadow-[inset_0_-1px_0_#808080]';
|
||||
case 'dark-modern':
|
||||
return 'bg-zinc-900/90 border-t border-zinc-700/50';
|
||||
case 'matrix':
|
||||
return 'bg-black/95 border-t border-green-500/30';
|
||||
case 'industrial':
|
||||
return 'bg-stone-900/95 border-t border-orange-500/30';
|
||||
case 'otaku':
|
||||
return 'bg-[#1a1025]/95 border-t border-pink-500/30 shadow-[0_-2px_20px_rgba(255,107,157,0.1)]';
|
||||
case 'pink-pink':
|
||||
return 'bg-[#ffe4e9]/95 border-t-2 border-pink-300 shadow-[0_-2px_10px_rgba(255,105,180,0.2)]';
|
||||
default:
|
||||
return 'bg-black/80 border-t border-neon-blue/30';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* 하드웨어 오류 표시 배너 - 화면 중앙 상단에 크게 표시 */}
|
||||
@@ -94,8 +136,8 @@ export const Footer: React.FC<FooterProps> = ({ isHostConnected, robotTarget })
|
||||
</div>
|
||||
)}
|
||||
|
||||
<footer className="absolute bottom-0 left-0 right-0 h-10 bg-black/80 border-t border-neon-blue/30 flex items-center px-6 justify-between z-40 backdrop-blur text-xs font-mono text-slate-400">
|
||||
<div className="flex gap-4">
|
||||
<footer className={`absolute bottom-0 left-0 right-0 h-10 ${getFooterBgClass()} flex items-center px-6 justify-between z-40 backdrop-blur text-xs font-mono`}>
|
||||
<div className="flex gap-4 items-center">
|
||||
{/* H/W 상태 표시 (윈폼 HWState와 동일) */}
|
||||
{hwStatus.map((hw) => {
|
||||
const colors = getStatusColor(hw.status);
|
||||
@@ -112,7 +154,83 @@ export const Footer: React.FC<FooterProps> = ({ isHostConnected, robotTarget })
|
||||
<span className={`font-bold ${isHostConnected ? 'text-green-400' : 'text-red-400'}`}>HOST</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-8 text-neon-blue">
|
||||
|
||||
{/* 중앙: 테마 선택 버튼 */}
|
||||
<div className="relative theme-selector">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setShowThemeSelector(!showThemeSelector);
|
||||
}}
|
||||
className={`flex items-center gap-2 px-3 py-1 rounded transition-all ${
|
||||
themeName === 'windows-classic'
|
||||
? 'bg-[#c0c0c0] border-2 border-outset hover:bg-[#d0d0d0]'
|
||||
: 'hover:bg-white/10 text-slate-400 hover:text-white'
|
||||
}`}
|
||||
style={{ color: themeName !== 'windows-classic' ? theme.colors.primary : undefined }}
|
||||
title="Change Theme"
|
||||
>
|
||||
<Palette className="w-4 h-4" />
|
||||
<span className="text-[11px] font-bold">{theme.displayName}</span>
|
||||
<ChevronUp className={`w-3 h-3 transition-transform ${showThemeSelector ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
|
||||
{/* 테마 선택 팝업 */}
|
||||
{showThemeSelector && (
|
||||
<div className={`absolute bottom-full left-1/2 -translate-x-1/2 mb-2 min-w-[200px] rounded-lg shadow-2xl overflow-hidden animate-fadeIn ${
|
||||
themeName === 'windows-classic'
|
||||
? 'bg-[#c0c0c0] border-2 border-outset'
|
||||
: 'bg-slate-900/95 border border-slate-700 backdrop-blur'
|
||||
}`}>
|
||||
<div className={`px-3 py-2 text-xs font-bold ${
|
||||
themeName === 'windows-classic'
|
||||
? 'bg-gradient-to-r from-[#000080] to-[#1084d0] text-white'
|
||||
: 'border-b border-slate-700 text-slate-400'
|
||||
}`}>
|
||||
SELECT THEME
|
||||
</div>
|
||||
<div className="p-2 space-y-1">
|
||||
{availableThemes.map((name) => {
|
||||
const t = themes[name];
|
||||
const isActive = name === themeName;
|
||||
return (
|
||||
<button
|
||||
key={name}
|
||||
onClick={() => {
|
||||
setTheme(name);
|
||||
setShowThemeSelector(false);
|
||||
}}
|
||||
className={`w-full flex items-center gap-3 px-3 py-2 rounded text-left transition-all ${
|
||||
themeName === 'windows-classic'
|
||||
? `${isActive ? 'bg-[#000080] text-white' : 'hover:bg-[#d0d0d0] text-black'}`
|
||||
: `${isActive ? 'bg-white/10 text-white' : 'hover:bg-white/5 text-slate-400 hover:text-white'}`
|
||||
}`}
|
||||
>
|
||||
{/* 테마 미리보기 색상 */}
|
||||
<div className="flex gap-1">
|
||||
<div
|
||||
className="w-3 h-3 rounded-full"
|
||||
style={{ backgroundColor: t.colors.primary }}
|
||||
></div>
|
||||
<div
|
||||
className="w-3 h-3 rounded-full"
|
||||
style={{ backgroundColor: t.colors.secondary }}
|
||||
></div>
|
||||
</div>
|
||||
<span className="text-xs font-medium">{t.displayName}</span>
|
||||
{isActive && (
|
||||
<span className="ml-auto text-[10px]" style={{ color: t.colors.primary }}>●</span>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 우측: 로봇 위치 */}
|
||||
<div className="flex gap-8" style={{ color: theme.colors.primary }}>
|
||||
<span>POS.X: {robotTarget.x.toFixed(3)}</span>
|
||||
<span>POS.Y: {robotTarget.y.toFixed(3)}</span>
|
||||
<span>POS.Z: {robotTarget.z.toFixed(3)}</span>
|
||||
|
||||
@@ -2,6 +2,7 @@ import React from 'react';
|
||||
import { Header } from './Header';
|
||||
import { Footer } from './Footer';
|
||||
import { RobotTarget } from '../../types';
|
||||
import { useTheme } from '../../contexts/ThemeContext';
|
||||
|
||||
interface LayoutProps {
|
||||
children: React.ReactNode;
|
||||
@@ -22,24 +23,108 @@ export const Layout: React.FC<LayoutProps> = ({
|
||||
activeTab,
|
||||
isLoading
|
||||
}) => {
|
||||
const { theme, themeName } = useTheme();
|
||||
|
||||
// Theme-specific background classes
|
||||
const getBackgroundClass = () => {
|
||||
switch (themeName) {
|
||||
case 'windows-classic':
|
||||
return 'bg-[#008080]'; // Classic teal desktop
|
||||
case 'dark-modern':
|
||||
return 'bg-zinc-950';
|
||||
case 'matrix':
|
||||
return 'bg-black';
|
||||
case 'industrial':
|
||||
return 'bg-stone-950';
|
||||
case 'otaku':
|
||||
return 'bg-[#1a1025]'; // Dark purple
|
||||
case 'pink-pink':
|
||||
return 'bg-[#fff0f5]'; // Lavender blush
|
||||
default:
|
||||
return 'bg-slate-950';
|
||||
}
|
||||
};
|
||||
|
||||
const getTextClass = () => {
|
||||
switch (themeName) {
|
||||
case 'windows-classic':
|
||||
return 'text-black';
|
||||
case 'pink-pink':
|
||||
return 'text-[#8b008b]'; // Dark magenta
|
||||
default:
|
||||
return 'text-slate-100';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative w-screen h-screen bg-slate-950 text-slate-100 overflow-hidden font-sans">
|
||||
{/* Animated Nebula Background */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-slate-950 via-[#050a15] to-[#0a0f20] animate-gradient bg-[length:400%_400%] z-0"></div>
|
||||
<div className="absolute inset-0 grid-bg opacity-30 z-0"></div>
|
||||
<div className="absolute inset-0 scanlines z-50 pointer-events-none"></div>
|
||||
<div className={`relative w-screen h-screen ${getBackgroundClass()} ${getTextClass()} overflow-hidden font-sans`}>
|
||||
{/* Animated Background - only for themes with effects */}
|
||||
{theme.effects.gridBg && (
|
||||
<>
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-slate-950 via-[#050a15] to-[#0a0f20] animate-gradient bg-[length:400%_400%] z-0"></div>
|
||||
<div className="absolute inset-0 grid-bg opacity-30 z-0"></div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Matrix theme special background */}
|
||||
{themeName === 'matrix' && (
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-black via-[#001100] to-black z-0"></div>
|
||||
)}
|
||||
|
||||
{/* Industrial theme background */}
|
||||
{themeName === 'industrial' && (
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-stone-950 via-stone-900 to-stone-950 z-0"></div>
|
||||
)}
|
||||
|
||||
{/* Dark Modern gradient */}
|
||||
{themeName === 'dark-modern' && (
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-zinc-950 via-zinc-900 to-zinc-950 z-0"></div>
|
||||
)}
|
||||
|
||||
{/* Otaku theme background - 다크 퍼플 그라데이션 + 별 효과 */}
|
||||
{themeName === 'otaku' && (
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[#1a1025] via-[#2d1f3d] to-[#1a1025] z-0">
|
||||
{/* 별빛 효과 */}
|
||||
<div className="absolute inset-0 opacity-30" style={{
|
||||
backgroundImage: `
|
||||
radial-gradient(2px 2px at 20px 30px, #ff6b9d, transparent),
|
||||
radial-gradient(2px 2px at 40px 70px, #c084fc, transparent),
|
||||
radial-gradient(1px 1px at 90px 40px, #fbbf24, transparent),
|
||||
radial-gradient(2px 2px at 130px 80px, #ff6b9d, transparent),
|
||||
radial-gradient(1px 1px at 160px 30px, #c084fc, transparent)
|
||||
`,
|
||||
backgroundSize: '200px 100px'
|
||||
}}></div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pink Pink theme background - 파스텔 핑크 그라데이션 */}
|
||||
{themeName === 'pink-pink' && (
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[#fff0f5] via-[#ffe4e9] to-[#ffccd5] z-0">
|
||||
{/* 하트 패턴 오버레이 */}
|
||||
<div className="absolute inset-0 opacity-20" style={{
|
||||
backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath fill='%23ff69b4' d='M20 8c3-4 8-4 11 0s3 11-11 20C6 19 6 12 9 8s8-4 11 0z'/%3E%3C/svg%3E")`,
|
||||
backgroundSize: '80px 80px'
|
||||
}}></div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Scanlines - only for themes with the effect */}
|
||||
{theme.effects.scanlines && (
|
||||
<div className="absolute inset-0 scanlines z-50 pointer-events-none"></div>
|
||||
)}
|
||||
|
||||
{/* LOADING OVERLAY */}
|
||||
{isLoading && (
|
||||
<div className="absolute inset-0 z-[100] bg-black flex flex-col items-center justify-center gap-6">
|
||||
<div className="relative">
|
||||
<div className="w-24 h-24 border-4 border-neon-blue/30 rounded-full animate-spin"></div>
|
||||
<div className="absolute inset-0 border-t-4 border-neon-blue rounded-full animate-spin"></div>
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-neon-blue text-2xl font-tech font-bold">●</div>
|
||||
<div className="w-24 h-24 border-4 border-current/30 rounded-full animate-spin" style={{ borderColor: `${theme.colors.primary}30` }}></div>
|
||||
<div className="absolute inset-0 border-t-4 rounded-full animate-spin" style={{ borderTopColor: theme.colors.primary }}></div>
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-2xl font-tech font-bold" style={{ color: theme.colors.primary }}>●</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<h2 className="text-2xl font-tech font-bold text-white tracking-widest mb-2">SYSTEM INITIALIZING</h2>
|
||||
<p className="font-mono text-neon-blue text-sm animate-pulse">ESTABLISHING CONNECTION...</p>
|
||||
<p className="font-mono text-sm animate-pulse" style={{ color: theme.colors.primary }}>ESTABLISHING CONNECTION...</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
320
FrontEnd/contexts/ThemeContext.tsx
Normal file
320
FrontEnd/contexts/ThemeContext.tsx
Normal file
@@ -0,0 +1,320 @@
|
||||
import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
|
||||
|
||||
// Theme types
|
||||
export type ThemeName = 'cyberpunk' | 'windows-classic' | 'dark-modern' | 'matrix' | 'industrial' | 'otaku' | 'pink-pink';
|
||||
|
||||
export interface ThemeColors {
|
||||
primary: string;
|
||||
primaryRgb: string;
|
||||
secondary: string;
|
||||
secondaryRgb: string;
|
||||
accent: string;
|
||||
success: string;
|
||||
error: string;
|
||||
warning: string;
|
||||
bgPrimary: string;
|
||||
bgSecondary: string;
|
||||
bgTertiary: string;
|
||||
textPrimary: string;
|
||||
textSecondary: string;
|
||||
border: string;
|
||||
}
|
||||
|
||||
export interface Theme {
|
||||
name: ThemeName;
|
||||
displayName: string;
|
||||
colors: ThemeColors;
|
||||
effects: {
|
||||
glow: boolean;
|
||||
scanlines: boolean;
|
||||
gridBg: boolean;
|
||||
animations: boolean;
|
||||
glassMorphism: boolean;
|
||||
};
|
||||
borderRadius: string;
|
||||
fontStyle: 'tech' | 'classic' | 'modern';
|
||||
}
|
||||
|
||||
// Theme Presets
|
||||
export const themes: Record<ThemeName, Theme> = {
|
||||
'cyberpunk': {
|
||||
name: 'cyberpunk',
|
||||
displayName: 'Cyberpunk',
|
||||
colors: {
|
||||
primary: '#00f3ff',
|
||||
primaryRgb: '0, 243, 255',
|
||||
secondary: '#bc13fe',
|
||||
secondaryRgb: '188, 19, 254',
|
||||
accent: '#ff0099',
|
||||
success: '#0aff00',
|
||||
error: '#ff0055',
|
||||
warning: '#ffe600',
|
||||
bgPrimary: '#020617',
|
||||
bgSecondary: '#0f172a',
|
||||
bgTertiary: '#1e293b',
|
||||
textPrimary: '#f1f5f9',
|
||||
textSecondary: '#94a3b8',
|
||||
border: 'rgba(0, 243, 255, 0.2)',
|
||||
},
|
||||
effects: {
|
||||
glow: true,
|
||||
scanlines: true,
|
||||
gridBg: true,
|
||||
animations: true,
|
||||
glassMorphism: true,
|
||||
},
|
||||
borderRadius: '0px',
|
||||
fontStyle: 'tech',
|
||||
},
|
||||
'windows-classic': {
|
||||
name: 'windows-classic',
|
||||
displayName: 'Windows Classic',
|
||||
colors: {
|
||||
primary: '#000080',
|
||||
primaryRgb: '0, 0, 128',
|
||||
secondary: '#008080',
|
||||
secondaryRgb: '0, 128, 128',
|
||||
accent: '#800000',
|
||||
success: '#008000',
|
||||
error: '#ff0000',
|
||||
warning: '#808000',
|
||||
bgPrimary: '#c0c0c0',
|
||||
bgSecondary: '#dfdfdf',
|
||||
bgTertiary: '#ffffff',
|
||||
textPrimary: '#000000',
|
||||
textSecondary: '#404040',
|
||||
border: '#808080',
|
||||
},
|
||||
effects: {
|
||||
glow: false,
|
||||
scanlines: false,
|
||||
gridBg: false,
|
||||
animations: false,
|
||||
glassMorphism: false,
|
||||
},
|
||||
borderRadius: '0px',
|
||||
fontStyle: 'classic',
|
||||
},
|
||||
'dark-modern': {
|
||||
name: 'dark-modern',
|
||||
displayName: 'Dark Modern',
|
||||
colors: {
|
||||
primary: '#3b82f6',
|
||||
primaryRgb: '59, 130, 246',
|
||||
secondary: '#8b5cf6',
|
||||
secondaryRgb: '139, 92, 246',
|
||||
accent: '#ec4899',
|
||||
success: '#22c55e',
|
||||
error: '#ef4444',
|
||||
warning: '#f59e0b',
|
||||
bgPrimary: '#09090b',
|
||||
bgSecondary: '#18181b',
|
||||
bgTertiary: '#27272a',
|
||||
textPrimary: '#fafafa',
|
||||
textSecondary: '#a1a1aa',
|
||||
border: 'rgba(63, 63, 70, 0.5)',
|
||||
},
|
||||
effects: {
|
||||
glow: false,
|
||||
scanlines: false,
|
||||
gridBg: false,
|
||||
animations: true,
|
||||
glassMorphism: true,
|
||||
},
|
||||
borderRadius: '8px',
|
||||
fontStyle: 'modern',
|
||||
},
|
||||
'matrix': {
|
||||
name: 'matrix',
|
||||
displayName: 'Matrix',
|
||||
colors: {
|
||||
primary: '#00ff00',
|
||||
primaryRgb: '0, 255, 0',
|
||||
secondary: '#00cc00',
|
||||
secondaryRgb: '0, 204, 0',
|
||||
accent: '#00ff00',
|
||||
success: '#00ff00',
|
||||
error: '#ff0000',
|
||||
warning: '#ffff00',
|
||||
bgPrimary: '#000000',
|
||||
bgSecondary: '#0a0a0a',
|
||||
bgTertiary: '#141414',
|
||||
textPrimary: '#00ff00',
|
||||
textSecondary: '#00aa00',
|
||||
border: 'rgba(0, 255, 0, 0.3)',
|
||||
},
|
||||
effects: {
|
||||
glow: true,
|
||||
scanlines: true,
|
||||
gridBg: false,
|
||||
animations: true,
|
||||
glassMorphism: false,
|
||||
},
|
||||
borderRadius: '0px',
|
||||
fontStyle: 'tech',
|
||||
},
|
||||
'industrial': {
|
||||
name: 'industrial',
|
||||
displayName: 'Industrial',
|
||||
colors: {
|
||||
primary: '#f97316',
|
||||
primaryRgb: '249, 115, 22',
|
||||
secondary: '#eab308',
|
||||
secondaryRgb: '234, 179, 8',
|
||||
accent: '#dc2626',
|
||||
success: '#16a34a',
|
||||
error: '#dc2626',
|
||||
warning: '#eab308',
|
||||
bgPrimary: '#1c1917',
|
||||
bgSecondary: '#292524',
|
||||
bgTertiary: '#44403c',
|
||||
textPrimary: '#fafaf9',
|
||||
textSecondary: '#a8a29e',
|
||||
border: 'rgba(249, 115, 22, 0.3)',
|
||||
},
|
||||
effects: {
|
||||
glow: true,
|
||||
scanlines: false,
|
||||
gridBg: false,
|
||||
animations: true,
|
||||
glassMorphism: false,
|
||||
},
|
||||
borderRadius: '4px',
|
||||
fontStyle: 'tech',
|
||||
},
|
||||
'otaku': {
|
||||
name: 'otaku',
|
||||
displayName: 'Otaku Mode',
|
||||
colors: {
|
||||
primary: '#ff6b9d', // 애니메이션 핑크
|
||||
primaryRgb: '255, 107, 157',
|
||||
secondary: '#c084fc', // 보라색
|
||||
secondaryRgb: '192, 132, 252',
|
||||
accent: '#fbbf24', // 골드 (별/하이라이트)
|
||||
success: '#4ade80', // 밝은 그린
|
||||
error: '#f87171', // 소프트 레드
|
||||
warning: '#fcd34d', // 옐로우
|
||||
bgPrimary: '#1a1025', // 다크 퍼플
|
||||
bgSecondary: '#2d1f3d', // 미드 퍼플
|
||||
bgTertiary: '#3d2a54', // 라이트 퍼플
|
||||
textPrimary: '#fdf4ff', // 거의 화이트 (핑크톤)
|
||||
textSecondary: '#d8b4fe', // 라벤더
|
||||
border: 'rgba(255, 107, 157, 0.3)',
|
||||
},
|
||||
effects: {
|
||||
glow: true,
|
||||
scanlines: false,
|
||||
gridBg: true,
|
||||
animations: true,
|
||||
glassMorphism: true,
|
||||
},
|
||||
borderRadius: '12px',
|
||||
fontStyle: 'modern',
|
||||
},
|
||||
'pink-pink': {
|
||||
name: 'pink-pink',
|
||||
displayName: 'Pink Pink',
|
||||
colors: {
|
||||
primary: '#ff69b4', // 핫핑크
|
||||
primaryRgb: '255, 105, 180',
|
||||
secondary: '#ff1493', // 딥핑크
|
||||
secondaryRgb: '255, 20, 147',
|
||||
accent: '#ffb6c1', // 라이트핑크
|
||||
success: '#98fb98', // 페일그린
|
||||
error: '#ff6b6b', // 코랄레드
|
||||
warning: '#ffa07a', // 라이트살몬
|
||||
bgPrimary: '#fff0f5', // 라벤더블러쉬 (밝은 배경)
|
||||
bgSecondary: '#ffe4e9', // 미스티로즈
|
||||
bgTertiary: '#ffccd5', // 핑크
|
||||
textPrimary: '#8b008b', // 다크마젠타
|
||||
textSecondary: '#c71585', // 미디엄바이올렛레드
|
||||
border: 'rgba(255, 105, 180, 0.4)',
|
||||
},
|
||||
effects: {
|
||||
glow: true,
|
||||
scanlines: false,
|
||||
gridBg: false,
|
||||
animations: true,
|
||||
glassMorphism: true,
|
||||
},
|
||||
borderRadius: '16px',
|
||||
fontStyle: 'modern',
|
||||
},
|
||||
};
|
||||
|
||||
interface ThemeContextType {
|
||||
theme: Theme;
|
||||
themeName: ThemeName;
|
||||
setTheme: (name: ThemeName) => void;
|
||||
availableThemes: ThemeName[];
|
||||
}
|
||||
|
||||
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
|
||||
|
||||
export const useTheme = () => {
|
||||
const context = useContext(ThemeContext);
|
||||
if (!context) {
|
||||
throw new Error('useTheme must be used within ThemeProvider');
|
||||
}
|
||||
return context;
|
||||
};
|
||||
|
||||
interface ThemeProviderProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
|
||||
const [themeName, setThemeName] = useState<ThemeName>(() => {
|
||||
// Load from localStorage on initial render
|
||||
const saved = localStorage.getItem('app-theme');
|
||||
return (saved as ThemeName) || 'cyberpunk';
|
||||
});
|
||||
|
||||
const theme = themes[themeName];
|
||||
|
||||
// Apply CSS variables when theme changes
|
||||
useEffect(() => {
|
||||
const root = document.documentElement;
|
||||
const colors = theme.colors;
|
||||
|
||||
// Set CSS variables
|
||||
root.style.setProperty('--color-primary', colors.primary);
|
||||
root.style.setProperty('--color-primary-rgb', colors.primaryRgb);
|
||||
root.style.setProperty('--color-secondary', colors.secondary);
|
||||
root.style.setProperty('--color-secondary-rgb', colors.secondaryRgb);
|
||||
root.style.setProperty('--color-accent', colors.accent);
|
||||
root.style.setProperty('--color-success', colors.success);
|
||||
root.style.setProperty('--color-error', colors.error);
|
||||
root.style.setProperty('--color-warning', colors.warning);
|
||||
root.style.setProperty('--color-bg-primary', colors.bgPrimary);
|
||||
root.style.setProperty('--color-bg-secondary', colors.bgSecondary);
|
||||
root.style.setProperty('--color-bg-tertiary', colors.bgTertiary);
|
||||
root.style.setProperty('--color-text-primary', colors.textPrimary);
|
||||
root.style.setProperty('--color-text-secondary', colors.textSecondary);
|
||||
root.style.setProperty('--color-border', colors.border);
|
||||
root.style.setProperty('--border-radius', theme.borderRadius);
|
||||
|
||||
// Set data attribute for theme-specific CSS
|
||||
root.setAttribute('data-theme', themeName);
|
||||
|
||||
// Save to localStorage
|
||||
localStorage.setItem('app-theme', themeName);
|
||||
}, [theme, themeName]);
|
||||
|
||||
const setTheme = (name: ThemeName) => {
|
||||
setThemeName(name);
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeContext.Provider
|
||||
value={{
|
||||
theme,
|
||||
themeName,
|
||||
setTheme,
|
||||
availableThemes: Object.keys(themes) as ThemeName[],
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</ThemeContext.Provider>
|
||||
);
|
||||
};
|
||||
@@ -2,7 +2,31 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* Custom Scrollbar */
|
||||
/* ========================================
|
||||
CSS Variables for Theming
|
||||
======================================== */
|
||||
:root {
|
||||
/* Default (Cyberpunk) theme */
|
||||
--color-primary: #00f3ff;
|
||||
--color-primary-rgb: 0, 243, 255;
|
||||
--color-secondary: #bc13fe;
|
||||
--color-secondary-rgb: 188, 19, 254;
|
||||
--color-accent: #ff0099;
|
||||
--color-success: #0aff00;
|
||||
--color-error: #ff0055;
|
||||
--color-warning: #ffe600;
|
||||
--color-bg-primary: #020617;
|
||||
--color-bg-secondary: #0f172a;
|
||||
--color-bg-tertiary: #1e293b;
|
||||
--color-text-primary: #f1f5f9;
|
||||
--color-text-secondary: #94a3b8;
|
||||
--color-border: rgba(0, 243, 255, 0.2);
|
||||
--border-radius: 0px;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Custom Scrollbar (Theme-aware)
|
||||
======================================== */
|
||||
::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
@@ -13,25 +37,29 @@
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 243, 255, 0.3);
|
||||
background: rgba(var(--color-primary-rgb), 0.3);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(0, 243, 255, 0.6);
|
||||
background: rgba(var(--color-primary-rgb), 0.6);
|
||||
}
|
||||
|
||||
/* Holographic Glass */
|
||||
/* ========================================
|
||||
Theme: Cyberpunk (Default)
|
||||
======================================== */
|
||||
[data-theme="cyberpunk"] .glass-holo,
|
||||
.glass-holo {
|
||||
background: linear-gradient(135deg, rgba(10, 15, 30, 0.7) 0%, rgba(20, 30, 50, 0.5) 100%);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(0, 243, 255, 0.1);
|
||||
border: 1px solid rgba(var(--color-primary-rgb), 0.1);
|
||||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[data-theme="cyberpunk"] .glass-holo::before,
|
||||
.glass-holo::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@@ -39,43 +67,49 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(0, 243, 255, 0.5), transparent);
|
||||
background: linear-gradient(90deg, transparent, rgba(var(--color-primary-rgb), 0.5), transparent);
|
||||
}
|
||||
|
||||
/* Active Element */
|
||||
.glass-active {
|
||||
background: rgba(0, 243, 255, 0.1);
|
||||
border: 1px solid rgba(0, 243, 255, 0.4);
|
||||
box-shadow: 0 0 15px rgba(0, 243, 255, 0.2);
|
||||
background: rgba(var(--color-primary-rgb), 0.1);
|
||||
border: 1px solid rgba(var(--color-primary-rgb), 0.4);
|
||||
box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.2);
|
||||
}
|
||||
|
||||
/* Text Glows */
|
||||
.text-glow-blue {
|
||||
color: #00f3ff;
|
||||
text-shadow: 0 0 8px rgba(0, 243, 255, 0.6);
|
||||
color: var(--color-primary);
|
||||
text-shadow: 0 0 8px rgba(var(--color-primary-rgb), 0.6);
|
||||
}
|
||||
|
||||
.text-glow-purple {
|
||||
color: #bc13fe;
|
||||
text-shadow: 0 0 8px rgba(188, 19, 254, 0.6);
|
||||
color: var(--color-secondary);
|
||||
text-shadow: 0 0 8px rgba(var(--color-secondary-rgb), 0.6);
|
||||
}
|
||||
|
||||
.text-glow-red {
|
||||
color: #ff0055;
|
||||
color: var(--color-error);
|
||||
text-shadow: 0 0 8px rgba(255, 0, 85, 0.6);
|
||||
}
|
||||
|
||||
.text-glow-green {
|
||||
color: #0aff00;
|
||||
color: var(--color-success);
|
||||
text-shadow: 0 0 8px rgba(10, 255, 0, 0.6);
|
||||
}
|
||||
|
||||
/* Primary text glow (theme-aware) */
|
||||
.text-glow-primary {
|
||||
color: var(--color-primary);
|
||||
text-shadow: 0 0 8px rgba(var(--color-primary-rgb), 0.6);
|
||||
}
|
||||
|
||||
/* Grid Background */
|
||||
.grid-bg {
|
||||
background-size: 50px 50px;
|
||||
background-image:
|
||||
linear-gradient(to right, rgba(0, 243, 255, 0.05) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(0, 243, 255, 0.05) 1px, transparent 1px);
|
||||
linear-gradient(to right, rgba(var(--color-primary-rgb), 0.05) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(var(--color-primary-rgb), 0.05) 1px, transparent 1px);
|
||||
mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
|
||||
}
|
||||
|
||||
@@ -105,4 +139,390 @@
|
||||
100% 100%,
|
||||
0 100%,
|
||||
0 10px);
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Theme: Windows Classic
|
||||
======================================== */
|
||||
[data-theme="windows-classic"] {
|
||||
font-family: 'MS Sans Serif', 'Segoe UI', Tahoma, sans-serif !important;
|
||||
}
|
||||
|
||||
[data-theme="windows-classic"] .glass-holo {
|
||||
background: #c0c0c0;
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
border: 2px outset #dfdfdf;
|
||||
box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #ffffff;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
[data-theme="windows-classic"] .glass-holo::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-theme="windows-classic"] .text-glow-blue,
|
||||
[data-theme="windows-classic"] .text-glow-primary {
|
||||
color: #000080;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
[data-theme="windows-classic"] .text-glow-green {
|
||||
color: #008000;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
[data-theme="windows-classic"] .text-glow-red {
|
||||
color: #ff0000;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
[data-theme="windows-classic"] .grid-bg,
|
||||
[data-theme="windows-classic"] .scanlines {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Windows Classic Button Style */
|
||||
[data-theme="windows-classic"] .win-button {
|
||||
background: #c0c0c0;
|
||||
border: 2px outset #dfdfdf;
|
||||
box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #ffffff;
|
||||
padding: 4px 16px;
|
||||
font-family: 'MS Sans Serif', Tahoma, sans-serif;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
[data-theme="windows-classic"] .win-button:active {
|
||||
border: 2px inset #808080;
|
||||
box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #ffffff;
|
||||
}
|
||||
|
||||
/* Windows Classic Title Bar */
|
||||
[data-theme="windows-classic"] .win-titlebar {
|
||||
background: linear-gradient(to right, #000080, #1084d0);
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
/* Windows Classic Input */
|
||||
[data-theme="windows-classic"] input,
|
||||
[data-theme="windows-classic"] select {
|
||||
background: white;
|
||||
border: 2px inset #808080;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Theme: Dark Modern
|
||||
======================================== */
|
||||
[data-theme="dark-modern"] .glass-holo {
|
||||
background: rgba(24, 24, 27, 0.8);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(63, 63, 70, 0.5);
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
[data-theme="dark-modern"] .glass-holo::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-theme="dark-modern"] .text-glow-blue,
|
||||
[data-theme="dark-modern"] .text-glow-primary {
|
||||
color: #3b82f6;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
[data-theme="dark-modern"] .text-glow-green {
|
||||
color: #22c55e;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
[data-theme="dark-modern"] .text-glow-red {
|
||||
color: #ef4444;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
[data-theme="dark-modern"] .grid-bg,
|
||||
[data-theme="dark-modern"] .scanlines {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-theme="dark-modern"] .clip-tech,
|
||||
[data-theme="dark-modern"] .clip-tech-inv {
|
||||
clip-path: none;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Theme: Matrix
|
||||
======================================== */
|
||||
[data-theme="matrix"] .glass-holo {
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
backdrop-filter: none;
|
||||
border: 1px solid rgba(0, 255, 0, 0.3);
|
||||
box-shadow: 0 0 20px rgba(0, 255, 0, 0.1), inset 0 0 20px rgba(0, 255, 0, 0.05);
|
||||
}
|
||||
|
||||
[data-theme="matrix"] .glass-holo::before {
|
||||
background: linear-gradient(90deg, transparent, rgba(0, 255, 0, 0.5), transparent);
|
||||
}
|
||||
|
||||
[data-theme="matrix"] .text-glow-blue,
|
||||
[data-theme="matrix"] .text-glow-primary {
|
||||
color: #00ff00;
|
||||
text-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
|
||||
}
|
||||
|
||||
[data-theme="matrix"] .text-glow-green {
|
||||
color: #00ff00;
|
||||
text-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
|
||||
}
|
||||
|
||||
[data-theme="matrix"] .text-glow-red {
|
||||
color: #ff0000;
|
||||
text-shadow: 0 0 8px rgba(255, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
[data-theme="matrix"] body {
|
||||
background: #000000 !important;
|
||||
}
|
||||
|
||||
[data-theme="matrix"] .grid-bg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Matrix rain effect - optional */
|
||||
[data-theme="matrix"] .scanlines {
|
||||
background: linear-gradient(to bottom,
|
||||
rgba(0, 255, 0, 0),
|
||||
rgba(0, 255, 0, 0) 50%,
|
||||
rgba(0, 0, 0, 0.3) 50%,
|
||||
rgba(0, 0, 0, 0.3));
|
||||
background-size: 100% 3px;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Theme: Industrial
|
||||
======================================== */
|
||||
[data-theme="industrial"] .glass-holo {
|
||||
background: rgba(28, 25, 23, 0.95);
|
||||
backdrop-filter: none;
|
||||
border: 2px solid rgba(249, 115, 22, 0.3);
|
||||
box-shadow: 0 0 15px rgba(249, 115, 22, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
[data-theme="industrial"] .glass-holo::before {
|
||||
background: linear-gradient(90deg, transparent, rgba(249, 115, 22, 0.5), transparent);
|
||||
}
|
||||
|
||||
[data-theme="industrial"] .text-glow-blue,
|
||||
[data-theme="industrial"] .text-glow-primary {
|
||||
color: #f97316;
|
||||
text-shadow: 0 0 8px rgba(249, 115, 22, 0.6);
|
||||
}
|
||||
|
||||
[data-theme="industrial"] .text-glow-green {
|
||||
color: #16a34a;
|
||||
text-shadow: 0 0 8px rgba(22, 163, 74, 0.6);
|
||||
}
|
||||
|
||||
[data-theme="industrial"] .text-glow-red {
|
||||
color: #dc2626;
|
||||
text-shadow: 0 0 8px rgba(220, 38, 38, 0.6);
|
||||
}
|
||||
|
||||
[data-theme="industrial"] .grid-bg,
|
||||
[data-theme="industrial"] .scanlines {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Industrial warning stripes */
|
||||
[data-theme="industrial"] .industrial-stripe {
|
||||
background: repeating-linear-gradient(
|
||||
45deg,
|
||||
#f97316,
|
||||
#f97316 10px,
|
||||
#000000 10px,
|
||||
#000000 20px
|
||||
);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Theme: Otaku Mode (애니메이션/오타쿠 스타일)
|
||||
======================================== */
|
||||
[data-theme="otaku"] .glass-holo {
|
||||
background: linear-gradient(135deg, rgba(26, 16, 37, 0.85) 0%, rgba(45, 31, 61, 0.75) 100%);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 2px solid rgba(255, 107, 157, 0.3);
|
||||
box-shadow:
|
||||
0 0 30px rgba(255, 107, 157, 0.15),
|
||||
0 0 60px rgba(192, 132, 252, 0.1),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
[data-theme="otaku"] .glass-holo::before {
|
||||
background: linear-gradient(90deg,
|
||||
transparent,
|
||||
rgba(255, 107, 157, 0.6),
|
||||
rgba(192, 132, 252, 0.6),
|
||||
transparent);
|
||||
}
|
||||
|
||||
[data-theme="otaku"] .text-glow-blue,
|
||||
[data-theme="otaku"] .text-glow-primary {
|
||||
color: #ff6b9d;
|
||||
text-shadow:
|
||||
0 0 10px rgba(255, 107, 157, 0.8),
|
||||
0 0 20px rgba(255, 107, 157, 0.4),
|
||||
0 0 30px rgba(192, 132, 252, 0.3);
|
||||
}
|
||||
|
||||
[data-theme="otaku"] .text-glow-green {
|
||||
color: #4ade80;
|
||||
text-shadow: 0 0 10px rgba(74, 222, 128, 0.6);
|
||||
}
|
||||
|
||||
[data-theme="otaku"] .text-glow-red {
|
||||
color: #f87171;
|
||||
text-shadow: 0 0 10px rgba(248, 113, 113, 0.6);
|
||||
}
|
||||
|
||||
/* Otaku 특수 효과 - 반짝이는 별 그리드 */
|
||||
[data-theme="otaku"] .grid-bg {
|
||||
background-size: 30px 30px;
|
||||
background-image:
|
||||
radial-gradient(circle, rgba(255, 107, 157, 0.15) 1px, transparent 1px),
|
||||
radial-gradient(circle, rgba(192, 132, 252, 0.1) 1px, transparent 1px);
|
||||
background-position: 0 0, 15px 15px;
|
||||
mask-image: radial-gradient(circle at center, black 50%, transparent 100%);
|
||||
}
|
||||
|
||||
[data-theme="otaku"] .scanlines {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 귀여운 라운드 버튼 스타일 */
|
||||
[data-theme="otaku"] .clip-tech,
|
||||
[data-theme="otaku"] .clip-tech-inv {
|
||||
clip-path: none;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Theme: Pink Pink (귀여운 파스텔 핑크)
|
||||
======================================== */
|
||||
[data-theme="pink-pink"] .glass-holo {
|
||||
background: linear-gradient(135deg, rgba(255, 240, 245, 0.95) 0%, rgba(255, 228, 233, 0.9) 100%);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 2px solid rgba(255, 105, 180, 0.4);
|
||||
box-shadow:
|
||||
0 4px 20px rgba(255, 105, 180, 0.2),
|
||||
0 0 40px rgba(255, 20, 147, 0.1),
|
||||
inset 0 2px 0 rgba(255, 255, 255, 0.8);
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
[data-theme="pink-pink"] .glass-holo::before {
|
||||
background: linear-gradient(90deg,
|
||||
transparent,
|
||||
rgba(255, 105, 180, 0.5),
|
||||
rgba(255, 20, 147, 0.5),
|
||||
transparent);
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
[data-theme="pink-pink"] .text-glow-blue,
|
||||
[data-theme="pink-pink"] .text-glow-primary {
|
||||
color: #ff69b4;
|
||||
text-shadow:
|
||||
0 0 8px rgba(255, 105, 180, 0.5),
|
||||
0 0 16px rgba(255, 20, 147, 0.3);
|
||||
}
|
||||
|
||||
[data-theme="pink-pink"] .text-glow-green {
|
||||
color: #2e8b57;
|
||||
text-shadow: 0 0 8px rgba(46, 139, 87, 0.4);
|
||||
}
|
||||
|
||||
[data-theme="pink-pink"] .text-glow-red {
|
||||
color: #ff6b6b;
|
||||
text-shadow: 0 0 8px rgba(255, 107, 107, 0.5);
|
||||
}
|
||||
|
||||
[data-theme="pink-pink"] .grid-bg,
|
||||
[data-theme="pink-pink"] .scanlines {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 핑크 테마 특수 - 하트 패턴 배경 (선택적) */
|
||||
[data-theme="pink-pink"] .pink-hearts {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23ff69b4' fill-opacity='0.1' d='M10 3.5c1.5-2 4-2 5.5 0s1.5 5.5-5.5 10c-7-4.5-7-8-5.5-10s4-2 5.5 0z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* 핑크 테마 버튼 스타일 */
|
||||
[data-theme="pink-pink"] .clip-tech,
|
||||
[data-theme="pink-pink"] .clip-tech-inv {
|
||||
clip-path: none;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
/* 핑크 테마 스크롤바 */
|
||||
[data-theme="pink-pink"]::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 105, 180, 0.5);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
[data-theme="pink-pink"]::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 105, 180, 0.8);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Theme-aware utility classes
|
||||
======================================== */
|
||||
.theme-bg-primary {
|
||||
background-color: var(--color-bg-primary);
|
||||
}
|
||||
|
||||
.theme-bg-secondary {
|
||||
background-color: var(--color-bg-secondary);
|
||||
}
|
||||
|
||||
.theme-bg-tertiary {
|
||||
background-color: var(--color-bg-tertiary);
|
||||
}
|
||||
|
||||
.theme-text-primary {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.theme-text-secondary {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.theme-border {
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.theme-accent {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.theme-glow {
|
||||
box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.3);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Disable effects for non-effect themes
|
||||
======================================== */
|
||||
[data-theme="windows-classic"] .animate-pulse,
|
||||
[data-theme="windows-classic"] .animate-glow,
|
||||
[data-theme="windows-classic"] .animate-gradient {
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
@@ -8,14 +8,15 @@ export default {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'sans-serif'],
|
||||
mono: ['Rajdhani', 'monospace'],
|
||||
mono: ['Rajdhani', 'monospace'],
|
||||
tech: ['Rajdhani', 'sans-serif'],
|
||||
classic: ['Segoe UI', 'Tahoma', 'sans-serif'],
|
||||
},
|
||||
colors: {
|
||||
slate: {
|
||||
850: '#1e293b',
|
||||
900: '#0f172a',
|
||||
950: '#020617',
|
||||
850: '#1e293b',
|
||||
900: '#0f172a',
|
||||
950: '#020617',
|
||||
},
|
||||
neon: {
|
||||
blue: '#00f3ff',
|
||||
@@ -23,6 +24,21 @@ export default {
|
||||
pink: '#ff0099',
|
||||
green: '#0aff00',
|
||||
yellow: '#ffe600',
|
||||
},
|
||||
// Theme-aware colors using CSS variables
|
||||
theme: {
|
||||
primary: 'var(--color-primary)',
|
||||
secondary: 'var(--color-secondary)',
|
||||
accent: 'var(--color-accent)',
|
||||
success: 'var(--color-success)',
|
||||
error: 'var(--color-error)',
|
||||
warning: 'var(--color-warning)',
|
||||
'bg-primary': 'var(--color-bg-primary)',
|
||||
'bg-secondary': 'var(--color-bg-secondary)',
|
||||
'bg-tertiary': 'var(--color-bg-tertiary)',
|
||||
'text-primary': 'var(--color-text-primary)',
|
||||
'text-secondary': 'var(--color-text-secondary)',
|
||||
border: 'var(--color-border)',
|
||||
}
|
||||
},
|
||||
boxShadow: {
|
||||
@@ -30,6 +46,7 @@ export default {
|
||||
'glow-purple': '0 0 20px rgba(188, 19, 254, 0.4), inset 0 0 10px rgba(188, 19, 254, 0.1)',
|
||||
'glow-red': '0 0 30px rgba(255, 0, 0, 0.5)',
|
||||
'hologram': '0 0 15px rgba(6, 182, 212, 0.15), inset 0 0 20px rgba(6, 182, 212, 0.05)',
|
||||
'glow-primary': '0 0 20px rgba(var(--color-primary-rgb), 0.3), inset 0 0 10px rgba(var(--color-primary-rgb), 0.1)',
|
||||
},
|
||||
animation: {
|
||||
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
||||
@@ -41,8 +58,8 @@ export default {
|
||||
},
|
||||
keyframes: {
|
||||
glow: {
|
||||
'0%': { boxShadow: '0 0 5px rgba(0, 243, 255, 0.2)' },
|
||||
'100%': { boxShadow: '0 0 20px rgba(0, 243, 255, 0.6), 0 0 10px rgba(0, 243, 255, 0.4)' },
|
||||
'0%': { boxShadow: '0 0 5px rgba(var(--color-primary-rgb), 0.2)' },
|
||||
'100%': { boxShadow: '0 0 20px rgba(var(--color-primary-rgb), 0.6), 0 0 10px rgba(var(--color-primary-rgb), 0.4)' },
|
||||
},
|
||||
gradient: {
|
||||
'0%': { backgroundPosition: '0% 50%' },
|
||||
@@ -57,8 +74,11 @@ export default {
|
||||
'0%': { opacity: '0', transform: 'scale(0.95)' },
|
||||
'100%': { opacity: '1', transform: 'scale(1)' },
|
||||
}
|
||||
},
|
||||
borderRadius: {
|
||||
'theme': 'var(--border-radius)',
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user