feat: add dark/light mode toggle
- Add blocking inline script in app.html that reads localStorage
'theme' and applies .dark class before render (no flash)
- Invert gray scale in .dark via CSS custom properties so all
grayscale colors reverse automatically (light becomes dark)
- Add @custom-variant dark to enable dark: utility classes
- Add border-button toggle ("Dark"/"Light") in TopBar far right
- Persist preference in localStorage
This commit is contained in:
NeilClack
+68
-55
@@ -2,64 +2,62 @@
|
||||
@plugin '@tailwindcss/forms';
|
||||
@plugin '@tailwindcss/typography';
|
||||
|
||||
/* Use class-based dark mode instead of prefers-color-scheme */
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Wireframe theme — remap all non-gray colors to grayscale */
|
||||
/* Wireframe base — remap all non-gray colors to grayscale */
|
||||
/* Use var(--color-gray-N) so dark-mode inversion flows through */
|
||||
/* ------------------------------------------------------------------ */
|
||||
@theme {
|
||||
/* blue → gray */
|
||||
--color-blue-50: #f3f4f6;
|
||||
--color-blue-100: #e5e7eb;
|
||||
--color-blue-200: #d1d5db;
|
||||
--color-blue-300: #9ca3af;
|
||||
--color-blue-400: #6b7280;
|
||||
--color-blue-500: #6b7280;
|
||||
--color-blue-600: #4b5563;
|
||||
--color-blue-700: #374151;
|
||||
--color-blue-800: #1f2937;
|
||||
/* green → gray */
|
||||
--color-green-50: #f3f4f6;
|
||||
--color-green-100: #e5e7eb;
|
||||
--color-green-200: #d1d5db;
|
||||
--color-green-300: #9ca3af;
|
||||
--color-green-400: #6b7280;
|
||||
--color-green-500: #6b7280;
|
||||
--color-green-600: #4b5563;
|
||||
--color-green-700: #374151;
|
||||
--color-green-800: #1f2937;
|
||||
/* red → gray */
|
||||
--color-red-50: #f3f4f6;
|
||||
--color-red-100: #e5e7eb;
|
||||
--color-red-200: #d1d5db;
|
||||
--color-red-300: #9ca3af;
|
||||
--color-red-400: #6b7280;
|
||||
--color-red-500: #6b7280;
|
||||
--color-red-600: #4b5563;
|
||||
--color-red-700: #374151;
|
||||
--color-red-800: #1f2937;
|
||||
/* purple → gray */
|
||||
--color-purple-50: #f3f4f6;
|
||||
--color-purple-100: #e5e7eb;
|
||||
--color-purple-200: #d1d5db;
|
||||
--color-purple-300: #9ca3af;
|
||||
--color-purple-400: #6b7280;
|
||||
--color-purple-500: #6b7280;
|
||||
--color-purple-600: #4b5563;
|
||||
--color-purple-700: #374151;
|
||||
--color-purple-800: #1f2937;
|
||||
--color-purple-900: #111827;
|
||||
/* slate → gray */
|
||||
--color-slate-50: #f8fafc;
|
||||
--color-slate-100: #f1f5f9;
|
||||
--color-slate-200: #e2e8f0;
|
||||
--color-slate-300: #cbd5e1;
|
||||
--color-slate-400: #94a3b8;
|
||||
--color-slate-500: #64748b;
|
||||
--color-slate-600: #475569;
|
||||
--color-slate-700: #334155;
|
||||
--color-slate-800: #1e293b;
|
||||
--color-slate-900: #111827;
|
||||
--color-blue-50: var(--color-gray-100);
|
||||
--color-blue-100: var(--color-gray-200);
|
||||
--color-blue-200: var(--color-gray-300);
|
||||
--color-blue-300: var(--color-gray-400);
|
||||
--color-blue-400: var(--color-gray-500);
|
||||
--color-blue-500: var(--color-gray-500);
|
||||
--color-blue-600: var(--color-gray-600);
|
||||
--color-blue-700: var(--color-gray-700);
|
||||
--color-blue-800: var(--color-gray-800);
|
||||
--color-green-50: var(--color-gray-100);
|
||||
--color-green-100: var(--color-gray-200);
|
||||
--color-green-200: var(--color-gray-300);
|
||||
--color-green-300: var(--color-gray-400);
|
||||
--color-green-400: var(--color-gray-500);
|
||||
--color-green-500: var(--color-gray-500);
|
||||
--color-green-600: var(--color-gray-600);
|
||||
--color-green-700: var(--color-gray-700);
|
||||
--color-green-800: var(--color-gray-800);
|
||||
--color-red-50: var(--color-gray-100);
|
||||
--color-red-100: var(--color-gray-200);
|
||||
--color-red-200: var(--color-gray-300);
|
||||
--color-red-300: var(--color-gray-400);
|
||||
--color-red-400: var(--color-gray-500);
|
||||
--color-red-500: var(--color-gray-500);
|
||||
--color-red-600: var(--color-gray-600);
|
||||
--color-red-700: var(--color-gray-700);
|
||||
--color-red-800: var(--color-gray-800);
|
||||
--color-purple-50: var(--color-gray-100);
|
||||
--color-purple-100: var(--color-gray-200);
|
||||
--color-purple-200: var(--color-gray-300);
|
||||
--color-purple-300: var(--color-gray-400);
|
||||
--color-purple-400: var(--color-gray-500);
|
||||
--color-purple-500: var(--color-gray-500);
|
||||
--color-purple-600: var(--color-gray-600);
|
||||
--color-purple-700: var(--color-gray-700);
|
||||
--color-purple-800: var(--color-gray-800);
|
||||
--color-purple-900: var(--color-gray-900);
|
||||
--color-slate-50: var(--color-gray-50);
|
||||
--color-slate-100: var(--color-gray-100);
|
||||
--color-slate-200: var(--color-gray-200);
|
||||
--color-slate-300: var(--color-gray-300);
|
||||
--color-slate-400: var(--color-gray-400);
|
||||
--color-slate-500: var(--color-gray-500);
|
||||
--color-slate-600: var(--color-gray-600);
|
||||
--color-slate-700: var(--color-gray-700);
|
||||
--color-slate-800: var(--color-gray-800);
|
||||
--color-slate-900: var(--color-gray-900);
|
||||
|
||||
/* zero out decorative radii */
|
||||
--radius: 0px;
|
||||
--radius-sm: 0px;
|
||||
--radius-md: 0px;
|
||||
@@ -68,7 +66,6 @@
|
||||
--radius-2xl: 0px;
|
||||
--radius-3xl: 0px;
|
||||
|
||||
/* zero out shadows */
|
||||
--shadow-sm: 0 0 #0000;
|
||||
--shadow: 0 0 #0000;
|
||||
--shadow-md: 0 0 #0000;
|
||||
@@ -77,6 +74,22 @@
|
||||
--shadow-2xl: 0 0 #0000;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Dark mode — invert the gray scale */
|
||||
/* ------------------------------------------------------------------ */
|
||||
.dark {
|
||||
--color-gray-50: #030712;
|
||||
--color-gray-100: #111827;
|
||||
--color-gray-200: #1f2937;
|
||||
--color-gray-300: #374151;
|
||||
--color-gray-400: #4b5563;
|
||||
--color-gray-500: #6b7280;
|
||||
--color-gray-600: #9ca3af;
|
||||
--color-gray-700: #d1d5db;
|
||||
--color-gray-800: #e5e7eb;
|
||||
--color-gray-900: #f9fafb;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Force-disable transitions, animations, and remaining decoration */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
Reference in New Issue
Block a user