💗 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😻

NAVIGATION

✨ 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:

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

1. 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/

2. Restart VS Code.
3. Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and run: Preferences: Color Theme
4. 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

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

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. Copyright (c) 2026 1abcdefggs