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:
@@ -29,7 +29,7 @@
|
||||
href={link.href}
|
||||
class="rounded px-3 py-1.5 text-sm font-medium transition-colors {isActive(link.href)
|
||||
? 'bg-blue-50 text-blue-700'
|
||||
: 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'}"
|
||||
: 'text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:hover:bg-gray-300 dark:hover:text-gray-100'}"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
@@ -40,7 +40,7 @@
|
||||
href="/admin"
|
||||
class="rounded px-3 py-1.5 text-sm font-medium transition-colors {isActive('/admin')
|
||||
? 'bg-blue-50 text-blue-700'
|
||||
: 'text-gray-700 hover:bg-gray-50 hover:text-gray-900'}"
|
||||
: 'text-gray-700 hover:bg-gray-50 hover:text-gray-900 dark:hover:bg-gray-300 dark:hover:text-gray-100'}"
|
||||
>
|
||||
Admin Panel
|
||||
</a>
|
||||
@@ -52,7 +52,7 @@
|
||||
'/admin/' + model.slug
|
||||
)
|
||||
? 'bg-blue-50 text-blue-700'
|
||||
: 'text-blue-600 hover:bg-gray-50 hover:text-blue-800'}"
|
||||
: 'text-blue-600 hover:bg-gray-50 hover:text-blue-800 dark:hover:bg-gray-300 dark:hover:text-gray-100'}"
|
||||
>
|
||||
{model.displayName}
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user