Cyber Theme Collection

A modern VSCode theme collection featuring dark and light variants with bright syntax highlighting and clean, minimalistic design.

Themes

This extension includes four 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

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

UI Colors

Cyber Light

Syntax Highlighting

UI Colors

Cyber Light Soft

Syntax Highlighting

UI Colors

Cyber Light Warm

Syntax Highlighting

UI Colors

Installation

Via VS Code Marketplace (Recommended)

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X)
3. Search for "Cyber Dark"
4. Click Install

Manual Installation

1. Download the latest release from the Releases page
2. Extract the downloaded file
3. In VS Code, go to File > Preferences > Extensions (Ctrl+Shift+X)
4. Click the "..." menu in the Extensions view
5. Select "Install from VSIX..."
6. Navigate to the extracted file and select the .vsix file

From Source

1. Clone this repository:

   git clone https://github.com/shivam20/cyber-dark-theme.git
   cd cyber-dark-theme
   

2. Install dependencies:

   npm install
   

3. Package the extension:

   npm run package
   

4. Install the generated .vsix file following the manual installation steps above

Usage

After installation:

1. Open VS Code
2. Press Ctrl+K Ctrl+T (or Cmd+K Cmd+T on macOS)
3. 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

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

1. Install dependencies:

   npm install
   

2. 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:

1. Press F5 in VS Code to open a new window with the extension loaded
2. Open a file with syntax highlighting
3. Select "Cyber Dark" from the color theme menu
4. Make changes to the theme files
5. Reload the window (Ctrl+R or Cmd+R) to see changes

Contributing

Contributions are welcome! Here's how you can help:

1. Fork the repository
2. Create a new branch for your feature or bugfix
3. Make your changes
4. Test thoroughly
5. 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.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

• VS Code Marketplace
• GitHub Repository
• Issues

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