NeilClack
b87e2b0936
The :root.dark CSS variable inversion caused contrast problems -
text-gray-900 and bg-gray-950 both became light in dark mode, making
text invisible on backgrounds.
Fix:
- Remove :root.dark { --color-gray-*: ... } block from layout.css
- Change :root.dark selector to .dark for form element styles
- Add standard Tailwind dark: classes throughout every .svelte page
- dark:bg-gray-950 (page backgrounds)
- dark:bg-gray-900 (card/surface backgrounds)
- dark:bg-gray-800 (table headers, elevated surfaces, active nav links)
- dark:bg-gray-700 (primary buttons)
- dark:text-gray-100 (primary text)
- dark:text-gray-300 (secondary text, labels)
- dark:text-gray-400 (muted text, inactive nav links, links)
- dark:border-gray-700 (borders)
- dark:border-gray-600 (input borders)
- dark:hover:bg-gray-800 (sidebar hover)
- dark:hover:bg-gray-600 (button hover)
- dark:prose-invert (rich text content)
- TopBar: full dark mode support (bg, links, toggle button)
- Sidebar: all nav links, active states, admin submenu get dark mode
- Auth pages (login, register, forgot, reset): full dark mode
- Protected pages (dashboard, account, setup, license-keys,
proclamations, categories): full dark mode
- Home page, error page, admin page: dark:text-gray-100
97 lines
3.4 KiB
CSS
97 lines
3.4 KiB
CSS
@import 'tailwindcss';
|
|
@plugin '@tailwindcss/forms';
|
|
@plugin '@tailwindcss/typography';
|
|
|
|
/* Use class-based dark mode instead of prefers-color-scheme */
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Wireframe base — remap all non-gray colors to grayscale */
|
|
/* Use var(--color-gray-N) so dark-mode inversion flows through */
|
|
/* ------------------------------------------------------------------ */
|
|
@theme {
|
|
--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);
|
|
|
|
--radius: 0px;
|
|
--radius-sm: 0px;
|
|
--radius-md: 0px;
|
|
--radius-lg: 0px;
|
|
--radius-xl: 0px;
|
|
--radius-2xl: 0px;
|
|
--radius-3xl: 0px;
|
|
|
|
--shadow-sm: 0 0 #0000;
|
|
--shadow: 0 0 #0000;
|
|
--shadow-md: 0 0 #0000;
|
|
--shadow-lg: 0 0 #0000;
|
|
--shadow-xl: 0 0 #0000;
|
|
--shadow-2xl: 0 0 #0000;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Dark mode form elements */
|
|
/* ------------------------------------------------------------------ */
|
|
.dark input,
|
|
.dark select,
|
|
.dark textarea {
|
|
background-color: #1f2937;
|
|
color: #f9fafb;
|
|
border-color: #374151;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Force-disable transitions, animations, and remaining decoration */
|
|
/* ------------------------------------------------------------------ */
|
|
*,
|
|
::before,
|
|
::after {
|
|
transition: none !important;
|
|
animation: none !important;
|
|
}
|