QT/InvoiceShelf
1
0
Fork 0
mirror of https://github.com/InvoiceShelf/InvoiceShelf.git synced 2026-04-15 17: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/base/BaseSelectInput.vue
View File

@@ -12,7 +12,7 @@
>
<ListboxLabel
v-if="label"
class="block text-sm not-italic font-medium text-gray-800 mb-0.5"
class="block text-sm not-italic font-medium text-heading mb-0.5"
>
{{ label }}
</ListboxLabel>
@@ -27,8 +27,8 @@
pl-3
pr-10
text-left
bg-white
border border-gray-200
bg-surface
border border-line-default
rounded-md
shadow-xs
cursor-default
@@ -42,10 +42,10 @@
<span v-if="getValue(selectedValue)" class="block truncate">
{{ getValue(selectedValue) }}
</span>
<span v-else-if="placeholder" class="block text-gray-400 truncate">
<span v-else-if="placeholder" class="block text-subtle truncate">
{{ placeholder }}
</span>
<span v-else class="block text-gray-400 truncate">
<span v-else class="block text-subtle truncate">
Please select an option
</span>
@@ -62,7 +62,7 @@
>
<BaseIcon
name="SelectorIcon"
class="text-gray-400"
class="text-subtle"
aria-hidden="true"
/>
</span>
@@ -82,7 +82,7 @@
mt-1
overflow-auto
text-base
bg-white
bg-surface
rounded-md
shadow-lg
max-h-60
@@ -100,7 +100,7 @@
>
<li
:class="[
active ? 'text-white bg-primary-600' : 'text-gray-900',
active ? 'text-white bg-primary-600' : 'text-heading',
'cursor-default select-none relative py-2 pl-3 pr-9',
]"
>