QT/InvoiceShelf
1
0
Fork 0
mirror of https://github.com/InvoiceShelf/InvoiceShelf.git synced 2026-04-17 18:24:10 +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

16
resources/scripts/components/notifications/NotificationItem.vue
View File

@@ -1,6 +1,6 @@
<template>
<div
:class="success || info ? 'bg-white' : 'bg-red-50'"
:class="success || info ? 'bg-surface' : 'bg-alert-error-bg'"
class="
max-w-sm
mb-3
@@ -21,7 +21,7 @@
<div class="shrink-0">
<svg
v-if="success"
class="w-6 h-6 text-green-400"
class="w-6 h-6 text-alert-success-text"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
@@ -35,7 +35,7 @@
</svg>
<svg
v-if="info"
class="w-6 h-6 text-blue-400"
class="w-6 h-6 text-status-blue"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
@@ -48,7 +48,7 @@
</svg>
<svg
v-if="error"
class="w-6 h-6 text-red-400"
class="w-6 h-6 text-alert-error-text"
fill="currentColor"
viewBox="0 0 24 24"
>
@@ -62,7 +62,7 @@
<div class="flex-1 w-0 ml-3 text-left">
<p
:class="`text-sm leading-5 font-medium ${
success || info ? 'text-gray-900' : 'text-red-800'
success || info ? 'text-heading' : 'text-alert-error-text'
}`"
>
{{
@@ -75,7 +75,7 @@
</p>
<p
:class="`mt-1 text-sm leading-5 ${
success || info ? 'text-gray-500' : 'text-red-700'
success || info ? 'text-muted' : 'text-alert-error-text'
}`"
>
{{
@@ -91,8 +91,8 @@
<button
:class="
success || info
? ' text-gray-400 focus:text-gray-500'
: 'text-red-400 focus:text-red-500'
? ' text-subtle focus:text-muted'
: 'text-alert-error-text focus:text-alert-error-text'
"
class="
inline-flex