VS Code extension: webview renders in light theme under dark high-contrast color themes
Nobody has claimed this yet.
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 82/100
- Issue type
- Bug
- Clarity
- Clearly specified
- Activity status
- Quiet
- Tech stack
- typescript, vscode
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.
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
- Dominant language
- TypeScript
- Stars
- 7.5k
- Forks
- 1.2k
- Avg merge
- 11h 41m
- Merged PRs (30d)
- 345
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.
More from MoonshotAI/kimi-code
-
Difficulty 1/5 Under an hour Newbie friendliness 92/100
MoonshotAI/kimi-code#3947 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
MoonshotAI/kimi-code#3836 · 2 comments ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
MoonshotAI/kimi-code#3790 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
MoonshotAI/kimi-code#3755 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
MoonshotAI/kimi-code#3627 ·
All issues in MoonshotAI/kimi-code
Similar issues
-
calcite-components needs triage refactor
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
Esri/calcite-design-system#15203 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 91/100
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
Difficulty 1/5 Under an hour Newbie friendliness 95/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
Automattic/studio#4908 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 90/100