From df01b3a45281fd92ca9623a672be24d198e71875 Mon Sep 17 00:00:00 2001
From: "Gan, Jimmy" <jimmy.gan@adidas.com>
Date: Sun, 22 Feb 2026 15:03:36 +0800
Subject: [PATCH] Fix Settings page dark mode styling

---
 dashboard/frontend/src/routes/Settings.svelte | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/dashboard/frontend/src/routes/Settings.svelte b/dashboard/frontend/src/routes/Settings.svelte
index acbe893..e75080b 100644
--- a/dashboard/frontend/src/routes/Settings.svelte
+++ b/dashboard/frontend/src/routes/Settings.svelte
@@ -135,12 +135,12 @@
 
 <div class="space-y-6">
   <div>
-    <h1 class="text-2xl font-bold text-surface-900 tracking-tight">Settings</h1>
+    <h1 class="text-2xl font-bold text-surface-900 dark:text-white tracking-tight">Settings</h1>
     <p class="text-sm text-surface-400 mt-1">Account and security settings</p>
   </div>
 
-  <div class="bg-white rounded-xl border border-surface-200 p-6 shadow-sm max-w-md">
-    <h3 class="text-sm font-semibold text-surface-700 mb-4">Change Password</h3>
+  <div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-6 shadow-sm max-w-md">
+    <h3 class="text-sm font-semibold text-surface-700 dark:text-surface-200 mb-4">Change Password</h3>
 
     {#if message}
       <div class="text-sm text-emerald-600 bg-emerald-50 px-3 py-2 rounded-lg mb-4">{message}</div>
@@ -152,15 +152,15 @@
     <form onsubmit={(e) => { e.preventDefault(); changePassword(); }} class="space-y-3">
       <div>
         <label class="block text-xs font-medium text-surface-500 mb-1">Current Password</label>
-        <input type="password" bind:value={currentPassword} required class="w-full px-3 py-2 text-sm border border-surface-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" />
+        <input type="password" bind:value={currentPassword} required class="w-full px-3 py-2 text-sm border border-surface-200 dark:border-surface-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-surface-700 dark:text-white" />
       </div>
       <div>
         <label class="block text-xs font-medium text-surface-500 mb-1">New Password</label>
-        <input type="password" bind:value={newPassword} required class="w-full px-3 py-2 text-sm border border-surface-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" />
+        <input type="password" bind:value={newPassword} required class="w-full px-3 py-2 text-sm border border-surface-200 dark:border-surface-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-surface-700 dark:text-white" />
       </div>
       <div>
         <label class="block text-xs font-medium text-surface-500 mb-1">Confirm New Password</label>
-        <input type="password" bind:value={confirmPassword} required class="w-full px-3 py-2 text-sm border border-surface-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" />
+        <input type="password" bind:value={confirmPassword} required class="w-full px-3 py-2 text-sm border border-surface-200 dark:border-surface-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-surface-700 dark:text-white" />
       </div>
       <button type="submit" disabled={saving} class="w-full px-4 py-2 text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 rounded-lg transition-colors disabled:opacity-50">
         {saving ? "Saving..." : "Change Password"}
@@ -168,8 +168,8 @@
     </form>
   </div>
 
-  <div class="bg-white rounded-xl border border-surface-200 p-6 shadow-sm max-w-md">
-    <h3 class="text-sm font-semibold text-surface-700 mb-4">Passkeys</h3>
+  <div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-6 shadow-sm max-w-md">
+    <h3 class="text-sm font-semibold text-surface-700 dark:text-surface-200 mb-4">Passkeys</h3>
 
     {#if passkeyMsg}
       <div class="text-sm text-emerald-600 bg-emerald-50 px-3 py-2 rounded-lg mb-4">{passkeyMsg}</div>
@@ -181,9 +181,9 @@
     {#if passkeys.length > 0}
       <div class="space-y-2 mb-4">
         {#each passkeys as pk}
-          <div class="flex items-center justify-between px-3 py-2 bg-surface-50 rounded-lg">
+          <div class="flex items-center justify-between px-3 py-2 bg-surface-50 dark:bg-surface-700 rounded-lg">
             <div>
-              <span class="text-sm font-medium text-surface-700">{pk.name}</span>
+              <span class="text-sm font-medium text-surface-700 dark:text-surface-200">{pk.name}</span>
               {#if pk.created_at}
                 <span class="text-xs text-surface-400 ml-2">{new Date(pk.created_at).toLocaleDateString()}</span>
               {/if}
@@ -208,9 +208,9 @@
     </div>
   </div>
 
-  <div class="bg-white rounded-xl border border-surface-200 p-6 shadow-sm">
+  <div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-6 shadow-sm">
     <div class="flex items-center justify-between mb-4">
-      <h3 class="text-sm font-semibold text-surface-700">Audit Log</h3>
+      <h3 class="text-sm font-semibold text-surface-700 dark:text-surface-200">Audit Log</h3>
       <button onclick={loadAuditLog} disabled={auditLoading} class="px-3 py-1.5 text-xs font-medium text-primary-600 bg-primary-50 hover:bg-primary-100 rounded-lg transition-colors disabled:opacity-50">
         {auditLoading ? "Loading..." : auditEntries.length ? "Refresh" : "Load"}
       </button>