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:
Install from VS Code:
- Open the Extensions view.
- Search for
Kawaii VS Code Color.
- Select
Install.
Install from the command line:
code --install-extension ITEM-PIXEL.kawaii-vscode-color
If you received a .vsix file:
- Open the Extensions view.
- Select
Views and More Actions....
- Select
Install from VSIX....
- Choose the
.vsix file.
Setup
Enable the theme:
- Open the Command Palette.
- Run
Preferences: Color Theme.
- Select
Kawaii VS Code Color or Kawaii VS Code Color Light.
Open the extension settings:
- Open the Command Palette.
- Run
Kawaii VS Code Color: Settings.
- Use the side menu to switch between
Home, Color Settings, and Neon Effect.
The settings window opens as a normal editor tab.
Settings Window
| Area |
Purpose |
Home |
Shows project links and extension information. |
Color Settings |
Changes theme mode, color overrides, image-backed effects, sync, export, and import. |
Neon Effect |
Enables or disables the unsupported VS Code workbench patch used for glow and image effects. |
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.
| Setting |
Behavior |
Upload Image |
Selects a local editor background image. |
Upload Logo |
Selects a local no-tab logo image. |
Random Neko |
Fetches a non-NSFW random image and uses it as the selected image input. |
Download Image / Download Logo |
Saves the current stored image with a Save As dialog. |
Remove Image / Remove Logo |
Removes the stored image input. |
Opacity |
Controls the injected image layer opacity. |
Fit Area |
Fits the editor background image inside full, half, or corner regions. |
Supported image formats:
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
| Button |
Behavior |
Save to VSSync |
Saves the current Kawaii VS Code Color settings bundle into VS Code synced extension global state. |
Import VSSync |
Restores the synced Kawaii VS Code Color settings bundle on another synced installation. |
Export As |
Saves the current settings bundle as a JSON file with a Save As dialog. |
Import |
Opens a JSON file picker and applies a previously exported settings bundle. |
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:
- Run
Kawaii VS Code Color: Settings.
- Open
Neon Effect.
- Use
Enable Neon Effect or Disable Neon Effect.
- 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
node --check scripts\build-color-theme.js
npm run build:theme
node --check src\extension.js
node --check src\settings.js
node --check src\js\theme_template.js
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-0.1.21.vsix --force
For VS Code Insiders:
code-insiders --install-extension .\dist\kawaii-vscode-color-0.1.21.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
- Open this repository in VS Code.
- Run
npm run build:theme.
- Press
F5 to launch the Extension Development Host.
- Select
Kawaii VS Code Color or Kawaii VS Code Color Light.
- 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:
References
