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:

NeilClack

2026-07-07 10:00:00 -05:00

parent 03ecfbd635

commit d97ed88031

13 changed files with 44 additions and 32 deletions

									
										src/routes/+layout.svelte
									
		+1
		-1
	
												View File
												
				@@ -19,6 +19,6 @@

				</svelte:head>

				<TopBar userRoleId={data.userRoleId} />

				<div class="flex min-h-0 flex-1 px-8">

				<div class="flex min-h-0 flex-1 px-8 dark:bg-gray-950 dark:text-gray-100">

					{@render children()}

				</div>