From d97ed880314eef3fb83e6e3322099260a3695f5b Mon Sep 17 00:00:00 2001 From: NeilClack Date: Tue, 7 Jul 2026 10:00:00 -0500 Subject: [PATCH] feat: full dark mode with :root.dark and dark: classes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- src/routes/(protected)/(user)/account/+page.svelte | 12 ++++++------ .../(protected)/(user)/account/setup/+page.svelte | 2 +- .../(protected)/(user)/dashboard/+page.svelte | 8 ++++---- .../(protected)/(user)/license-keys/+page.svelte | 10 +++++----- .../(protected)/(user)/proclamations/+page.svelte | 8 ++++---- .../(user)/proclamations/[id]/+page.svelte | 6 +++--- src/routes/(protected)/+layout.svelte | 6 +++--- .../(protected)/admin/categories/+page.svelte | 2 +- src/routes/+layout.svelte | 2 +- src/routes/forgot-password/+page.svelte | 2 +- src/routes/layout.css | 14 +++++++++++++- src/routes/register/+page.svelte | 2 +- src/routes/reset-password/+page.svelte | 2 +- 13 files changed, 44 insertions(+), 32 deletions(-) diff --git a/src/routes/(protected)/(user)/account/+page.svelte b/src/routes/(protected)/(user)/account/+page.svelte index bc80cbd..87872c9 100644 --- a/src/routes/(protected)/(user)/account/+page.svelte +++ b/src/routes/(protected)/(user)/account/+page.svelte @@ -23,7 +23,7 @@ } -
+

Account

@@ -93,7 +93,7 @@
@@ -107,7 +107,7 @@

Addresses

@@ -204,7 +204,7 @@ {#if data.user.profile?.addresses && data.user.profile.addresses.length > 0}
{#each data.user.profile.addresses as address} -
+

{address.street}

{address.city}, {address.state} {address.postalCode} diff --git a/src/routes/(protected)/(user)/account/setup/+page.svelte b/src/routes/(protected)/(user)/account/setup/+page.svelte index d0158b0..3d1a344 100644 --- a/src/routes/(protected)/(user)/account/setup/+page.svelte +++ b/src/routes/(protected)/(user)/account/setup/+page.svelte @@ -43,7 +43,7 @@ - +

Please finish setting up your profile

{#if data.user?.image} Profile diff --git a/src/routes/(protected)/(user)/dashboard/+page.svelte b/src/routes/(protected)/(user)/dashboard/+page.svelte index 82bac86..0a12b34 100644 --- a/src/routes/(protected)/(user)/dashboard/+page.svelte +++ b/src/routes/(protected)/(user)/dashboard/+page.svelte @@ -4,13 +4,13 @@ let { data }: PageProps = $props(); -
+

Welcome, {data.firstName}!

Active License Keys

{data.activeKeys}

@@ -19,7 +19,7 @@

Proclamations

{data.proclamationCount}

@@ -28,7 +28,7 @@

Account

Manage Profile

diff --git a/src/routes/(protected)/(user)/license-keys/+page.svelte b/src/routes/(protected)/(user)/license-keys/+page.svelte index 46d2e24..04dbb5f 100644 --- a/src/routes/(protected)/(user)/license-keys/+page.svelte +++ b/src/routes/(protected)/(user)/license-keys/+page.svelte @@ -4,13 +4,13 @@ let { data }: PageProps = $props(); -
+

License Keys

{#if data.licenseKeys.length > 0} -
- - +
+
+ - + {#each data.licenseKeys as key} {#if data.categories} {#each data.categories as category, i (category.id)} - + {#if category.parentId} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index e923d9b..ae9942f 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -19,6 +19,6 @@ -
+
{@render children()}
diff --git a/src/routes/forgot-password/+page.svelte b/src/routes/forgot-password/+page.svelte index f1cfc30..c890339 100644 --- a/src/routes/forgot-password/+page.svelte +++ b/src/routes/forgot-password/+page.svelte @@ -30,7 +30,7 @@ /> diff --git a/src/routes/layout.css b/src/routes/layout.css index 8b7344b..4053309 100644 --- a/src/routes/layout.css +++ b/src/routes/layout.css @@ -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 */ /* ------------------------------------------------------------------ */ diff --git a/src/routes/register/+page.svelte b/src/routes/register/+page.svelte index db83cef..9305586 100644 --- a/src/routes/register/+page.svelte +++ b/src/routes/register/+page.svelte @@ -32,7 +32,7 @@ - diff --git a/src/routes/reset-password/+page.svelte b/src/routes/reset-password/+page.svelte index 6e7d5da..c58c24a 100644 --- a/src/routes/reset-password/+page.svelte +++ b/src/routes/reset-password/+page.svelte @@ -32,7 +32,7 @@ />
Key @@ -23,7 +23,7 @@
diff --git a/src/routes/(protected)/(user)/proclamations/+page.svelte b/src/routes/(protected)/(user)/proclamations/+page.svelte index e6996ed..140c64b 100644 --- a/src/routes/(protected)/(user)/proclamations/+page.svelte +++ b/src/routes/(protected)/(user)/proclamations/+page.svelte @@ -34,7 +34,7 @@ } -
+

Proclamations

@@ -66,7 +66,7 @@
{category.name}