Kawaii VS Code Color

Kawaii VS Code Color provides dark pink and light green pastel-pink themes for Visual Studio Code, with optional glow effects, image-backed editor styling, theme-specific color customization, Settings Sync support, and JSON import/export.

Preview

User Guide

Installation

Install from the Visual Studio Marketplace:

• Marketplace page: Kawaii VS Code Color
• Extension Name: Kawaii VS Code Color

Install from VS Code:

1. Open the Extensions view.
2. Search for Kawaii VS Code Color.
3. Select Install.

Install from the command line:

code --install-extension ITEM-PIXEL.kawaii-vscode-color

If you received a .vsix file:

1. Open the Extensions view.
2. Select Views and More Actions....
3. Select Install from VSIX....
4. Choose the .vsix file.

Setup

Enable the theme:

1. Open the Command Palette.
2. Run Preferences: Color Theme.
3. Select Kawaii VS Code Color or Kawaii VS Code Color Light.

Open the extension settings:

1. Open the Command Palette.
2. Run Kawaii VS Code Color: Settings.
3. Use the side menu to switch between Home, Settings, Color Settings, Neon Effect, Image Customization, Sync/Files, and Help.

The settings window opens as a normal editor tab.

Settings Window

The settings webview must use the active editor theme for its own UI. Its CSS consumes VS Code webview tokens such as --vscode-editor-background, --vscode-foreground, --vscode-button-background, and --vscode-panel-border; it must not define a separate hardcoded product palette for page surfaces, text, controls, panels, or states.

Color Settings

The Color Settings page edits local user overrides for the selected theme mode.

• Dark edits are written to [Kawaii VS Code Color].
• Light edits are written to [Kawaii VS Code Color Light].
• Workbench colors are stored in workbench.colorCustomizations.
• Syntax colors are stored in editor.tokenColorCustomizations.
• Packaged theme source files are not modified.

Use Reset to remove one custom color. Use Reset All to remove all color customizations for the selected theme mode.

Image Customization

The Color Settings page can store one editor background image and one no-tab logo replacement.

Supported image formats:

• PNG
• JPG/JPEG
• WEBP
• SVG

Images are capped at 2 MB. If preview or injected effects fail, try a smaller image resolution because image previews and Neon Effect injection use data URLs.

Image changes do not auto-apply. Click Apply Effects, then reload VS Code when prompted. If the editor does not refresh cleanly, close and open VS Code manually.

Sync, Export, and Import

The settings bundle includes:

• Active theme mode.
• Dark and light workbench color overrides.
• Dark and light token color overrides.
• Neon brightness and glow disable setting.
• Editor background image metadata, image bytes, opacity, and fit area.
• No-tab logo image metadata, image bytes, and opacity.

VS Code Settings Sync must be enabled in VS Code for Save to VSSync / Import VSSync to move data between machines.

Neon Effect

VS Code color themes do not natively support text glow, editor background images, no-tab logo replacement, or arbitrary editor CSS. Those effects are provided by the optional Neon Effect path.

The Neon Effect modifies VS Code workbench files by adding a generated neondreams.js script reference with a refresh key. Use it with caution:

• Administrator permissions may be required on Windows.
• VS Code may show an unsupported or corrupted installation warning.
• VS Code updates can overwrite the patch.
• Disable the effect before troubleshooting editor startup or workbench rendering issues.

Enable or disable the effect:

1. Run Kawaii VS Code Color: Settings.
2. Open Neon Effect.
3. Use Enable Neon Effect or Disable Neon Effect.
4. Reload VS Code when prompted.

If VS Code shows the corruption warning, the Neon Effect page includes the official VS Code FAQ link and an optional checksum-fix community workaround. The supported recovery path is to disable Neon Effect and reinstall or repair VS Code so the modified workbench files are replaced.

VS Code Settings

Customize glow brightness:

{
  "kawaii_synthwave.brightness": 0.45
}

The value should be a number from 0 to 1. The default is 0.45.

Keep editor chrome updates but disable token glow:

{
  "kawaii_synthwave.disableGlow": true
}

After changing either setting, open Kawaii VS Code Color: Settings, apply the Neon Effect again, and reload VS Code.

Developer Guide

Local Setup

Install project dependencies:

npm install

Validate the extension metadata and scripts:

npm pkg get name version publisher dependencies devDependencies engines
npm run test:check
npm run test:unit
npm run test:dom
npm run test:integration
npm run test:e2e
npm run build:theme

Automated Tests

The project has four regular automated test layers, plus one gated Neon Effect E2E layer:

The integration suite opens Kawaii VS Code Color: Settings, but it does not control the rendered VS Code window. The E2E suite does control the real window and webview, but it is still safe by default: it does not click Enable Neon Effect, Disable Neon Effect, Apply Effects, upload/import/export/download controls, or network-backed random image controls. E2E screenshots and state notes are written under test-results/e2e.

The real Neon Effect patch has its own gated command:

$env:KAWAII_E2E_ALLOW_NEON_PATCH = "1"
npm run test:e2e:neon

npm run test:e2e:neon patches only the disposable VS Code installation under .vscode-test/extest-111-neon. It runs three separate VS Code launches to validate the same lifecycle users may need manually: before applying, after applying and reopening VS Code, and after removing and reopening VS Code. It verifies the workbench HTML hash returns to the original baseline and that injected runtime CSS uses editor-provided --vscode-* tokens rather than a standalone UI palette.

Build a Local VSIX

Package the extension:

npm run build:local

Install the generated VSIX in VS Code:

code --install-extension .\dist\kawaii-vscode-color-<version>.vsix --force

For VS Code Insiders:

code-insiders --install-extension .\dist\kawaii-vscode-color-<version>.vsix --force

Theme Color Workflow

• Keep themes/kawaii_synthwave-color-theme.json as the protected dark base theme.
• Keep themes/kawaii_synthwave-color-theme-light.json as the protected light base theme.
• Put dark palette changes in themes/kawaii_synthwave-color-theme-overrides.json.
• Put light palette changes in themes/kawaii_synthwave-color-theme-light-overrides.json.
• Run npm run build:theme to regenerate both generated theme JSON files.
• VS Code loads generated themes through package.json.contributes.themes.

Manual Theme Test

1. Open this repository in VS Code.
2. Run npm run build:theme.
3. Press F5 to launch the Extension Development Host.
4. Select Kawaii VS Code Color or Kawaii VS Code Color Light.
5. Inspect representative files and use Developer: Inspect Editor Tokens and Scopes for token rules.

Live Neon Effect testing is possible from the Extension Development Host, but it patches the VS Code installation used by that host. Prefer a disposable VS Code installation or VS Code Insiders.

Publishing

Before publishing:

• Confirm package.json.publisher is ITEM-PIXEL.
• Confirm package.json.name is kawaii-vscode-color.
• Confirm package.json.repository.url points to the public repository that contains the README images.
• Package to ./dist with npm run build:local.
• Publish only from an account authorized for the configured publisher.

Credits

Kawaii VS Code Color is based on SynthWave '84. The original theme, glow concept, and much of the historical implementation came from Robb Owen's project.

Kawaii VS Code Color Light is inspired by Sakura Theme, a soft pastel VS Code theme by mhiratani. Sakura Theme is released under the MIT License.

The Random Neko image flow was inspired by NyarchLinux/CatgirlDownloader, which uses Nekos.moe as one of its image sources.

The original SynthWave '84 README also credited:

• Sarah Drasner and her CSS-Tricks theme tutorial.
• Wes Bos and the Cobalt2 VS Code theme.
• Fira Code, used in the original screenshots.
• Banner cityscape image from Unsplash.

References

• Marketplace extension: Kawaii VS Code Color
• Repository: EmmiiChan/kawaii-vscode-color
• Upstream base: robb0wen/synthwave-vscode
• SynthWave Marketplace extension: SynthWave '84
• Light theme inspiration: mhiratani/theme-sakura
• Nekos.moe site: nekos.moe
• Nekos.moe API docs: docs.nekos.moe
• Nekos.moe image routes: Images / Posts
• Random Neko downloader inspiration: NyarchLinux/CatgirlDownloader
• VS Code Color Theme guide: Color Theme
• VS Code Theme Color reference: Theme Color
• VS Code theme customization: Customize a color theme
• VS Code Settings Sync extension state: Common Capabilities - Data Storage
• VS Code extension manifest reference: Extension Manifest
• VS Code publishing guide: Publishing Extensions