feat: full dark mode with :root.dark and dark: classes
layout.css - Change .dark → :root.dark so variable overrides match Tailwind's :root, :host specificity and actually take effect - Add global dark mode styles for input/select/textarea elements All .svelte files: - bg-white → bg-white dark:bg-gray-100 (cards, tables, containers) - text-white → text-white dark:text-gray-950 (button text) - Add dark:bg-gray-950 to main page containers (dashboard, account, license-keys, proclamations, proclamations/[id]) - Add dark:border-gray-300 to bordered elements (cards, tables, forms) - Add dark:bg-gray-200 to secondary backgrounds (table headers, address form, price badges) - Add dark:hover:bg-gray-300 / dark:hover:bg-gray-700 to hover states (sidebar nav links, clear button, admin categories table)
This commit is contained in:
+13
-1
@@ -76,8 +76,9 @@
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Dark mode — invert the gray scale */
|
||||
/* Use :root.dark so specificity matches Tailwind's :root, :host */
|
||||
/* ------------------------------------------------------------------ */
|
||||
.dark {
|
||||
:root.dark {
|
||||
--color-gray-50: #030712;
|
||||
--color-gray-100: #111827;
|
||||
--color-gray-200: #1f2937;
|
||||
@@ -90,6 +91,17 @@
|
||||
--color-gray-900: #f9fafb;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Dark mode form elements */
|
||||
/* ------------------------------------------------------------------ */
|
||||
:root.dark input,
|
||||
:root.dark select,
|
||||
:root.dark textarea {
|
||||
background-color: #1f2937;
|
||||
color: #f9fafb;
|
||||
border-color: #374151;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Force-disable transitions, animations, and remaining decoration */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
Reference in New Issue
Block a user