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:
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user