QT/InvoiceShelf
1
0
Fork 0
mirror of https://github.com/InvoiceShelf/InvoiceShelf.git synced 2026-04-23 21:24:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add dark mode with CSS custom property theme system

Browse Source 
Define 13 semantic color tokens (surface, text, border, hover) with
light/dark values in themes.css. Register with Tailwind via @theme inline.
Migrate all 335 Vue files from hardcoded gray/white classes to semantic
tokens. Add theme toggle (sun/moon/system) in user avatar dropdown.
Replace @tailwindcss/forms with custom form reset using theme vars.
Add status badge and alert tokens for dark mode. Theme-aware chart
grid/labels, skeleton placeholders, and editor. Inline script in
<head> prevents flash of wrong theme on load.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Darko Gjorgjijoski
2026-04-04 02:05:00 +02:00
parent 7fbe3d85a3
commit 88adfe0e50
221 changed files with 1265 additions and 982 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/scripts/admin/views/auth/ForgotPassword.vue
View File

@@ -32,7 +32,7 @@
<div class="mt-4 mb-4 text-sm">
<router-link
to="/login"
class="text-sm text-primary-400 hover:text-gray-700"
class="text-sm text-primary-400 hover:text-body"
>
{{ $t('general.back_to_login') }}
</router-link>

4
resources/scripts/admin/views/auth/Login.vue
View File

@@ -32,7 +32,7 @@
<template #right>
<BaseIcon
:name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
class="mr-1 text-gray-500 cursor-pointer"
class="mr-1 text-muted cursor-pointer"
@click="isShowPassword = !isShowPassword"
/>
</template>
@@ -43,7 +43,7 @@
<div class="mb-4">
<router-link
to="forgot-password"
class="text-sm text-primary-400 hover:text-gray-700"
class="text-sm text-primary-400 hover:text-body"
>
{{ $t('login.forgot_password') }}
</router-link>

14
resources/scripts/admin/views/auth/RegisterWithInvitation.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="flex items-center justify-center min-h-screen bg-gray-50">
<div class="flex items-center justify-center min-h-screen bg-surface-secondary">
<div class="w-full max-w-md p-8">
<!-- Logo -->
<div class="mb-8 text-center">
@@ -16,7 +16,7 @@
<!-- Loading -->
<div v-if="isLoading" class="text-center">
<p class="text-gray-500">Loading invitation details...</p>
<p class="text-muted">Loading invitation details...</p>
</div>
<!-- Invalid/Expired -->
@@ -25,10 +25,10 @@
name="ExclamationCircleIcon"
class="w-16 h-16 mx-auto text-red-400 mb-4"
/>
<h1 class="text-xl font-semibold text-gray-900 mb-2">
<h1 class="text-xl font-semibold text-heading mb-2">
Invalid Invitation
</h1>
<p class="text-gray-500">{{ error }}</p>
<p class="text-muted">{{ error }}</p>
<router-link to="/login" class="text-primary-500 mt-4 inline-block">
Go to Login
</router-link>
@@ -37,10 +37,10 @@
<!-- Registration Form -->
<div v-else>
<div class="text-center mb-6">
<h1 class="text-2xl font-semibold text-gray-900">
<h1 class="text-2xl font-semibold text-heading">
Create Your Account
</h1>
<p class="text-gray-500 mt-2">
<p class="text-muted mt-2">
You've been invited to join
<strong>{{ invitationDetails.company_name }}</strong> as
<strong>{{ invitationDetails.role_name }}</strong>
@@ -112,7 +112,7 @@
</BaseCard>
<div class="text-center mt-4">
<router-link to="/login" class="text-sm text-gray-500 hover:text-primary-500">
<router-link to="/login" class="text-sm text-muted hover:text-primary-500">
Already have an account? Log in
</router-link>
</div>