diff --git a/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx b/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx
index 4d3185fb..979bb636 100644
--- a/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx
+++ b/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx
@@ -1559,13 +1559,36 @@ function buildArtifactViewerSrcDoc({
   <meta name="viewport" content="width=device-width,initial-scale=1" />
   <style>
     :root {
-      --bg: #f8f9fb;
-      --panel: #ffffff;
-      --text: #0f172a;
-      --muted: #667085;
-      --line: #e4e7ec;
+      --ws-color-f8f9fb: rgb(248 249 251);
+      --ws-color-ffffff: rgb(255 255 255);
+      --ws-color-0f172a: rgb(15 23 42);
+      --ws-color-667085: rgb(102 112 133);
+      --ws-color-e4e7ec: rgb(228 231 236);
+      --ws-color-f4f4f5: rgb(244 244 245);
+      --ws-color-000000: rgb(0 0 0);
+      --ws-color-2563eb: rgb(37 99 235);
+      --bg: var(--ws-color-f8f9fb);
+      --panel: var(--ws-color-ffffff);
+      --text: var(--ws-color-0f172a);
+      --muted: var(--ws-color-667085);
+      --line: var(--ws-color-e4e7ec);
+      --checker: var(--ws-color-f4f4f5);
+      --media-bg: var(--ws-color-000000);
+      --link: var(--ws-color-2563eb);
       --radius: 12px;
     }
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --ws-color-f8f9fb: rgb(32 36 44);
+        --ws-color-ffffff: rgb(42 39 49);
+        --ws-color-0f172a: rgb(230 234 242);
+        --ws-color-667085: rgb(152 162 179);
+        --ws-color-e4e7ec: rgb(58 61 69);
+        --ws-color-f4f4f5: rgb(44 47 56);
+        --ws-color-000000: rgb(0 0 0);
+        --ws-color-2563eb: rgb(127 178 255);
+      }
+    }
     * { box-sizing: border-box; }
     html, body {
       width: 100%;
@@ -1599,13 +1622,13 @@ function buildArtifactViewerSrcDoc({
       object-fit: contain;
       object-position: center;
       background:
-        linear-gradient(45deg, #f4f4f5 25%, transparent 25%, transparent 75%, #f4f4f5 75%, #f4f4f5) 0 0/16px 16px,
-        linear-gradient(45deg, #f4f4f5 25%, transparent 25%, transparent 75%, #f4f4f5 75%, #f4f4f5) 8px 8px/16px 16px,
-        #fff;
+        linear-gradient(45deg, var(--checker) 25%, transparent 25%, transparent 75%, var(--checker) 75%, var(--checker)) 0 0/16px 16px,
+        linear-gradient(45deg, var(--checker) 25%, transparent 25%, transparent 75%, var(--checker) 75%, var(--checker)) 8px 8px/16px 16px,
+        var(--panel);
     }
     .media {
       object-fit: contain;
-      background: #000;
+      background: var(--media-bg);
     }
     .frame {
       border: 1px solid var(--line);
@@ -1648,7 +1671,7 @@ function buildArtifactViewerSrcDoc({
       color: var(--muted);
     }
     .link {
-      color: #2563eb;
+      color: var(--link);
       text-decoration: none;
       font-weight: 600;
     }
diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
index 6daf1299..e56b10fa 100644
--- a/frontend/src/styles/globals.css
+++ b/frontend/src/styles/globals.css
@@ -213,6 +213,12 @@
   --color-ws-000000c5: var(--ws-color-000000c5);
   --color-ws-00000015: var(--ws-color-00000015);
   --color-ws-1500331a: var(--ws-color-1500331a);
+  --color-ws-f8f9fb: var(--ws-color-f8f9fb);
+  --color-ws-ffffff: var(--ws-color-ffffff);
+  --color-ws-0f172a: var(--ws-color-0f172a);
+  --color-ws-f4f4f5: var(--ws-color-f4f4f5);
+  --color-ws-000000: var(--ws-color-000000);
+  --color-ws-2563eb: var(--ws-color-2563eb);
   --animate-aurora: aurora 8s ease-in-out infinite alternate;
 
   @keyframes aurora {
@@ -313,6 +319,12 @@
   --ws-color-000000c5: #000000c5;
   --ws-color-00000015: #00000015;
   --ws-color-1500331a: #1500331a;
+  --ws-color-f8f9fb: #f8f9fb;
+  --ws-color-ffffff: #ffffff;
+  --ws-color-0f172a: #0f172a;
+  --ws-color-f4f4f5: #f4f4f5;
+  --ws-color-000000: #000000;
+  --ws-color-2563eb: #2563eb;
 }
 
 .dark {
@@ -360,6 +372,12 @@
   --ws-color-000000c5: #ffffffcc;
   --ws-color-00000015: #ffffff1f;
   --ws-color-1500331a: #f4ebff24;
+  --ws-color-f8f9fb: #20242c;
+  --ws-color-ffffff: #2a2731;
+  --ws-color-0f172a: #e6eaf2;
+  --ws-color-f4f4f5: #2c2f38;
+  --ws-color-000000: #000000;
+  --ws-color-2563eb: #7fb2ff;
   font-weight: 300;
 }
 
diff --git a/frontend/src/styles/workspace-color-tokens.ts b/frontend/src/styles/workspace-color-tokens.ts
index e6163d89..2a53f6b3 100644
--- a/frontend/src/styles/workspace-color-tokens.ts
+++ b/frontend/src/styles/workspace-color-tokens.ts
@@ -16,4 +16,10 @@ export const WORKSPACE_COLOR_TOKENS = {
   "ws-000000c5": { light: "#000000c5", dark: "#ffffffcc" },
   "ws-00000015": { light: "#00000015", dark: "#ffffff1f" },
   "ws-1500331a": { light: "#1500331a", dark: "#f4ebff24" },
+  "ws-f8f9fb": { light: "#f8f9fb", dark: "#20242c" },
+  "ws-ffffff": { light: "#ffffff", dark: "#2a2731" },
+  "ws-0f172a": { light: "#0f172a", dark: "#e6eaf2" },
+  "ws-f4f4f5": { light: "#f4f4f5", dark: "#2c2f38" },
+  "ws-000000": { light: "#000000", dark: "#000000" },
+  "ws-2563eb": { light: "#2563eb", dark: "#7fb2ff" },
 } as const satisfies Record<string, WorkspaceColorToken>;