MoonshotAI / MoonshotAI/kimi-code
VS Code extension: webview renders in light theme under dark high-contrast color themes
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 7.5k
- Forks
- 1.2k
- Avg merge
- 11h 53m
- Merged PRs (30d)
- 350
Description
What version of Kimi Code is running?
moonshot-ai.kimi-code 0.6.4
Which open platform/subscription were you using?
Allegretto
Which model were you using?
No response
What platform is your computer?
No response
What issue are you seeing?
Summary
When VS Code is set to a dark high-contrast color theme (e.g. the built-in "Dark High Contrast"), the Kimi Code panel renders with a light (white) UI instead of a dark one.
Environment
- Extension:
moonshot-ai.kimi-codev0.6.3 / v0.6.4 (win32-x64, but platform-independent) - VS Code: 1.100+
- OS: Windows (likely affects all platforms)
Root cause
The theme-detection code in the webview bundle only recognizes the vscode-dark body class:
function mU() {
const e = document.body.classList.contains("vscode-dark");
document.documentElement.classList.toggle("dark", e);
}
mU(),
new MutationObserver(mU).observe(document.body, { attributes: !0, attributeFilter: ["class"] });
VS Code sets one of these classes on the webview <body>:
| VS Code theme kind | Body class |
|---|---|
| Light | vscode-light |
| Dark | vscode-dark |
| Dark High Contrast | vscode-high-contrast |
| Light High Contrast | vscode-high-contrast-light |
Under a dark high-contrast theme the body gets vscode-high-contrast, which contains("vscode-dark") does not match, so the dark class is removed from <html> and the app falls back to its light palette.
Proposed fix
Treat vscode-high-contrast as a dark theme (light high-contrast already falls through correctly):
const isDark =
document.body.classList.contains("vscode-dark") ||
document.body.classList.contains("vscode-high-contrast");
document.documentElement.classList.toggle("dark", isDark);
I verified this locally by patching the bundled dist/webview.js — the panel then renders dark under Dark High Contrast, and light/high-contrast-light themes still render light. The existing MutationObserver keeps live theme switching working.
A possible follow-up (out of scope for this fix): a dedicated high-contrast palette for the webview instead of reusing the regular dark palette, e.g. by honoring vscode-high-contrast / vscode-high-contrast-light classes with higher-contrast tokens.
What steps can reproduce the bug?
Steps to reproduce
- In VS Code:
Ctrl+K Ctrl+T→ select Dark High Contrast (or any dark high-contrast theme). - Open the Kimi Code panel.
Expected: the webview renders its dark theme.
Actual: the webview renders its light theme (all white).
What is the expected behavior?
No response
Additional information
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the theme-detection code in dist/webview.js and reproduce the issue using VS Code's built-in Dark High Contrast theme. Update the detection so vscode-high-contrast receives the dark class, then verify dark, light, and light high-contrast themes render correctly and live theme switching still works.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript, vscode
- Domain
- frontend, tooling
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 82/100