darkmode is now available

frontend/src/ui/RepoAvatar.tsx

@@ -11,8 +11,8 @@ interface RepoAvatarProps {
 // Consistent color per repo name (not random on each render)
 function hashColor(name: string): string {
   const palette = [
-    '#0052CC', '#00875A', '#FF5630', '#FF8B00',
-    '#6554C0', '#00B8D9', '#36B37E', '#253858',
+    'var(--c-brand)', 'var(--c-success)', '#FF5630', 'var(--c-warning)',
+    '#6554C0', '#00B8D9', '#36B37E', 'var(--c-text)',
   ]
   let hash = 0
   for (let i = 0; i < name.length; i++) hash = (hash * 31 + name.charCodeAt(i)) | 0

frontend/src/ui/Skeleton.tsx

@@ -7,7 +7,7 @@ interface SkeletonProps {
 export function Skeleton({ className }: SkeletonProps) {
   return (
     <div
-      className={cn('animate-pulse rounded bg-[#F4F5F7]', className)}
+      className={cn('animate-pulse rounded bg-[var(--c-surface-muted)]', className)}
       aria-hidden="true"
     />
   )
@@ -17,7 +17,7 @@ export function RepoListSkeleton() {
   return (
     <div className="flex flex-col gap-3" aria-label="Loading repositories">
       {Array.from({ length: 5 }).map((_, i) => (
-        <div key={i} className="flex items-center gap-3 p-4 border border-[#DFE1E6] rounded">
+        <div key={i} className="flex items-center gap-3 p-4 border border-[var(--c-border)] rounded">
           <Skeleton className="size-8 rounded-full shrink-0" />
           <div className="flex-1 flex flex-col gap-2">
             <Skeleton className="h-4 w-48" />
@@ -33,7 +33,7 @@ export function PRListSkeleton() {
   return (
     <div className="flex flex-col gap-2" aria-label="Loading pull requests">
       {Array.from({ length: 6 }).map((_, i) => (
-        <div key={i} className="flex items-center gap-3 p-4 border border-[#DFE1E6] rounded">
+        <div key={i} className="flex items-center gap-3 p-4 border border-[var(--c-border)] rounded">
           <Skeleton className="h-5 w-12 rounded-full shrink-0" />
           <div className="flex-1 flex flex-col gap-2">
             <Skeleton className="h-4 w-64" />

frontend/src/ui/tokens.ts

@@ -8,23 +8,23 @@ export const tokens = {
     xxl: 48, // 48px
   },
   color: {
-    brand:   '#0052CC', // Atlassian Blue
-    brandHover: '#0065FF',
+    brand:   'var(--c-brand)', // Atlassian Blue
+    brandHover: 'var(--c-brand-hover)',
     surface: '#FFFFFF',
-    subtle:  '#F4F5F7',
-    elevated: '#FAFBFC',
-    text:    '#172B4D',
-    muted:   '#5E6C84',
-    border:  '#DFE1E6',
-    borderFocus: '#4C9AFF',
-    danger:  '#DE350B',
-    dangerSubtle: '#FFEBE6',
-    success: '#00875A',
+    subtle:  'var(--c-surface-muted)',
+    elevated: 'var(--c-surface-raised)',
+    text:    'var(--c-text)',
+    muted:   'var(--c-muted)',
+    border:  'var(--c-border)',
+    borderFocus: 'var(--c-brand-focus)',
+    danger:  'var(--c-danger)',
+    dangerSubtle: 'var(--c-danger-tint)',
+    success: 'var(--c-success)',
     successSubtle: '#E3FCEF',
-    warning: '#FF8B00',
+    warning: 'var(--c-warning)',
     warningSubtle: '#FFFAE6',
-    info:    '#0052CC',
-    infoSubtle: '#DEEBFF',
+    info:    'var(--c-brand)',
+    infoSubtle: 'var(--c-brand-tint)',
   },
   sidebar: {
     collapsed: 56,