fix: replace CSS variable inversion with standard Tailwind dark: classes
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
This commit is contained in:
+3
-20
@@ -74,29 +74,12 @@
|
||||
--shadow-2xl: 0 0 #0000;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Dark mode — invert the gray scale */
|
||||
/* Use :root.dark so specificity matches Tailwind's :root, :host */
|
||||
/* ------------------------------------------------------------------ */
|
||||
:root.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;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Dark mode form elements */
|
||||
/* ------------------------------------------------------------------ */
|
||||
:root.dark input,
|
||||
:root.dark select,
|
||||
:root.dark textarea {
|
||||
.dark input,
|
||||
.dark select,
|
||||
.dark textarea {
|
||||
background-color: #1f2937;
|
||||
color: #f9fafb;
|
||||
border-color: #374151;
|
||||
|
||||
Reference in New Issue
Block a user