Add dark mode with CSS custom property theme system

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

View File

@@ -39,7 +39,7 @@
<BaseDropdown v-if="isNotSystemDisk(row.data)">
<template #activator>
<div class="inline-block">
<BaseIcon name="EllipsisHorizontalIcon" class="text-gray-500" />
<BaseIcon name="EllipsisHorizontalIcon" class="text-muted" />
</div>
</template>
@@ -56,7 +56,7 @@
v-if="row.data.type !== 'SYSTEM'"
@click="openEditDiskModal(row.data)"
>
<BaseIcon name="PencilIcon" class="mr-3 text-gray-600" />
<BaseIcon name="PencilIcon" class="mr-3 text-body" />
{{ $t('general.edit') }}
</BaseDropdownItem>
@@ -65,7 +65,7 @@
v-if="row.data.type !== 'SYSTEM' && !row.data.set_as_default"
@click="removeDisk(row.data.id)"
>
<BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
<BaseIcon name="TrashIcon" class="mr-3 text-body" />
{{ $t('general.delete') }}
</BaseDropdownItem>
</BaseDropdown>
@@ -109,26 +109,26 @@ const fileDiskColumns = computed(() => {
key: 'name',
label: t('settings.disk.disk_name'),
thClass: 'extra',
tdClass: 'font-medium text-gray-900',
tdClass: 'font-medium text-heading',
},
{
key: 'driver',
label: t('settings.disk.filesystem_driver'),
thClass: 'extra',
tdClass: 'font-medium text-gray-900',
tdClass: 'font-medium text-heading',
},
{
key: 'type',
label: t('settings.disk.disk_type'),
thClass: 'extra',
tdClass: 'font-medium text-gray-900',
tdClass: 'font-medium text-heading',
},
{
key: 'set_as_default',
label: t('settings.disk.is_default'),
thClass: 'extra',
tdClass: 'font-medium text-gray-900',
tdClass: 'font-medium text-heading',
},
{
key: 'actions',