Cyber Theme Collection
A modern VSCode theme collection featuring dark and light variants with bright syntax highlighting and clean, minimalistic design, plus modern purple/blue accent themes.
Themes
This extension includes eight carefully crafted themes:
🌙 Cyber Dark
- Background: Deep dark (#0D1117) for reduced eye strain
- Style: Modern, minimalistic with vibrant syntax colors
- Best for: Long coding sessions, night work, developers who prefer dark themes
☀️ Cyber Light
- Background: Pure white (#FFFFFF) for maximum brightness
- Style: Clean, crisp with high contrast syntax colors
- Best for: Well-lit environments, developers who prefer light themes
🌤 Cyber Light Soft
- Background: Soft off-white (#FAFBFC) for reduced glare
- Style: Gentle, easy on the eyes with muted colors
- Best for: Extended coding sessions, developers sensitive to bright screens
🌅 Cyber Light Warm
- Background: Warm cream (#FFFBF0) for cozy atmosphere
- Style: Warm, inviting with earthy tones
- Best for: Comfortable coding, developers who prefer warm color schemes
💜 Qoder Dark
- Background: Deep purple-tinted dark (#0F0F14) with modern purple/blue accents
- Style: Modern, vibrant with purple/blue accents
- Best for: AI/ML development, modern coding, developers who love purple themes
⚡ JavaScript Neon Dark (New!)
- Background: Ultra-dark (#0A0E14) for maximum contrast
- Style: Cyberpunk/futuristic with vibrant neon colors
- Best for: JavaScript/TypeScript developers who enjoy bold, high-energy coding environments
🎨 JavaScript Modern Dark (New!)
- Background: Deep dark (#0F1117) with refined palette
- Style: Clean, professional, minimalist with sophisticated colors
- Best for: JavaScript/TypeScript developers who prefer distraction-free, professional environments
🔥 JavaScript Vibrant Dark (New!)
- Background: Dark (#0D0F12) with warm undertones
- Style: Warm, energetic with rich, saturated colors
- Best for: JavaScript/TypeScript developers who want high visibility and warmth
Features
- Modern Design - Clean, flat UI without clutter
- Bright Syntax Highlighting - Vibrant colors for excellent contrast and readability
- High Contrast - Excellent readability for long coding sessions
- Comprehensive Language Support - Works with all major programming languages
- Terminal Integration - Matching terminal color scheme for consistency
- Git Integration - Color-coded git status indicators
- Diff Colors - Clear diff visualization for code reviews
- Multiple Variants - Choose the theme that fits your mood and environment
Color Palettes
Cyber Dark
Syntax Highlighting
| Element |
Color |
| Keywords |
Electric Blue #58A6FF |
| Functions |
Vibrant Purple #D2A8FF |
| Strings |
Bright Green #7EE787 |
| Numbers |
Hot Pink #FF7B72 |
| Comments |
Muted Gray #8B949E |
| Variables |
Cyan #79C0FF |
| Types |
Orange #FFA657 |
| Constants |
Yellow #FFD580 |
UI Colors
| Element |
Color |
| Background |
Deep Dark #0D1117 |
| Text |
Light Gray #C9D1D9 |
| Borders |
Subtle Gray #30363D |
| Selection |
Blue Tint #264F78 |
| Active Line |
Slightly Darker #161B22 |
Cyber Light
Syntax Highlighting
| Element |
Color |
| Keywords |
Red #CF222E |
| Functions |
Purple #8250DF |
| Strings |
Green #1A7F37 |
| Numbers |
Red #CF222E |
| Comments |
Gray #6E7781 |
| Variables |
Blue #1F6FEB |
| Types |
Orange #D29922 |
| Constants |
Orange #D29922 |
UI Colors
| Element |
Color |
| Background |
White #FFFFFF |
| Text |
Dark Gray #24292F |
| Borders |
Light Gray #E8EDF2 |
| Selection |
Light Blue #B6E3FF |
| Active Line |
Light Gray #F6F8FA |
Cyber Light Soft
Syntax Highlighting
| Element |
Color |
| Keywords |
Dark Red #B62303 |
| Functions |
Purple #8250DF |
| Strings |
Green #1A7F37 |
| Numbers |
Dark Red #B62303 |
| Comments |
Gray #6E7781 |
| Variables |
Blue #0969DA |
| Types |
Orange #BF8700 |
| Constants |
Orange #BF8700 |
UI Colors
| Element |
Color |
| Background |
Off-White #FAFBFC |
| Text |
Dark Gray #2F363D |
| Borders |
Light Gray #E8EDF2 |
| Selection |
Soft Blue #C8E1FF |
| Active Line |
Light Gray #F0F3F6 |
Cyber Light Warm
Syntax Highlighting
| Element |
Color |
| Keywords |
Orange-Red #CC3300 |
| Functions |
Brown #8B4513 |
| Strings |
Green #2E7D32 |
| Numbers |
Orange-Red #CC3300 |
| Comments |
Brown-Gray #8B7355 |
| Variables |
Blue #006699 |
| Types |
Goldenrod #B8860B |
| Constants |
Goldenrod #B8860B |
UI Colors
| Element |
Color |
| Background |
Cream #FFFBF0 |
| Text |
Dark Brown #3A2A1A |
| Borders |
Light Beige #F5E6D3 |
| Selection |
Peach #FFE4CC |
| Active Line |
Light Cream #FFF5E6 |
💜 Qoder Dark
Syntax Highlighting
| Element |
Color |
| Keywords |
Purple #8A6CFF |
| Functions |
Light Purple #BD93F9 |
| Strings |
Bright Green #50FA7B |
| Numbers |
Hot Pink #FF5555 |
| Comments |
Muted Gray #7A7A99 |
| Variables |
Cyan #8BE9FD |
| Types |
Orange #FFB86C |
| Constants |
Yellow #FFCB8B |
UI Colors
| Element |
Color |
| Background |
Deep Purple-Dark #0F0F14 |
| Text |
Light Gray #E6E6F0 |
| Borders |
Purple-Tinted Gray #242438 |
| Selection |
Purple Tint #4D3D8F |
| Active Line |
Slightly Darker #1A1A24 |
⚡ JavaScript Neon Dark
Syntax Highlighting
| Element |
Color |
| Keywords |
Neon Cyan #00F0FF |
| Functions |
Neon Pink #FF00FF |
| Strings |
Neon Green #00FF9D |
| Numbers |
Neon Orange #FF6B00 |
| Comments |
Neon Gray #6B7280 |
| Variables |
Electric Blue #3B82F6 |
| Types |
Neon Purple #A855F7 |
| Constants |
Neon Yellow #FFFF00 |
UI Colors
| Element |
Color |
| Background |
Ultra-Dark #0A0E14 |
| Text |
Light Gray #E5E7EB |
| Borders |
Dark Gray #1F2937 |
| Selection |
Blue Tint #1E3A5F |
| Active Line |
Slightly Darker #121820 |
JavaScript-Specific Features
- Arrow Functions: Neon pink for
=> operator
- Async/Await: Bold neon cyan for enhanced visibility
- Template Strings: Neon green for backtick strings
- JSX Tags: Neon cyan for component names
- This/Super: Bold neon yellow for context keywords
- Spread/Rest: Bold neon pink for
... operator
🎨 JavaScript Modern Dark
Syntax Highlighting
| Element |
Color |
| Keywords |
Royal Blue #60A5FA |
| Functions |
Soft Purple #A78BFA |
| Strings |
Sage Green #34D399 |
| Numbers |
Warm Orange #FB923C |
| Comments |
Slate Gray #64748B |
| Variables |
Sky Blue #38BDF8 |
| Types |
Coral #F87171 |
| Constants |
Amber #FBBF24 |
UI Colors
| Element |
Color |
| Background |
Deep Dark #0F1117 |
| Text |
Light Gray #E5E7EB |
| Borders |
Medium Gray #374151 |
| Selection |
Blue-Gray #2D3748 |
| Active Line |
Slightly Darker #161922 |
JavaScript-Specific Features
- Arrow Functions: Soft purple for
=> operator
- Async/Await: Bold royal blue for enhanced visibility
- Template Strings: Sage green for backtick strings
- JSX Tags: Royal blue for component names
- This/Super: Bold amber for context keywords
- Spread/Rest: Bold soft purple for
... operator
🔥 JavaScript Vibrant Dark
Syntax Highlighting
| Element |
Color |
| Keywords |
Coral Red #FF6B6B |
| Functions |
Golden Yellow #FFD93D |
| Strings |
Teal Green #6BCB77 |
| Numbers |
Hot Pink #FF6B9D |
| Comments |
Warm Gray #8B949E |
| Variables |
Orange #FF9F43 |
| Types |
Red-Orange #EE5A24 |
| Constants |
Bright Yellow #FFEAA7 |
UI Colors
| Element |
Color |
| Background |
Dark #0D0F12 |
| Text |
Light Gray #E8E8E8 |
| Borders |
Dark Blue-Gray #2C3E50 |
| Selection |
Blue-Gray #2C3E50 |
| Active Line |
Slightly Darker #14171C |
JavaScript-Specific Features
- Arrow Functions: Golden yellow for
=> operator
- Async/Await: Bold coral red for enhanced visibility
- Template Strings: Teal green for backtick strings
- JSX Tags: Coral red for component names
- This/Super: Bold bright yellow for context keywords
- Spread/Rest: Bold golden yellow for
... operator
Installation
Via VS Code Marketplace (Recommended)
- Open VS Code
- Go to Extensions (Ctrl+Shift+X)
- Search for "Cyber Dark"
- Click Install
Manual Installation
- Download the latest release from the Releases page
- Extract the downloaded file
- In VS Code, go to File > Preferences > Extensions (Ctrl+Shift+X)
- Click the "..." menu in the Extensions view
- Select "Install from VSIX..."
- Navigate to the extracted file and select the
.vsix file
From Source
Clone this repository:
git clone https://github.com/shivam20/cyber-dark-theme.git
cd cyber-dark-theme
Install dependencies:
npm install
Package the extension:
npm run package
Install the generated .vsix file following the manual installation steps above
Usage
After installation:
- Open VS Code
- Press
Ctrl+K Ctrl+T (or Cmd+K Cmd+T on macOS)
- Select your preferred theme from the theme list:
- Cyber Dark - For dark mode coding
- Cyber Light - For bright, clean coding
- Cyber Light Soft - For gentle, comfortable coding
- Cyber Light Warm - For cozy, warm coding
- Qoder Dark - For modern, vibrant coding with purple accents
- JavaScript Neon Dark - For cyberpunk-style JavaScript coding
- JavaScript Modern Dark - For professional JavaScript coding
- JavaScript Vibrant Dark - For warm, energetic JavaScript coding
Or via menu:
- Windows/Linux: File > Preferences > Color Theme > [Select Theme]
- macOS: Code > Preferences > Color Theme > [Select Theme]
Supported Languages
The theme provides syntax highlighting for:
- JavaScript / TypeScript
- Python
- Java
- C / C++
- Go
- Rust
- HTML / CSS
- JSON / YAML
- Markdown
- Shell / Bash
- SQL
- PHP
- Ruby
- Swift
- Kotlin
- And many more...
Screenshots
Note: Screenshots will be added in a future release. Install the theme to see it in action!
Customization
You can further customize the theme through VS Code settings:
Override Specific Colors
Add these settings to your settings.json:
{
"editor.tokenColorCustomizations": {
"[Cyber Dark]": {
"comments": "#8B949E",
"keywords": "#58A6FF",
"strings": "#7EE787"
}
}
}
Customize Semantic Tokens
{
"editor.semanticTokenColorCustomizations": {
"[Cyber Dark]": {
"enabled": true,
"rules": {
"*.static": {
"foreground": "#FFD580",
"fontStyle": "bold"
},
"type": {
"foreground": "#FFA657"
}
}
}
}
}
Customize Workbench Colors
{
"workbench.colorCustomizations": {
"[Cyber Dark]": {
"editor.background": "#0D1117",
"statusBar.background": "#0D1117",
"activityBar.background": "#010409"
}
}
}
Development
Prerequisites
- Node.js (v16 or higher)
- npm or yarn
- vsce (VS Code Extension Manager)
Setup
Install dependencies:
npm install
Install vsce globally:
npm install -g vsce
Building
To package the extension:
npm run package
This will create a .vsix file that can be installed in VS Code.
Testing
To test the theme during development:
- Press
F5 in VS Code to open a new window with the extension loaded
- Open a file with syntax highlighting
- Select "Cyber Dark" from the color theme menu
- Make changes to the theme files
- Reload the window (
Ctrl+R or Cmd+R) to see changes
Contributing
Contributions are welcome! Here's how you can help:
- Fork the repository
- Create a new branch for your feature or bugfix
- Make your changes
- Test thoroughly
- Submit a pull request
Areas for Contribution
- Adding support for additional languages
- Improving color contrast ratios
- Fixing syntax highlighting issues
- Adding new color variants
- Improving documentation
- Creating better screenshots
Known Issues
- None currently. Please report any issues you find!
Roadmap
- [x] Add light variants (completed: 3 light themes)
- [ ] Create additional color schemes
- [ ] Add semantic token customizations
- [ ] Create icon theme variant
- [ ] Add workspace-specific color overrides
- [ ] Support for more languages
- [ ] Create high contrast variants
License
MIT License - see LICENSE file for details
Credits
Created with ❤️ for the VS Code community
Support
If you encounter any issues or have suggestions:
- Open an issue on GitHub
- Check existing issues for solutions
- Read the documentation for customization options
Changelog
Version 1.1.0
- Added Qoder Dark theme - modern purple/blue accent theme inspired by Qoder IDE
- Added JavaScript Neon Dark - cyberpunk-style theme with vibrant neon colors
- Added JavaScript Modern Dark - professional, minimalist theme
- Added JavaScript Vibrant Dark - warm, energetic theme
- Enhanced theme collection with 8 total themes
- Improved color consistency across all themes
- Better terminal color matching
Version 1.0.0
- Initial release
- 4 themes included: Cyber Dark, Cyber Light, Cyber Light Soft, Cyber Light Warm
- Modern dark background (#0D1117) with bright syntax colors
- Three light variants for different preferences
- Comprehensive language support
- Terminal integration for all themes
- Git integration for all themes
- Diff colors for all themes
- High contrast and readability
Links
Enjoy coding with Cyber Themes! 🚀
Choose the theme that fits your mood and environment:
- 🌙 Cyber Dark for night coding
- ☀️ Cyber Light for bright, clean coding
- 🌤 Cyber Light Soft for comfortable, gentle coding
- 🌅 Cyber Light Warm for cozy, warm coding
- 💜 Qoder Dark for modern, vibrant coding
- ⚡ JavaScript Neon Dark for cyberpunk-style JavaScript coding
- 🎨 JavaScript Modern Dark for professional JavaScript coding
- 🔥 JavaScript Vibrant Dark for warm, energetic JavaScript coding
