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

fix: replace CSS variable inversion with standard Tailwind dark: classes

Browse Source 
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:
NeilClack
2026-07-07 10:27:08 -05:00
parent d97ed88031
commit b87e2b0936
18 changed files with 197 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/reset-password/+page.svelte
+6 -6
View File
@@ -4,11 +4,11 @@
let { form }: PageProps = $props();
</script>
<div class="mx-auto mt-12 max-w-md">
<h1 class="mb-6 text-2xl font-semibold text-gray-900">Reset Password</h1>
<div class="mx-auto mt-12 max-w-md dark:text-gray-100">
<h1 class="mb-6 text-2xl font-semibold text-gray-900 dark:text-gray-100">Reset Password</h1>
{#if form?.error}
<div class="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 text-red-700">
<div class="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 text-red-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
{form.error}
</div>
{/if}
@@ -20,7 +20,7 @@
placeholder="New Password"
required
minlength="8"
class="rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
class="rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-gray-600"
/>
<input
type="password"
@@ -28,11 +28,11 @@
placeholder="Confirm New Password"
required
minlength="8"
class="rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
class="rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-gray-600"
/>
<button
type="submit"
class="rounded-lg bg-blue-600 px-4 py-2 font-medium text-white dark:text-gray-950 transition-colors hover:bg-blue-700"
class="rounded-lg bg-blue-600 px-4 py-2 font-medium text-white transition-colors hover:bg-blue-700 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600"
>
Reset Password
</button>