RadiantWaveTech/portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: full dark mode with :root.dark and dark: classes

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/(protected)/(user)/account/+page.svelte
+6 -6
View File
@@ -23,7 +23,7 @@
}
</script>
<div class="flex h-full min-h-0 flex-col gap-8 p-6">
<div class="flex h-full min-h-0 flex-col gap-8 p-6 dark:bg-gray-950">
<h1 class="text-2xl font-semibold text-gray-900">Account</h1>
<!-- Email (read-only) -->
@@ -93,7 +93,7 @@
<div>
<button
type="submit"
class="rounded-lg bg-blue-600 px-4 py-2 font-medium text-white transition-colors hover:bg-blue-700"
class="rounded-lg bg-blue-600 px-4 py-2 font-medium text-white dark:text-gray-950 transition-colors hover:bg-blue-700"
>
Save Profile
</button>
@@ -107,7 +107,7 @@
<h2 class="text-lg font-medium text-gray-900">Addresses</h2>
<button
type="button"
class="rounded-lg bg-green-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-green-700"
class="rounded-lg bg-green-600 px-3 py-1.5 text-sm font-medium text-white dark:text-gray-950 transition-colors hover:bg-green-700"
onclick={() => (showAddressForm = !showAddressForm)}
>
{showAddressForm ? 'Cancel' : 'Add Address'}
@@ -129,7 +129,7 @@
<form
method="POST"
action="?/addAddress"
class="mb-6 max-w-lg rounded-lg border border-gray-200 bg-gray-50 p-4"
class="mb-6 max-w-lg rounded-lg border border-gray-200 dark:border-gray-300 bg-gray-50 dark:bg-gray-200 p-4"
>
<div class="flex flex-col gap-3">
<div>
@@ -192,7 +192,7 @@
<div>
<button
type="submit"
class="rounded-lg bg-blue-600 px-4 py-2 font-medium text-white transition-colors hover:bg-blue-700"
class="rounded-lg bg-blue-600 px-4 py-2 font-medium text-white dark:text-gray-950 transition-colors hover:bg-blue-700"
>
Save Address
</button>
@@ -204,7 +204,7 @@
{#if data.user.profile?.addresses && data.user.profile.addresses.length > 0}
<div class="flex flex-col gap-3">
{#each data.user.profile.addresses as address}
<div class="rounded-lg border border-gray-200 bg-white p-4">
<div class="rounded-lg border border-gray-200 bg-white dark:bg-gray-100 p-4">
<p class="text-sm text-gray-900">{address.street}</p>
<p class="text-sm text-gray-600">
{address.city}, {address.state} {address.postalCode}