cyber-pink-theme

💗 Cyber Pink Theme

CREDIT & LICENSE

SCREENSHOT

If you like this style, please give it a try😻

I might have overlooked some bugs or color settings, so please let me know if you notice anything😻

✨ DESIGN PHILOSOPHY & FEATURES

Futuristic Cyberpunk Glow A vibrant VS Code theme built on striking pink and cyan. Designed for the ultimate dark mode experience 😎.
(Note: Features high-contrast neon colors, which may not be suitable for users prone to eye strain.)

🔥 Neon Glow Aesthetics A pure cyberpunk color scheme that makes your code pop.
💗 4 Theme Variants Choose your vibe: Pink Neon / Pink Soft / Cyan Neon / Cyan Soft.
🌌 Outside-In Brightness A smart, layered UI. Darker outer frames draw focus to slightly brighter inner workspaces for maximum visibility.

VARIATIONS

💡 How to create your futuristic space: Darken the room🌃.

GitHub Poll: Pink or Cyan? Vote on GitHub 😻

💗 Pink Color	💙 Cyan Color
NEON / #FF3399	NEON / #00F0FF

SOFT / #D92B82	SOFT / #00CCD9

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.

🎨 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

🖤 BACKGROUND LAYER

Layer	Color	Usage
Outermost	`#000000`	Title bar, Activity bar, Status bar, Editor,Primary outer frame
Middle	`#0d0e17`	Sidebar, Panel, Tab bar,Main workspace containers
Inner	`#111320`	Section headers, Inputs, Menus, Widgets Inner interactive surfaces

THEME DETAILS

An example of how it appears in actual code.
Basically, it’s mostly the color of the ACCENT.
All the examples are written in the Code section.

For details on all ColorThemes

Clicking on the PINK, neon, or cyan images will display them in a larger size.

💡 How to create your futuristic space: Programming Music 🎶

All semantic and accent color mappings used in this theme are available here:

Semantic Token Colors in the editor area

An example of how it appears in actual code. Basically, it’s mostly the color of the ACCENT.
All the examples are written in the Code section.
For verification purposes, Some code snippets are very widely spaced, while others are written on just a single line. compact,liner,long,middle,short,error-handler,error, are all type scripts.

// Liner.ts
import {EventEmitter} from"events";namespace N{export class C{p="pink";m(){return this.p.toUpperCase()}}export interface I{a:number;b:number}export type T={ok:boolean};export function U<K>(v:K){return v}export enum E{A="a",B="b"}}function D(t:any){}class S{x=0;y=0}class Ev{private ls:(()=>void)[]=[];add(f:()=>void){this.ls.push(f)}fire(){this.ls.forEach(f=>f())}}const MACRO=42;loop:for(let i=0;i<1;i++)break loop;const reg=/neon-(pink|cyan)/,num=123,str="CYBER PINK";function fn(a:string){const b=a+"!";return b}abstract class A{static s=1;readonly r=2;abstract abs():void;async run(){return"async"}/**@deprecated*/old(){return"x"}}(function(){const c=new N.C(),g=c.m(),e=new Ev();e.add(()=>console.log("fire"));e.fire();console.log(g,fn("hi"),N.E.A,str,num,reg.test("neon-pink"))})();

// compact.ts
import { EventEmitter } from "events"; namespace N { export class C { p="pink"; m(){return this.p.toUpperCase()} } export interface I{a:number;b:number} export type T={ok:boolean}; export function U<K>(v:K){return v} export enum E{A="a",B="b"} }

function D(t:any){} class S{x=0;y=0}
class Ev{private ls:(()=>void)[]=[];add(f:()=>void){this.ls.push(f)}fire(){this.ls.forEach(f=>f())}}
const MACRO=42; loop: for(let i=0;i<1;i++) break loop;
const reg=/neon-(pink|cyan)/, num=123, str="CYBER PINK";
function fn(a:string){const b=a+"!";return b}
abstract class A{static s=1;readonly r=2;abstract abs():void;async run(){return"async"} /**@deprecated*/ old(){return"x"}}
function main(){
  const c=new N.C(), g=c.m(), e=new Ev();
  e.add(()=>console.log("fire")); e.fire();
  console.log(g, fn("hi"), N.E.A, str, num, reg.test("neon-pink"));
}
main();

Markdown previews are rendered as HTML, so colors are not reflected. To see the difference, please visit the extension’s details page or paste the code into the editor.

👉 Semantic Color Mapping code page, Github Repository

https://github.com/cyber-pinks/cyber-pink-theme/tree/main/semantics-color-mapping

All semantic and accent color mappings used in this theme are available here:

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

Install and use it as a theme.

The theme color selection will probably appear automatically after installation. You can also change it later using either of the following methods:

Method 1: EXTENSIONS LIST	Method 2: VS Code MENU FILE	Method 3: COMMAND PALETTE
- EXTENSIONS: RIGHT-CLICK > Set color theme - DETAILS PAGE: [Set color theme] BUTTON	- Preferences > Theme > Color Theme	- MENU: View > Command Palette - Shortcut: Ctrl+Shift+P / Cmd+Shift+P - Run: `Preferences: Color Theme` - Select a “CYBER PINK” variant

If you’re on GitHub: The easiest way to use the theme color is to type “cyber pink” into the search bar in the extensions section of your IDE, such as VS Code, and install it.

Alternatively, you can install it from the Marketplace.

Clicking the install button from the Marketplace will open VS Code and allow you to install it.

https://marketplace.visualstudio.com/items?itemName=cyber-pinks.cyber-pink-theme

For DEVELOPMENT / For GitHub Repository Installations /

GitHub repository

If you’re installing from a GitHub repository instead of VS Code or the Marketplace…

Copy or clone this folder into your VS Code extensions directory: Save it in the VS Code EXTENSIONS folder. The location is as follows

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`)

This section explains how to create an installer file from the source code and install it manually. The extension will be packaged into a .vsix file using vsce.

Prerequisites: Check if npm is installed Before packaging, ensure you have Node.js and npm installed on your machine. You can verify this by running the following commands in your terminal:

node -v
npm -v

(If version numbers are displayed, you are good to go! If not, please download and install Node.js from the official website first.)

1. Package the extension using vsce:

npx @vscode/vsce package

2. Install the generated .vsix file: You can do this from the Extensions view (... → Install from VSIX…). Alternatively, you can right-click the file in the VS Code Explorer and select Install Extension VSIX.

Commands

Command	Title	Description
`cyberPink.applyPinkNeon`	💗 Pink Neon Set	Apply the Pink Neon theme variant with a bright cyberpunk glow.
`cyberPink.applyPinkSoft`	🌸 Pink Soft Set	Apply the Pink Soft theme variant with muted glow for extended sessions.
`cyberPink.applyCyanNeon`	💙 Cyan Neon Set	Apply the Cyan Neon theme variant with a bright cyberpunk glow.
`cyberPink.applyCyanSoft`	🫧 Cyan Soft Set	Apply the Cyan Soft theme variant with muted glow for extended sessions.
`cyberPink.switchAccentPreset`	Switch Accent Preset	Quickly switch between available Cyber Pink accent color presets.
`cyberPink.editThemeColorAtCursor`	Edit Theme Color at Cursor	Edit the theme color hex value directly at the current cursor position. Detects the token type at the cursor and lets you edit its theme color directly.

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

CHANGE LOG

A problem recently discovered by the developer I tried putting in a badge, but it’s making my eyes hurt.😂

### [0.4.2]

Cleanup: Removed unnecessary image files (themeselect2, theme2) from the project.
Maintenance: Cleaned up and optimized internal files.

### 0.4.1 — Status Bar Compact Hover Fix

Maintenance

We reduced the repository size by removing unnecessary images (e.g., images/screenshots/). = simplified the configuration by removing unnecessary CSS files, Markdownlint settings, and unused workflow files.
updated .vscodeignore to optimize packaging.
reorganized the code structure, including moving error handling sample code to semantic color mapping.

✨ Fixed

Corrected statusBarItem.compactHoverForeground contrast issue
Fixed an issue where text became invisible when hovering compact status bar items
Ensured consistent behavior across all four theme variants
Improved foreground/background visibility according to VS Code theme color specifications

0.4.0 — Theme Variants & Asset Improvements

✨ Added

Added a variation comparison table to the README
Added Marketplace assets including galleryBanner and updated extension icon
Introduced .vscodeignore to optimize extension packaging

🔧 Improved

Enhanced icon visibility in package.json
Updated README multiple times for clarity, structure, and visuals
Improved WebP auto-conversion workflow
Added semantic color mapping test cases to improve theme quality

🗑 Removed / Cleaned

Removed unused screenshot images (PNG/WebP)
Updated and refined release.yml workflow multiple times

OPEN PREVIOUS CHANGES(CLICK) --- ### 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 site is open source. Improve this page.

cyber-pink-theme

💗 Cyber Pink Theme

CREDIT & LICENSE

SCREENSHOT

NAVIGATION

🎨 Theme & Design

🎨 Color System

📦 Installation

✨ DESIGN PHILOSOPHY & FEATURES

VARIATIONS

🎨 ACCENT COLORS

🎯 SEMANTIC COLORS

🖤 BACKGROUND LAYER

THEME DETAILS

For details on all ColorThemes

Semantic Token Colors in the editor area

Other Key Features

🖥️ INSTALLATION

Install and use it as a theme.

For DEVELOPMENT / For GitHub Repository Installations /

GitHub repository

Select one of the CYBER PINK variants.

📦️ Packaged Install (`.vsix`)

Commands

CHANGE LOG

0.4.0 — Theme Variants & Asset Improvements

REPOSITORY & ISSUES

LICENSE & COPYRIGHT

cyber-pink-theme

💗 Cyber Pink Theme

CREDIT & LICENSE

SCREENSHOT

NAVIGATION

🎨 Theme & Design

🎨 Color System

📦 Installation

✨ DESIGN PHILOSOPHY & FEATURES

VARIATIONS

🎨 ACCENT COLORS

🎯 SEMANTIC COLORS

🖤 BACKGROUND LAYER

THEME DETAILS

For details on all ColorThemes

Semantic Token Colors in the editor area

Other Key Features

🖥️ INSTALLATION

Install and use it as a theme.

For DEVELOPMENT / For GitHub Repository Installations /

GitHub repository

Select one of the CYBER PINK variants.

📦️ Packaged Install (.vsix)

Commands

CHANGE LOG

0.4.0 — Theme Variants & Asset Improvements

REPOSITORY & ISSUES

LICENSE & COPYRIGHT

📦️ Packaged Install (`.vsix`)