Add light/dark mode support with CSS variables
This commit is contained in:
parent
970b185151
commit
fb02688166
25 changed files with 1293 additions and 1177 deletions
|
|
@ -2,14 +2,52 @@
|
|||
@import "tailwindcss";
|
||||
@import "@nuxt/ui";
|
||||
|
||||
@theme static {
|
||||
@theme {
|
||||
/* Font families */
|
||||
--font-sans: "Inter", sans-serif;
|
||||
--font-body: "Inter", sans-serif;
|
||||
--font-mono: "Ubuntu Mono", monospace;
|
||||
--font-display: "NB Television Pro", monospace;
|
||||
|
||||
/* Ethereal color palette - grays, blacks, minimal color */
|
||||
/* Ethereal color palette - light mode (inverted for light backgrounds) */
|
||||
--color-ghost-50: #0a0a0a;
|
||||
--color-ghost-100: #1a1a1a;
|
||||
--color-ghost-200: #2a2a2a;
|
||||
--color-ghost-300: #3a3a3a;
|
||||
--color-ghost-400: #4a4a4a;
|
||||
--color-ghost-500: #6a6a6a;
|
||||
--color-ghost-600: #8a8a8a;
|
||||
--color-ghost-700: #b0b0b0;
|
||||
--color-ghost-800: #d0d0d0;
|
||||
--color-ghost-900: #f0f0f0;
|
||||
|
||||
/* Subtle accent - barely visible blue-gray (light mode) */
|
||||
--color-whisper-50: #0f1419;
|
||||
--color-whisper-100: #1a1f2e;
|
||||
--color-whisper-200: #252d40;
|
||||
--color-whisper-300: #2f3b52;
|
||||
--color-whisper-400: #3a4964;
|
||||
--color-whisper-500: #4f5d7a;
|
||||
--color-whisper-600: #687291;
|
||||
--color-whisper-700: #8491a8;
|
||||
--color-whisper-800: #a8b3c7;
|
||||
--color-whisper-900: #d4dae6;
|
||||
|
||||
/* Sparkle accent (light mode) */
|
||||
--color-sparkle-50: #202020;
|
||||
--color-sparkle-100: #404040;
|
||||
--color-sparkle-200: #606060;
|
||||
--color-sparkle-300: #808080;
|
||||
--color-sparkle-400: #a0a0a0;
|
||||
--color-sparkle-500: #c0c0c0;
|
||||
--color-sparkle-600: #d0d0d0;
|
||||
--color-sparkle-700: #e8e8e8;
|
||||
--color-sparkle-800: #f0f0f0;
|
||||
--color-sparkle-900: #fafafa;
|
||||
}
|
||||
|
||||
.dark {
|
||||
/* Ethereal color palette - dark mode (original values) */
|
||||
--color-ghost-50: #f0f0f0;
|
||||
--color-ghost-100: #d0d0d0;
|
||||
--color-ghost-200: #b0b0b0;
|
||||
|
|
@ -20,8 +58,8 @@
|
|||
--color-ghost-700: #2a2a2a;
|
||||
--color-ghost-800: #1a1a1a;
|
||||
--color-ghost-900: #0a0a0a;
|
||||
|
||||
/* Subtle accent - barely visible blue-gray */
|
||||
|
||||
/* Subtle accent - barely visible blue-gray (dark mode) */
|
||||
--color-whisper-50: #d4dae6;
|
||||
--color-whisper-100: #a8b3c7;
|
||||
--color-whisper-200: #8491a8;
|
||||
|
|
@ -33,7 +71,7 @@
|
|||
--color-whisper-800: #1a1f2e;
|
||||
--color-whisper-900: #0f1419;
|
||||
|
||||
/* Sparkle accent */
|
||||
/* Sparkle accent (dark mode) */
|
||||
--color-sparkle-50: #fafafa;
|
||||
--color-sparkle-100: #f0f0f0;
|
||||
--color-sparkle-200: #e8e8e8;
|
||||
|
|
@ -46,33 +84,79 @@
|
|||
--color-sparkle-900: #202020;
|
||||
}
|
||||
|
||||
/* Global ethereal background */
|
||||
/* Global ethereal background - light mode */
|
||||
:root {
|
||||
--ethereal-bg: radial-gradient(circle at 20% 80%, rgba(232, 232, 232, 0.03) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 20%, rgba(232, 232, 232, 0.02) 0%, transparent 50%),
|
||||
radial-gradient(circle at 40% 40%, rgba(232, 232, 232, 0.01) 0%, transparent 50%);
|
||||
|
||||
--halftone-pattern: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
|
||||
--ethereal-bg:
|
||||
radial-gradient(
|
||||
circle at 20% 80%,
|
||||
rgba(40, 40, 40, 0.03) 0%,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 80% 20%,
|
||||
rgba(40, 40, 40, 0.02) 0%,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 40% 40%,
|
||||
rgba(40, 40, 40, 0.01) 0%,
|
||||
transparent 50%
|
||||
);
|
||||
|
||||
--halftone-pattern: radial-gradient(
|
||||
circle,
|
||||
rgba(0, 0, 0, 0.1) 1px,
|
||||
transparent 1px
|
||||
);
|
||||
--halftone-size: 8px 8px;
|
||||
}
|
||||
|
||||
/* Dark mode background */
|
||||
.dark:root {
|
||||
--ethereal-bg:
|
||||
radial-gradient(
|
||||
circle at 20% 80%,
|
||||
rgba(232, 232, 232, 0.03) 0%,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 80% 20%,
|
||||
rgba(232, 232, 232, 0.02) 0%,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 40% 40%,
|
||||
rgba(232, 232, 232, 0.01) 0%,
|
||||
transparent 50%
|
||||
);
|
||||
|
||||
--halftone-pattern: radial-gradient(
|
||||
circle,
|
||||
rgba(255, 255, 255, 0.1) 1px,
|
||||
transparent 1px
|
||||
);
|
||||
}
|
||||
|
||||
html {
|
||||
background: var(--color-ghost-900);
|
||||
color: var(--color-ghost-200);
|
||||
@apply text-[--ui-text];
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--ethereal-bg), var(--color-ghost-900);
|
||||
background: var(--ethereal-bg), #f0f0f0;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.dark body {
|
||||
background: var(--ethereal-bg), #0a0a0a;
|
||||
}
|
||||
|
||||
/* Halftone texture overlay */
|
||||
.halftone-texture {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.halftone-texture::before {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -86,14 +170,28 @@ body {
|
|||
|
||||
/* Sparkle effects */
|
||||
@keyframes sparkle {
|
||||
0%, 100% { opacity: 0.3; transform: scale(0.8); }
|
||||
50% { opacity: 1; transform: scale(1.2); }
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.3;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
0%, 100% { opacity: 0.2; }
|
||||
25% { opacity: 0.8; }
|
||||
75% { opacity: 0.4; }
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
25% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
75% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
.sparkle-field {
|
||||
|
|
@ -102,20 +200,50 @@ body {
|
|||
}
|
||||
|
||||
.sparkle-field::after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image:
|
||||
radial-gradient(circle at 10% 20%, var(--color-sparkle-200) 1px, transparent 1px),
|
||||
radial-gradient(circle at 90% 80%, var(--color-sparkle-400) 1px, transparent 1px),
|
||||
radial-gradient(circle at 30% 70%, var(--color-sparkle-200) 0.5px, transparent 0.5px),
|
||||
radial-gradient(circle at 70% 30%, var(--color-sparkle-400) 0.5px, transparent 0.5px),
|
||||
radial-gradient(circle at 50% 10%, var(--color-sparkle-200) 1px, transparent 1px),
|
||||
radial-gradient(circle at 20% 90%, var(--color-sparkle-400) 0.5px, transparent 0.5px);
|
||||
background-size: 200px 200px, 300px 300px, 150px 150px, 250px 250px, 180px 180px, 220px 220px;
|
||||
background-image:
|
||||
radial-gradient(
|
||||
circle at 10% 20%,
|
||||
var(--color-sparkle-200) 1px,
|
||||
transparent 1px
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 90% 80%,
|
||||
var(--color-sparkle-400) 1px,
|
||||
transparent 1px
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 30% 70%,
|
||||
var(--color-sparkle-200) 0.5px,
|
||||
transparent 0.5px
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 70% 30%,
|
||||
var(--color-sparkle-400) 0.5px,
|
||||
transparent 0.5px
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 50% 10%,
|
||||
var(--color-sparkle-200) 1px,
|
||||
transparent 1px
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 20% 90%,
|
||||
var(--color-sparkle-400) 0.5px,
|
||||
transparent 0.5px
|
||||
);
|
||||
background-size:
|
||||
200px 200px,
|
||||
300px 300px,
|
||||
150px 150px,
|
||||
250px 250px,
|
||||
180px 180px,
|
||||
220px 220px;
|
||||
animation: twinkle 4s infinite ease-in-out;
|
||||
pointer-events: none;
|
||||
opacity: 0.6;
|
||||
|
|
@ -123,7 +251,7 @@ body {
|
|||
|
||||
/* Ethereal glow effects */
|
||||
.ethereal-glow {
|
||||
box-shadow:
|
||||
box-shadow:
|
||||
0 0 20px rgba(232, 232, 232, 0.1),
|
||||
0 0 40px rgba(232, 232, 232, 0.05),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
|
|
@ -135,12 +263,28 @@ body {
|
|||
|
||||
/* Dithered gradients */
|
||||
.dithered-bg {
|
||||
background:
|
||||
background:
|
||||
linear-gradient(45deg, var(--color-ghost-800) 25%, transparent 25%),
|
||||
linear-gradient(-45deg, var(--color-ghost-800) 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, var(--color-ghost-700) 75%),
|
||||
linear-gradient(-45deg, transparent 75%, var(--color-ghost-700) 75%);
|
||||
background-size: 4px 4px;
|
||||
background-position: 0 0, 0 2px, 2px -2px, -2px 0px;
|
||||
background-position:
|
||||
0 0,
|
||||
0 2px,
|
||||
2px -2px,
|
||||
-2px 0px;
|
||||
}
|
||||
|
||||
/* Mobile responsive utilities */
|
||||
@media (max-width: 1023px) {
|
||||
/* Prevent horizontal scroll on mobile */
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Adjust halftone pattern for mobile */
|
||||
.halftone-texture::before {
|
||||
background-size: 6px 6px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue