A dark VS Code theme based on the authentic Numix GTK theme color palette with accessibility improvements.
- Authentic Numix Colors - Directly sourced from the original Numix GTK theme
- Accessibility-First Design - WCAG AA compliant contrast ratios
- Color Blindness Friendly - Distinct luminance values for red/green differentiation
- Dark Theme - Optimized for long coding sessions
- Comprehensive Language Support - Syntax highlighting for 20+ languages
| Feature | Enhancement |
|---|---|
| Contrast Ratios | All text meets WCAG AA (4.5:1) or AAA (7:1) standards |
| Color Blindness | Red/green elements use distinct luminance values (25%+ difference) |
| Focus Indicators | High-visibility focus states throughout UI |
| Selection Visibility | Semi-transparent overlays maintain readability |
| Error States | Light red text on dark backgrounds for clarity |
| Link Colors | Blue with underline for universal recognition |
| Hover States | Subtle background shifts without losing contrast |
| Color Role | Hex | Contrast on #2a2a2a | WCAG Level |
|---|---|---|---|
| Background | #2a2a2a |
- | - |
| Foreground | #e8e8e8 |
12.6:1 | AAA |
| Comment | #9a9a9a |
5.2:1 | AA |
| Selection | #f0544c |
4.6:1 | AA |
| Success | #81c784 |
5.8:1 | AA |
| Warning | #ffb74d |
5.1:1 | AA |
| Error | #e57373 |
4.8:1 | AA |
| Info | #64b5f6 |
5.3:1 | AA |
| Purple | #ba68c8 |
4.7:1 | AA |
| Teal | #4db6ac |
4.6:1 | AA |
| Category | Languages |
|---|---|
| Web | JavaScript, TypeScript, HTML, CSS, JSON |
| Scripting | Python, Shell/Bash, PowerShell |
| Systems | C, C++, Rust, Go, Java |
| Data | SQL, YAML, TOML |
| Markup | Markdown, HTML |
| Other | PHP, Ruby, Lua, Dart, Swift |
- Download
numix-vscode-theme-0.1.0.vsixfrom releases - In VS Code:
Ctrl+Shift+P→ "Extensions: Install from VSIX" - Select the downloaded
.vsixfile
# Install globally
code --install-extension numix-vscode-theme-0.1.0.vsix
# Or use vsce
vsce install numix-vscode-theme-0.1.0.vsix# Clone the repository
git clone https://github.com/numix-ui/numix-vscode-theme.git
cd numix-vscode-theme
# Package and install
npm run package
code --install-extension numix-vscode-theme-0.1.0.vsix- Press
Ctrl+Shift+P(Cmd+Shift+P on Mac) - Type "Preferences: Color Theme"
- Select "Numix"
- Node.js 22.x
- npm 10.x
- VS Code 1.60+
# Install Node.js 22 (if not using nvm)
nvm install 22
nvm use 22
# Install development dependencies
npm install -g @vscode/vsce
# Install local dependencies
npm run install:deps# Validate extension
npm run validate
# Package extension
npm run package
# Publish to marketplace (requires VSCE_TOKEN)
npm run publish
# Full release
npm run release
# Bump version
npm run bump:patch # 0.1.0 -> 0.1.1
npm run bump:minor # 0.1.0 -> 0.2.0
npm run bump:major # 0.1.0 -> 1.0.0make install # Install dependencies
make validate # Validate extension
make package # Create .vsix
make publish # Publish to marketplace
make release # Full release workflow
make bump-patch # Bump patch version
make status # Show project status
make clean # Clean build artifacts./dev.sh install # Install dependencies
./dev.sh validate # Validate extension
./dev.sh package # Create .vsix
./dev.sh publish # Publish (needs VSCE_TOKEN)
./dev.sh bump patch # Bump version
./dev.sh release # Full release
./dev.sh status # Show status- Open this folder in VS Code
- Press
F5to launch Extension Development Host - The new window will have the theme loaded
- Press
Ctrl+Shift+P→ "Preferences: Color Theme" → Select "Numix"
# Watch for changes
npm run watch
# Or use VS Code tasks
# Ctrl+Shift+P → "Tasks: Run Task" → "npm: watch"numix-vscode-theme/
├── numix-theme.json # Theme definition (colors, token colors)
├── package.json # Extension manifest
├── LICENSE # GPL-3.0 license
├── README.md # This file
├── Makefile # Build automation
├── dev.sh # Development script
├── .nvmrc # Node.js version
├── .gitignore # Git ignore rules
├── .github/
│ └── workflows/
│ ├── ci.yml # CI pipeline
│ └── release.yml # Release pipeline
└── .vscode/
├── extensions.json # Recommended extensions
├── settings.json # Editor settings
├── launch.json # Debug configurations
└── tasks.json # VS Code tasks
- Runs on push to
main/masterand pull requests - Validates extension manifest
- Packages extension
- Uploads artifact
- Triggers on git tags (
v*) - Packages extension with version
- Publishes to VS Code Marketplace
- Creates GitHub release with assets
-
Create Personal Access Token:
- https://dev.azure.com/_usersSettings/tokens
- Scope: "Marketplace (Publish)"
-
Add secret to GitHub:
- Repository → Settings → Secrets → Actions
- Add
VSCE_TOKENwith your token
-
Create a release:
# Bump version and tag
npm run bump:patch
# Push tags
git push --tags
# GitHub Actions will automatically:
# - Package the extension
# - Publish to marketplace
# - Create GitHub releaseThis theme has been designed with accessibility in mind:
- Contrast ratios verified using WebAIM's contrast checker
- Color blindness simulation tested with Coblis (Color Blindness Simulator)
- Focus visibility tested with keyboard navigation
- All status colors use icons + color for dual encoding
- Foreground text: 12.6:1 ratio (AAA)
- Comments: 5.2:1 ratio (AA)
- Status colors: All above 4.5:1 ratio (AA)
- Selection: 4.6:1 ratio (AA)
- Fork the repository
- Create a feature branch:
git checkout -b feature/my-feature - Make your changes
- Validate:
npm run validate - Submit a pull request
- Follow existing color conventions
- Maintain WCAG AA compliance
- Test with color blindness simulators
- Add appropriate scopes for new languages
Based on the original Numix GTK Theme
This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
See LICENSE for full text.
Made with care by Numix UI and LoboGuardian 🐺