Quiet Dark Pink
Quiet Dark Pink is a calm, low-glare dark rose theme for Visual Studio Code. It keeps the workbench quiet, uses pink as a focused accent instead of a full-screen wash, and balances warm syntax with cyan, gold, and lavender secondary cues.
Preview
TypeScript and JSX
Rose accents guide the eye through functions, hooks, JSX tags, and active editor chrome while the deep plum background stays calm during longer coding sessions.
CSS and Color Tokens
CSS variables, color swatches, active line highlighting, and bracket accents stay readable without turning the editor into a high-saturation pink surface.
Markdown Notes
Markdown headings, lists, block quotes, inline code, and fenced code blocks keep a soft editorial rhythm for notes, documentation, and README work.
Design Character
- Deep plum editor and workbench surfaces for long sessions.
- Rose accents reserved for the cursor, active tab, focused controls, selections, functions, and key syntax.
- Softer diagnostics, GitLens blame, and Error Lens backgrounds so inline tooling does not overpower code.
- Tuned Explorer, tabs, status bar, Quick Open, suggestions, menus, notifications, minimap, terminal, and Git decorations.
- Semantic highlighting for TypeScript, JSX, CSS, Markdown, JSON, and common extension overlays.
Showcase Files
Use the files in examples/ when capturing screenshots for the Marketplace or README:
examples/theme-showcase.tsx covers TypeScript types, functions, object literals, JSX tags, attributes, arrays, numbers, and strings.examples/theme-showcase.css covers selectors, CSS variables, properties, units, gradients, color swatches, and focus states.examples/theme-notes.md covers headings, lists, block quotes, inline code, and fenced code.
Recommended screenshot setup:
- Open
examples/theme-showcase.tsx and examples/theme-showcase.css side by side.
- Keep the Explorer, tabs, minimap, and status bar visible.
- Open Quick Open once to show the popup surface and selected row.
- Capture a wide editor screenshot, then a second crop focused on the Explorer and status bar.
Install from VSIX
code --install-extension quiet-dark-pink-theme-0.1.1.vsix
Then choose Quiet Dark Pink from Preferences: Color Theme.
Development
npm install
npm run build
npm run package:vsix
The theme source lives in themes/quiet-dark-pink-color-theme.json. Edit that file directly when tuning colors. npm run build:theme validates, normalizes, and formats the theme file inside this repository.
Publishing
VS Code Marketplace:
npx @vscode/vsce login quiet-themes
npm run publish:marketplace
Open VSX:
npx ovsx create-namespace quiet-themes -p <token>
npx ovsx publish quiet-dark-pink-theme-0.1.1.vsix -p <token>
Keep publishing tokens out of source control and terminal history whenever possible.
| |
