feat: Themes added, 4 themes available (3 dark, 1 light)

frontend/src/components/qsl/QslDesignerModal.tsx

@@ -233,7 +233,7 @@ export function QslDesignerModal({ open, onClose }: Props) {
       <DialogContent className="max-w-[1260px]">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
-            <Sparkles className="size-5 text-amber-500" />
+            <Sparkles className="size-5 text-warning" />
             QSL card designer
             {view !== 'home' && (
               <Button variant="ghost" size="sm" className="ml-2 h-7 px-2 text-xs"
@@ -246,7 +246,7 @@ export function QslDesignerModal({ open, onClose }: Props) {
 
         <div className="max-h-[78vh] space-y-4 overflow-y-auto px-6 py-5">
         {error && (
-          <div className="rounded border border-red-300 bg-red-50 px-3 py-1.5 text-sm text-red-700">{error}</div>
+          <div className="rounded border border-destructive bg-destructive-muted px-3 py-1.5 text-sm text-destructive-muted-foreground">{error}</div>
         )}
 
         {view === 'home' && (
@@ -284,7 +284,7 @@ export function QslDesignerModal({ open, onClose }: Props) {
                       : <div className="flex h-28 items-center justify-center rounded bg-muted text-xs text-muted-foreground">no preview</div>}
                     <div className="mt-1.5 flex items-center justify-between gap-1">
                       <span className="truncate text-sm font-medium">
-                        {t.is_default && <Star className="mr-1 inline size-3.5 fill-amber-400 text-amber-400" />}
+                        {t.is_default && <Star className="mr-1 inline size-3.5 fill-warning text-warning" />}
                         {t.name}
                       </span>
                       <span className="flex shrink-0 gap-0.5">
@@ -299,7 +299,7 @@ export function QslDesignerModal({ open, onClose }: Props) {
                           </Button>
                         )}
                         <Button variant="ghost" size="sm"
-                          className={`h-7 p-0 ${deleteArm === t.id ? 'w-auto px-1.5 text-red-600' : 'w-7'}`}
+                          className={`h-7 p-0 ${deleteArm === t.id ? 'w-auto px-1.5 text-destructive' : 'w-7'}`}
                           title="Delete" onClick={() => removeTemplate(t.id)}>
                           {deleteArm === t.id ? <span className="text-xs">Sure?</span> : <Trash2 className="size-3.5" />}
                         </Button>
@@ -323,7 +323,7 @@ export function QslDesignerModal({ open, onClose }: Props) {
               {proposals.map((p, i) => (
                 <button
                   key={i}
-                  className="rounded-md border-2 border-transparent p-1 transition hover:border-sky-400"
+                  className="rounded-md border-2 border-transparent p-1 transition hover:border-info"
                   onClick={() => openEditor(0, p.template, p.model, p.assets)}
                 >
                   <CardPreview model={p.model} assets={p.assets} width={352} />