Cyber Pink Theme

A vibrant VS Code color theme inspired by futuristic cyberpunk.

License & Credits

Publisher: CYBER-PINKS
Author: 1abcdefggs (takaer)
License: MIT © 2026 1abcdefggs

Design philosophy and features,

###　 preview

For users who always use dark mode😎. A vibrant VS Code color theme inspired by cyberpunk, available in two primary colors: Neon Pink & Cyan. However, it is not suitable for people who easily experience eye strain from high contrast.

Variations

💡 How to build a futuristic world: Darken the room.

	💗 Pink Theme	💙 Cyan Theme
Neon Vivid & Vibrant
Soft Calm & Eye-friendly

Neon themes provide high-contrast, energetic lighting for a true cyber-punk feel, while Soft themes offer a more subtle, comfortable palette for long hours of coding.

Layout & Contrast UI

A pure black background maximizes contrast and emphasizes neon elements.

Color Accent

Background Hierarchy (Outside-In Brightness)

The background layer follows a structural shading pattern. The outermost elements are the darkest, gradually becoming lighter towards the inner workspace.

Layer	Color	Elements	Brightness
Outermost	`#000000`	Title bar, activity bar, status bar, editor	Darkest
Middle	`#0d0e17`	Sidebar, panel, tab bar	Medium
Inner	`#111320`	Section headers, inputs, menus, widgets	Lightest

Other Key Features

-Hover-Inverted UI: Status bar and menu bar items dynamically invert colors on mouse hover.

-Tuned Terminal: Carefully adjusted Terminal ANSI palette for maximum legibility.

-Interactive Tweaks: Inline theme editing via custom command.

Installation

If you download the repository from GitHub using the "Download ZIP" function, the default filename will be cyber-pink-theme-main.zip (which will create a folder named cyber-pink-theme-main after extraction).If you save it as an extension, you can open it from VS Code.

However, if you package (build) the repository by running the npx @vscode/vsce package command following the "Packaged Install" instructions in the README, the file extension will be .vsix, and the filename will typically look like this:

Local Install

Copy or clone this folder into your VS Code extensions directory: -Windows: %USERPROFILE%/.vscode/extensions/ -macOS/Linux: ~/.vscode/extensions/
Restart VS Code.
Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and run:

Preferences: Color Theme
Select one of the CYBER PINK variants.

Packaged Install (`.vsix`)

Steps to create an installer file from source code and install it.

Package the extension with vsce:
```
npx @vscode/vsce package
```
Install the generated .vsix from the Extensions view (... → Install from VSIX...).

Commands

Command	Title	Description
`cyberPink.editThemeColorAtCursor`	Edit Theme Color at Cursor	Detects the token type at the cursor and lets you edit its theme color directly.
`cyberPink.switchAccentPreset`	Switch Accent Preset	Quick-switch between accent color presets.

Right-click in any editor and choose Edit Theme Color at Cursor to tweak token colors on the fly.

Color Reference

Accent Colors

Variant	Primary	Light	Hover	Inactive
Pink Neon	`#FF3399`	`#FF69B4`	`#CC297A`	`#7d3060`
Pink Soft	`#D92B82`	`#D95999`	`#AD2368`	`#6A2952`
Cyan Neon	`#00f0ff`	`#67e8f9`	`#00c3cc`	`#1e3a4d`
Cyan soft	`#00CCD9`	`#58C5D4`	`#00A6AD`	`#1A3242`

Semantic Colors

Role	Color	Usage
Success	`#7ee787`	Git added, debug restart
Warning	`#f1fa8c`	Warnings, overview ruler
Danger	`#ff6b6b`	Errors, deletions, debug stop
Text	`#c8d1da`	Primary foreground
Muted	`#4a5568`	Disabled, placeholder

Changelog

0.3.2 — Performance & Quality Update

Optimized assets: Converted all screenshots to WebP format for faster loading
Improved README: Clarified differences between Neon and Soft themes with comparison tables
Enhanced developer experience: Added automated image compression scripts
Added semantic color mapping test cases for reliable theme updates
Updated .vscodeignore to ensure clean packaging
General housekeeping and version bump

0.3.1 — Patch Fixes & Marketplace Compliance

-Fixed invalid image paths in README (Windows-style "" → "/" conversion) -Replaced remaining SVG references to comply with VS Code Marketplace restrictions -Updated README image sources to valid PNG/WEBP formats -Ensured GitHub Actions release workflow passes successfully -Minor cleanup and consistency fixes following the 0.3.0 update

0.3.0

-Theme Naming Update & README Improvements -Updated theme variant names (Pink Neon / Pink Soft / Cyan Neon / Cyan Soft) -Improved README layout and background hierarchy table -Cleaned up old screenshot assets -Added Automated features such as image resizing -Other examples include color codes, etc.

0.2.1

-Fixed theme colors (updated active window border color to cyber cyan)

0.2.0

-Added 4 theme variants: Pink, Pink Soft, Cyan, Cyan Soft -Redesigned background hierarchy (outside-in brightness) -Added hover-inverted UI for statusbar and menubar -Added accent-colored borders for activity bar, title bar, status bar -Improved list hover, input field, and terminal styling

0.1.0

-Initial release with dark cyberpunk color scheme -Added Edit Theme Color at Cursor command

Repository & Issues

Repository: https://github.com/cyber-pinks/cyber-pink-theme

Report issues or request features via Issues on GitHub.

License Copyright

This project is Licensed under the MIT License MIT LICENSE.

Cyber Pink Color Theme

CYBER-PINKS