fix(web): keep transparent images readable over a checkerboard canvas

.changeset/fix-web-media-alpha-canvas.md

@@ -0,0 +1,5 @@
+---
+"@moonshot-ai/kimi-code": patch
+---
+
+web: Show transparent images over a checkerboard canvas so white and black content stays visible in both light and dark themes.

apps/kimi-web/scripts/check-style.mjs

@@ -115,8 +115,9 @@ function checkFile(abs) {
       const trimmed = raw.trim();
       const isTokenDef = /^\s*--[\w-]+\s*:/.test(raw);
 
-      // no-gradient-text
-      if (/\b(?:linear|radial|conic)-gradient\s*\(/i.test(raw)) {
+      // no-gradient-text (a custom-property definition is never rendered text
+      // itself, so gradient tokens like --media-alpha-canvas don't count)
+      if (!isTokenDef && /\b(?:linear|radial|conic)-gradient\s*\(/i.test(raw)) {
         add('no-gradient-text', file, line, trimmed.slice(0, 80));
       }
 

apps/kimi-web/src/components/FilePreview.vue

@@ -922,6 +922,7 @@ function truncatePath(path: string, maxLen = 55): string {
   object-fit: contain;
   border: 1px solid var(--line);
   border-radius: 4px;
+  background: var(--media-alpha-canvas);
 }
 .fp-image.actual {
   max-width: none;

apps/kimi-web/src/components/chat/Markdown.vue

@@ -533,6 +533,12 @@ function copyDiff(code: string, idx: number) {
   font-size: var(--content-font-size);
 }
 
+/* Themed surfaces swallow white-on-transparent (light) or black-on-transparent
+   (dark) images; the checkerboard canvas keeps both visible. */
+.md :deep(.markdown-renderer img) {
+  background: var(--media-alpha-canvas);
+}
+
 /* Emphasis — keep the weight strong, but soften the ink slightly. */
 .md :deep(strong) {
   color: color-mix(in srgb, var(--color-text) 86%, var(--color-text-muted));

apps/kimi-web/src/components/chat/tool-calls/MediaTool.vue

@@ -89,6 +89,7 @@ function openMediaPreview(): void {
   display: block;
   max-width: 100%;
   border-radius: var(--radius-md);
+  background: var(--media-alpha-canvas);
 }
 .media-video,
 .media-audio {

apps/kimi-web/src/style.css

@@ -396,6 +396,18 @@ html[data-color-scheme="dark"][data-accent="mono"] {
   --color-surface: #fafbfc;
   --color-surface-raised: #ffffff;
   --color-surface-sunken: #f3f5f8;
+  /* Checkerboard canvas behind <img> so transparent PNGs keep white/black
+     content visible and read as transparent. Squares are mixed from the
+     theme's bg/text (≈#858585/#6b6b6b light, ≈#676b72/#7a7e85 dark), each
+     ≥3:1 against both white and black; opaque images simply cover it. */
+  --color-media-alpha-bg-1: color-mix(in srgb, var(--color-bg) 52%, var(--color-text) 48%);
+  --color-media-alpha-bg-2: color-mix(in srgb, var(--color-bg) 42%, var(--color-text) 58%);
+  --media-alpha-canvas: conic-gradient(
+    var(--color-media-alpha-bg-1) 25%,
+    var(--color-media-alpha-bg-2) 0 50%,
+    var(--color-media-alpha-bg-1) 0 75%,
+    var(--color-media-alpha-bg-2) 0
+  ) 0 0 / 16px 16px;
   /* Foreground text colours. `--color-text` is the default solid body / UI
      colour (headings and emphasis share it); muted / faint step down for
      secondary and tertiary copy; on-accent is text drawn on the accent fill. */

apps/kimi-web/src/views/DesignSystemView.vue

@@ -194,6 +194,8 @@ onUnmounted(() => {
                 <tr><td class="tk">--color-line</td><td class="val"><span class="swatch" style="background:#e7eaee"></span>#e7eaee</td><td class="val"><span class="swatch" style="background:#2d333b"></span>#2d333b</td><td>Divider / card border</td></tr>
                 <tr><td class="tk">--color-selected</td><td class="val"><span class="swatch" style="background:#00000014"></span>#00000014</td><td class="val"><span class="swatch" style="background:#ffffff14"></span>#ffffff14</td><td>Neutral selected fill (sidebar rows, list pickers) — translucent, never accent-tinted</td></tr>
                 <tr><td class="tk">--color-hover</td><td class="val"><span class="swatch" style="background:#0000000d"></span>#0000000d</td><td class="val"><span class="swatch" style="background:#ffffff0d"></span>#ffffff0d</td><td>Row hover wash — lighter than the selected fill (hover &lt; selected); translucent, sits on any surface</td></tr>
+                <tr><td class="tk">--color-media-alpha-bg-1</td><td class="val"><span class="swatch" style="background:#858585"></span>≈#858585</td><td class="val"><span class="swatch" style="background:#676b72"></span>≈#676b72</td><td>Checkerboard square A of the <code>&lt;img&gt;</code> alpha canvas — color-mix of <code>--color-bg</code>/<code>--color-text</code> (52/48); applied via <code>--media-alpha-canvas</code> (16px period)</td></tr>
+                <tr><td class="tk">--color-media-alpha-bg-2</td><td class="val"><span class="swatch" style="background:#6b6b6b"></span>≈#6b6b6b</td><td class="val"><span class="swatch" style="background:#7a7e85"></span>≈#7a7e85</td><td>Checkerboard square B (42/58) — both squares stay ≥3:1 against white and black; opaque images cover the canvas</td></tr>
                 <tr><td class="tk">--color-sidebar-bg</td><td class="val"><span class="swatch" style="background:#fbfaf9"></span>#fbfaf9</td><td class="val"><span class="swatch" style="background:#181817"></span>#181817</td><td>Sidebar surface — one step off <code>--color-bg</code> so the session column reads as its own plane</td></tr>
                 <tr><td class="tk">--color-accent</td><td class="val"><span class="swatch" style="background:#1783ff"></span>#1783ff</td><td class="val"><span class="swatch" style="background:#58a6ff"></span>#58a6ff</td><td>Primary action / link / focus</td></tr>
                 <tr><td class="tk">--color-success</td><td class="val"><span class="swatch" style="background:#0e7a38"></span>#0e7a38</td><td class="val"><span class="swatch" style="background:#3fb950"></span>#3fb950</td><td>Success / pass</td></tr>