Open-source project
rose-pine/vscode avatar
rose-pine/vscode

Rosé Pine for VS Code is generated, not hand written, and it ships five theme variants

Soho vibes for Visual Studio Code

603 stars31 forksJavaScriptMIT

At a glance

What is it?
rose-pine/vscode is the VS Code port of the Rosé Pine theme, built with pinecone from a shared palette, published under MIT and offering dark, moon and dawn variants plus no italics options. It is a theme, and the interesting part is the generation pipeline behind it.
Who is it for?
Adopt the Rosé Pine VS Code extension if you want a muted, low saturation editor palette and you prefer the dark Moon variant for long sessions, and you are willing to accept that a generated theme follows the upstream palette rather than your own. Do not adopt it if you need a specific syntax colour mapping, since the palette is fixed by the shared theme project, or if you want per language customisation, which the extension does not expose.
Can I use it commercially?
Yes. MIT is a permissive licence: you can use, modify and sell software built on it, as long as you keep its copyright and licence notices.
Is it still maintained?
Yes. The repository last received commits 99 days ago.
What is it written in?
Mainly JavaScript, according to GitHub's language statistics.

Answers come from the project's GitHub data, last synced on October 23, 2026, and from our analysis. They are not legal advice.

Editorial analysis

A theme generated from a palette, not hand tuned in VS Code

The Rosé Pine VS Code extension is described in the repository as soho vibes for Visual Studio Code, and the package description reads as all natural pine, faux fur and a bit of soho vibes for the classy minimalist. That is the marketing. The mechanics are more interesting.

The package.json build script is pinecone followed by npm run format, and the watch script is pinecone in watch mode. So the JSON theme files under themes/ are not written by hand and committed. They are generated from a shared palette by pinecone, which is the same tool the rest of the Rosé Pine family uses, and then formatted with prettier.

The consequence for a user is that this is a build artifact, not a hand curated file. The colours in your editor come from a palette defined elsewhere, and the extension is a rendering of that palette for one editor. If you want to change a colour, you are not editing a JSON file in the extension, you are working out how the palette is composed.

The repository layout says the same thing. There is a pinecone.config.js at the top level, a themes/ directory with the generated output, an icons/ directory, an assets/ directory with the icon and the marketplace banner, and an examples/ directory holding js-ts.ts and vue.vue, which are there so a contributor can see the palette applied to real code rather than to a synthetic snippet.

Six theme entries and a matching icon theme

The contributes section of package.json lists one icon theme and a set of colour themes, and the labels are what you will see in the theme picker.

The icon theme has the id rose-pine-icons, the label Rosé Pine Icons, and it points at ./icons/rose-pine-icon-theme.json.

The colour themes are entries with a label, a uiTheme and a path. The main one is labelled Rosé Pine, with uiTheme set to vs-dark, pointing at ./themes/rose-pine-color-theme.json. Then there is a Rosé Pine (no italics) variant pointing at a separate generated file, and the same pair for Moon: Rosé Pine Moon, and Rosé Pine Moon (no italics). The light entry is Rosé Pine Dawn, with uiTheme set to vs rather than vs-dark, pointing at ./themes/rose-pine-dawn-color-theme.json.

So the matrix is two axes. Base variant, Rosé Pine, Moon and Dawn, crossed with italics on or off, and the no italics variants exist as their own theme files rather than as a setting. That is worth knowing before you install, because choosing Rosé Pine and then discovering that you want italics off means switching to a different entry in the picker, not toggling an option.

The distinction between vs-dark and vs in uiTheme is the standard Visual Studio Code mechanism for telling the editor which of its own base colours to inherit for the parts a theme does not override, and the light Dawn theme is the one that sets vs rather than vs-dark.

Installing it is a marketplace search, not a build

The usage steps in the README are four lines long. Open VS Code, search for Rosé Pine in the extensions panel, install the theme, and choose your variant in Preferences: Color theme. Optionally, enable the included icon theme in Preferences: File Icon Theme.

The extension is published on the Visual Studio Marketplace under the item name mvllow.rose-pine, which is the marketplace listing given as the homepage in the repository.

There is a development path for contributors, and it is the one that reveals how the project is built. The scripts in package.json are build, watch, format, release and version. The build script runs pinecone and then the formatter, the watch script runs pinecone in watch mode so the generated theme files update as you work, and the release script uses np with the no-publish and no-tests flags, so the release flow publishes the extension but skips running the test suite as part of the version bump.

json
	"scripts": {
		"build": "pinecone && npm run format",
		"watch": "pinecone --watch",
		"format": "prettier --write .",
		"release": "npx np@latest --no-publish --no-tests",
		"version": "npm run build && npm run format"
	},

The version script runs the build and the format before the version bump, which is the step that regenerates the committed theme files. For a user none of this matters, but for anyone thinking about forking it, it tells you the theme files have to be regenerated and committed as part of a release.

The three base variants and what they are for

The README gallery shows the three variants with screenshots, and the name of the palette used in them, Cartograph, is credited to a font designer.

Rosé Pine is the base dark theme, and the package itself carries the gallery banner colour #191724 with a theme of dark, so the base variant is the one the marketplace page shows. Rosé Pine Moon is the softer, dimmer dark variant, and Rosé Pine Dawn is the light one, the only entry whose uiTheme is vs rather than vs-dark.

Three variants, one of them light, and each of them also appearing in a no italics form, gives a set of choices that is bigger than the number of names suggests.

What the extension does not do is worth stating as clearly as what it does. There is no configuration in package.json for a user to change a single token colour, no settings entry, and no alternate palette. The package contributes themes and an icon theme, and the contributes section is the entire integration surface. The keyword list, minimal, aesthetic, pastel, classy and soft, describes the intent rather than offering options.

That is a deliberate trade, and it is the reason the project can promise consistency across its ports. The same palette rendered in VS Code, in a terminal, in other editors and in a browser matches, because in each case it comes from the same source. A theme you can configure to taste is a different kind of artefact.

The examples directory is the closest thing to documentation

The repository has a docs/ folder in its layout, but the README itself is short and points at the gallery rather than at prose documentation. The examples/ directory is where a contributor would look to see the palette in action, and it contains exactly two files, js-ts.ts and vue.vue.

That pairing is a deliberate choice about what to demonstrate. One file is TypeScript and JavaScript, which is the language most of the extension's users work in and where most of the token categories appear, and one is a Vue single file component, which shows the palette across markup, script and style inside a single file.

The two-file limit is also a hint about the project's scope. This is not a toolkit with a documented token taxonomy, a colour scale generator and a contribution guide for adding new languages. The upstream palette project, the rose-pine-theme repository referenced from the badge in the README, is where that work would live.

For an engineer deciding whether to adopt the extension, the useful check is narrow and cheap: open the two examples and see whether the palette on real code is the one you want to stare at for eight hours a day. Colour themes are a taste decision, and the screenshots in the README already answer it visually. What the examples add is the detail level, which is where a palette usually surprises people.

MIT, a marketplace publisher, and a repository that moved to a monorepo palette

The licence is MIT, recorded in package.json and with the text in the LICENSE file. There is no copyleft obligation and nothing in the package requires attribution in your own project.

The package fields name mvllow as the publisher, and the README thanks mvllow and fvrests, which points to the history of the project as a community palette rather than a company product. The author field lists Rosé Pine with a contact address at rosepinetheme.com, and the funding and sponsor fields both point at the GitHub sponsors page for the repository.

The repository also has a CHANGELOG.md, which matters more here than it would in an application project, because a theme's whole value is that it does not change under you. A new release that shifts a colour is a small but real annoyance, and the changelog is where you would see it coming.

On maintenance, the repository is not archived and the last push was on 2026-07-16. The recent releases are v2.15.2 on 2026-05-09, v2.15.1 on 2026-04-29 and v2.15.0 on 2026-04-29, so patch releases land close together and version numbers move in the small increments you would expect from a generated theme that follows a palette upstream.

The engines field pins vscode to ^1.57.0, which is the minimum editor version the extension declares support for.

Editorial conclusion

Adopt the Rosé Pine VS Code extension if you want a muted, low saturation editor palette and you prefer the dark Moon variant for long sessions, and you are willing to accept that a generated theme follows the upstream palette rather than your own. Do not adopt it if you need a specific syntax colour mapping, since the palette is fixed by the shared theme project, or if you want per language customisation, which the extension does not expose. Before you install, look at the two example files in examples/, js-ts.ts and vue.vue, to see the palette applied to real tokens, and check the marketplace listing to confirm the variant you want is the one you will get.

Frequently asked questions

How do I install Rosé Pine in VS Code?

Open VS Code, search for Rosé Pine in the extensions panel, install it, and choose your variant in Preferences: Color theme. You can optionally enable the included icon theme in Preferences: File Icon Theme.

What theme variants does the Rosé Pine VS Code extension offer?

Rosé Pine, Rosé Pine Moon and Rosé Pine Dawn, each of which also has a no italics version, plus a matching file icon theme named Rosé Pine Icons. The Dawn variant is the light one, with uiTheme set to vs, while the others use vs-dark.

How are the Rosé Pine VS Code theme files generated?

The package.json build script runs pinecone and then prettier, and the watch script runs pinecone in watch mode, so the JSON files under themes/ are generated from a shared palette rather than written by hand. A pinecone.config.js file at the repository root holds the configuration.

Can I change individual colours in the Rosé Pine VS Code theme?

The package.json contributes a set of themes and one icon theme, and it exposes no settings for overriding individual token colours. The palette comes from the shared Rosé Pine theme project rather than from a configuration file in this extension.

Official sources

  1. License: MIT
  2. Project website
  3. README
  4. Releases
  5. rose-pine/vscode on GitHub
Add this badge to your README

If you maintain this project, the badge below links readers to this analysis and shows its maintenance status from the daily GitHub snapshot. Paste the markdown into your README; add ?metric=license or ?metric=stars to the image URL for a different field.

Add this badge to your README

markdown
[![Hysen Labs](https://hysenlabs.com/badge/rose-pine-vscode.svg)](https://hysenlabs.com/projects/rose-pine-vscode)

Was this useful?