NeilClack
b87e2b0936
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
51 lines
2.0 KiB
Svelte
51 lines
2.0 KiB
Svelte
<script lang="ts">
|
|
import Window from '$lib/components/containers/Window.svelte';
|
|
import { authClient } from '$lib/auth-client';
|
|
import type { PageProps } from './$types';
|
|
|
|
let { form }: PageProps = $props();
|
|
</script>
|
|
|
|
<Window>
|
|
<div class="dark:text-gray-100">
|
|
{#if form?.success}
|
|
<div class="mx-auto max-w-md text-center">
|
|
<div
|
|
class="rounded-lg border border-green-200 bg-green-50 p-6 text-green-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300"
|
|
>
|
|
<p class="text-lg font-medium">Account created!</p>
|
|
<p class="mt-2">
|
|
We've sent a verification email. Check your inbox and click the link to verify your
|
|
email address, then log in.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{:else}
|
|
<div class="flex flex-col items-start justify-center">
|
|
{#if form?.error}
|
|
<div class="mb-4 w-full 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}
|
|
<form method="POST" class="flex flex-col items-start">
|
|
<input type="text" name="firstName" placeholder="First Name" required class="mb-2" />
|
|
<input type="text" name="lastName" placeholder="Last Name" required class="mb-2" />
|
|
<input type="email" name="email" placeholder="Email Address" required class="mb-2" />
|
|
<input type="password" name="password" placeholder="Password" required class="mb-2" />
|
|
<input type="password" name="password2" placeholder="Verify Password" required class="mb-2" />
|
|
<button type="submit" class="mx-auto rounded-full bg-blue-600 px-6 py-2 text-white dark:bg-gray-700 dark:text-gray-100"
|
|
>Submit</button
|
|
>
|
|
</form>
|
|
<p class=" mx-auto my-6 text-center">Or</p>
|
|
<button
|
|
class="mx-auto"
|
|
onclick={async () => {
|
|
await authClient.signIn.social({ provider: 'google', callbackURL: '/account/setup' });
|
|
}}><img src="light/web_light_sq_SU.svg" alt="Sign Up with Google" /></button
|
|
>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</Window>
|