design: better dark mode

This commit is contained in:
Per Stark
2026-01-17 23:31:05 +01:00
parent ece744d5a0
commit a3bc6fba98
3 changed files with 41 additions and 26 deletions

View File

@@ -69,26 +69,41 @@
[data-theme="dark"] {
color-scheme: dark;
--color-base-100: oklch(22% 0.015 255);
--color-base-200: oklch(18% 0.014 253);
--color-base-300: oklch(14% 0.012 251);
--color-base-content: oklch(97.2% 0.02 255);
--color-primary: oklch(58% 0.233 277.12);
--color-primary-content: oklch(96% 0.018 272.31);
--color-secondary: oklch(65% 0.241 354.31);
--color-secondary-content: oklch(94% 0.028 342.26);
--color-accent: oklch(78% 0.22 80);
--color-accent-content: oklch(20% 0.035 80);
--color-neutral: oklch(26% 0.02 255);
--color-neutral-content: oklch(97% 0.03 255);
--color-info: oklch(74% 0.16 232.66);
--color-info-content: oklch(29% 0.066 243.16);
--color-success: oklch(76% 0.177 163.22);
--color-success-content: oklch(37% 0.077 168.94);
--color-warning: oklch(82% 0.189 84.43);
--color-warning-content: oklch(41% 0.112 45.9);
--color-error: oklch(71% 0.194 13.43);
--color-error-content: oklch(27% 0.105 12.09);
/* --- Canvas: Dark Warm Grey (Matches Light Mode's hue 90) --- */
--color-base-100: oklch(18% 0.01 90);
--color-base-200: oklch(15% 0.01 90);
--color-base-300: oklch(12% 0.01 90);
--color-base-content: oklch(96% 0.01 90);
/* --- Primary: Vibrant Indigo (Light Mode Hue 265, boosted for dark) --- */
--color-primary: oklch(65% 0.22 265);
--color-primary-content: oklch(98% 0.01 265);
/* --- Secondary: Deep Indigo (Similar to Light Mode Primary) --- */
--color-secondary: oklch(45% 0.18 265);
--color-secondary-content: oklch(98% 0.01 265);
/* --- Accent: Vibrant Amber (Light Mode Hue 80) --- */
--color-accent: oklch(75% 0.19 80);
--color-accent-content: oklch(18% 0.04 80);
/* --- Neutral: Warm Graphite --- */
--color-neutral: oklch(25% 0.02 90);
--color-neutral-content: oklch(96% 0.01 90);
/* --- Semantic Colors (Matching Light Mode Hues) --- */
--color-info: oklch(70% 0.15 220); /* Blue */
--color-success: oklch(72% 0.18 150); /* Green */
--color-warning: oklch(80% 0.18 85); /* Orange/Amber */
--color-error: oklch(68% 0.20 25); /* Red */
--color-info-content: oklch(15% 0.05 220);
--color-success-content: oklch(15% 0.05 150);
--color-warning-content: oklch(15% 0.05 85);
--color-error-content: oklch(98% 0.01 25);
/* --- Neobrutalist Structure --- */
--radius-selector: 0rem;
--radius-field: 0rem;
--radius-box: 0rem;
@@ -149,10 +164,10 @@
[data-theme="warm-paper"] {
color-scheme: light;
/* --- Canvas & Surfaces: Warm cream paper (more yellow than light) --- */
--color-base-100: oklch(97% 0.025 85);
--color-base-200: oklch(93% 0.028 83);
--color-base-300: oklch(88% 0.032 80);
/* --- Canvas & Surfaces: Warm cream paper (lighter, less yellow) --- */
--color-base-100: oklch(98.5% 0.01 90);
--color-base-200: oklch(95% 0.015 90);
--color-base-300: oklch(92% 0.02 90);
--color-base-content: oklch(18% 0.015 75);
/* --- Primary: Warm Amber/Gold (the landing page CTA color) --- */

File diff suppressed because one or more lines are too long

View File

@@ -1,4 +1,4 @@
<nav class="sticky top-0 z-10 nb-panel nb-panel-canvas border-t-0">
<nav class="sticky top-0 z-10 nb-panel nb-panel-canvas border-t-0 border-l-0">
<div class="container mx-auto navbar">
<div class="mr-2 flex-1">
{% block navbar_search %}