Foggy Rose Theme

A soft rose and fog VS Code theme with matched light and dark variants.

Previews

Foggy Rose Theme Light preview Foggy Rose Theme Dark preview

Both screenshots are the real editor with the theme applied. The left one is the light variant, the right one is the dark variant, and both show the same file so you can compare the syntax colours directly.

Introduction

Foggy Rose Theme is a quiet rose colour theme for Visual Studio Code. It is built around a soft pink canvas, a deep plum text colour, and a single magenta accent, with grey-rose tones for the chrome around the editor. The result is warm and low-contrast enough for long reading sessions, while keywords, strings, numbers, and types stay clearly distinguishable.

The extension ships two variants from the same palette:

Foggy Rose Theme Light — a rose-white editor with deep plum text and magenta accents.
Foggy Rose Theme Dark — a deep plum editor with pale rose text and pink accents.

Themes

Both variants theme the editor, sidebar, activity bar, tabs, panels, status bar, terminal, command palette, settings, search, source control, extensions, notifications, and the diff and merge editors, so nothing falls back to the default colours.

Foggy Rose Theme Light

The light variant uses a rose-white editor background (#FFF0FB), deep plum foreground text (#2D252A), and magenta accents (#B63182) for keywords, active tabs, badges, buttons, and focus rings. Sidebar and panels sit on a slightly deeper rose (#EFD1E8) so the editor stays the brightest surface.

Foggy Rose Theme Dark

The dark variant keeps the same identity on a deep plum editor background (#5E224D) with near-white rose text (#F7F5F7) and pink accents (#DF88BD). Sidebar, panel, and status bar use a slightly lighter plum (#6B315A), which separates the chrome from the canvas without harsh contrast.

Palette

Role	Hex	Name
Editor canvas (light)	`#FFF0FB`	rose white
Editor canvas (dark)	`#5E224D`	deep plum
Accent	`#B63182`	magenta rose
Selection	`#E8B2D5`	blush rose
Muted text	`#84757F`	fog grey

Syntax colours are drawn from the same rose and fog family, with a few muted supporting tones so that every token type stays readable in both variants.

Light syntax colours

Token	Hex
Comment	`#84757F`
Keyword, storage, tag	`#B63182`
String	`#90914C`
Number, constant, attribute	`#915921`
Type, support type	`#CD5192`
Function, support function	`#817AA5`
Variable	`#2D252A`

Dark syntax colours

Token	Hex
Comment	`#C894B6`
Keyword, storage, tag	`#DF88BD`
String	`#B5BB7A`
Number, constant, attribute	`#E4B687`
Type, support type	`#E079AD`
Function, support function	`#94A1C0`
Variable	`#F7F5F7`

Installation

Open the Extensions view in VS Code (Ctrl+Shift+X / Cmd+Shift+X).
Search for Foggy Rose Theme.
Click Install.

Alternatively, run the following command from the Command Palette (Ctrl+Shift+P / Cmd+Shift+P):

ext install lilinhuang.foggy-rose-theme

Usage

Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P).
Run Preferences: Color Theme.
Select Foggy Rose Theme Light or Foggy Rose Theme Dark.

To switch quickly between them, use the same command again at any time.

Design Philosophy

Foggy Rose Theme aims to feel calm and slightly hazy: one accent colour, a narrow rose and plum range, and grey-rose neutrals for everything structural. Accents are used sparingly so the eye is drawn to keywords and active UI rather than to the chrome, and the two variants share the same hues so switching between them changes the light, not the mood.

Repository Layout

assets/           icon used by the Marketplace listing
themes/           the two colour theme JSON files
store-assets/     Marketplace screenshots
scripts/          icon and screenshot generation

Feedback

Feedback, suggestions, and contributions are welcome. Please open an issue or pull request on the project repository.