Toy Chest Theme for Visual Studio Code
I was tired of Solarized themes hurting my eyes during daylight, so I ported a Vim/Emacs theme from Kitty terminal to VSCode (Cursor & Windsurf supported).
All credit goes to Coleman Gariety for the original creation: ColemanGariety/toy-chest-theme
Features
- Deep Navy Background: A soothing #23364a background that's easy on the eyes
- Bright Accents: Playful highlights with #30cf7b green and other toy-inspired colors
- Excellent Readability: Carefully selected contrast ratios that meet WCAG AA standards
- Terminal Colors: Custom terminal color scheme that matches the theme
- Optimized for Popular Extensions: Works great with GitLens, Error Lens, and more
Color Palette
The Toy Chest theme features a playful yet professional color palette inspired by childhood toys:
- Building Block Blue (#23364a): Deep navy blue background
- Action Figure Green (#30cf7b): Bright green for variables and highlights
- Puzzle Piece Purple (#5f207a): Royal purple for selections
- Race Car Red (#be2d26): Vibrant red for errors and warnings
- Rubber Duck Yellow (#e7d74b): Bright yellow for strings
- Toy Robot Cyan (#41c3ad): Bright cyan for types and classes
Installation
- Launch Visual Studio Code
- Go to Extensions (or press
Ctrl+Shift+X
)
- Search for "Toy Chest Theme"
- Click Install
- Open the Command Palette (
Ctrl+Shift+P
) and select "Preferences: Color Theme"
- Select "Toy Chest"
Manual Installation
If you prefer to install the extension manually:
- Download the
.vsix
file from the releases page
- Open VS Code and go to Extensions
- Click the "..." menu and select "Install from VSIX..."
- Select the downloaded file
For Cursor & Windsurf Editor Users
This theme is fully compatible with Cursor Editor. Install it the same way you would for VS Code.
Screenshots
JavaScript

Python

HTML/CSS

Recommended Settings
For the best experience with Toy Chest Theme, consider these settings:
{
"editor.fontFamily": "'DepartureMono Nerd Font', 'monospace'",
"editor.fontLigatures": true,
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": true
}
Customization
If you want to customize certain aspects of the theme, you can override settings in your settings.json
file:
{
"workbench.colorCustomizations": {
"[Toy Chest]": {
"editor.background": "#1e2f40", // slightly darker background
"statusBar.background": "#30cf7b" // brighter status bar
}
}
}
The tools
directory contains several utilities to help develop and test the theme:
- test-theme.js: Launches VS Code with the theme for testing
- package-extension.js: Packages the theme for distribution
- contrast-checker.js: Verifies color contrast ratios for accessibility
To use these tools, you can run the npm scripts from the root directory:
# Test the theme in VS Code
npm run test
# Package the extension
npm run package
# Check contrast ratios
npm run check-contrast
Or use the tools directly:
node tools/test-theme.js
node tools/package-extension.js
node tools/contrast-checker.js
See the tools README for more information.
Contributing
Contributions are welcome! If you'd like to contribute, please:
- Fork the repository
- Create a feature branch
- Make your changes
- Submit a pull request
License
This theme is released under the MIT License. See the LICENSE file for details.