some edits

src/assets/styles/admin.css

@@ -42,7 +42,7 @@
   font-weight: 600;
   font-size: 0.8125rem;
   color: var(--color-text-muted);
-  background: #f8fafc;
+  background: var(--color-bg);
   border-bottom: 1px solid var(--color-border);
   white-space: nowrap;
 }
@@ -51,6 +51,7 @@
   padding: 13px 16px;
   border-bottom: 1px solid var(--color-border-light);
   vertical-align: middle;
+  color: var(--color-text);
 }
 
 .admin-table tbody tr {
@@ -58,7 +59,7 @@
 }
 
 .admin-table tbody tr:hover {
-  background: #f8fafc;
+  background: var(--color-border-light);
 }
 
 .admin-table tbody tr.is-selected {
@@ -262,13 +263,13 @@
 }
 
 .admin-badge--neutral {
-  background: #f1f5f9;
-  color: #64748b;
+  background: var(--color-border-light);
+  color: var(--color-text-muted);
 }
 
 .admin-badge--delivered {
-  background: #ecfdf5;
-  color: #059669;
+  background: var(--color-success-light);
+  color: var(--color-success-dark);
 }
 
 .admin-tabs {
@@ -597,7 +598,12 @@
 }
 
 .admin-skeleton {
-  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
+  background: linear-gradient(
+    90deg,
+    var(--color-border-light) 25%,
+    var(--color-border) 50%,
+    var(--color-border-light) 75%
+  );
   background-size: 200% 100%;
   animation: admin-skeleton 1.2s ease-in-out infinite;
   border-radius: var(--radius-sm);

src/assets/styles/main.css

@@ -50,6 +50,39 @@
   --focus-ring: 0 0 0 3px rgba(23, 55, 159, 0.14);
 }
 
+html.dark {
+  --color-primary: #6b8cff;
+  --color-primary-hover: #8aa4ff;
+  --color-primary-soft: #1a2744;
+  --color-sidebar-bg: #0d1320;
+  --color-sidebar-active: #1a2540;
+  --color-sidebar-hover: #162038;
+  --color-success: #34d399;
+  --color-success-light: #0f2e24;
+  --color-success-dark: #6ee7b7;
+  --color-warning: #fbbf24;
+  --color-warning-light: #3a2e14;
+  --color-warning-dark: #fcd34d;
+  --color-danger: #f87171;
+  --color-danger-light: #3f1d22;
+  --color-purple: #a78bfa;
+  --color-purple-light: #2a2144;
+  --color-info: #6b8cff;
+  --color-info-light: #1a2744;
+  --color-bg: #0f1419;
+  --color-surface: #171c24;
+  --color-border: #2a3341;
+  --color-border-light: #222a36;
+  --color-text: #e8edf5;
+  --color-text-muted: #94a3b8;
+  --color-text-secondary: #64748b;
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
+  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.35);
+  --btn-primary-bg: #334155;
+  --btn-primary-hover: #475569;
+  --focus-ring: 0 0 0 3px rgba(107, 140, 255, 0.28);
+}
+
 *,
 *::before,
 *::after {