SkillAgentSearch skills...

Visual Studio Code

An arctic, north-bluish clean and elegant Visual Studio Code theme.

Install / Use

npx skills add nordtheme/visual-studio-code

Installs into whichever agent you are using.

README

<p align="center"> <a href="https://www.nordtheme.com/ports/visual-studio-code" target="_blank"> <picture> <source srcset="https://raw.githubusercontent.com/nordtheme/web/main/assets/images/ports/visual-studio-code/repository-hero.png" srcset="https://raw.githubusercontent.com/nordtheme/web/main/assets/images/ports/visual-studio-code/repository-hero-2x.png 2x" width="100%" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" /> <img srcset="https://raw.githubusercontent.com/nordtheme/web/main/assets/images/ports/visual-studio-code/repository-hero.png" srcset="https://raw.githubusercontent.com/nordtheme/web/main/assets/images/ports/visual-studio-code/repository-hero-2x.png 2x" width="100%" /> </picture> </a> </p> <p align="center"> <a href="https://github.com/nordtheme/visual-studio-code/releases/latest" target="_blank"> <img src="https://img.shields.io/github/release/nordtheme/visual-studio-code.svg?style=flat-square&label=Release&logo=github&logoColor=eceff4&colorA=4c566a&colorB=88c0d0"/> </a> <a href="https://www.nordtheme.com/docs/ports/visual-studio-code" target="_blank"> <img src="https://img.shields.io/github/release/nordtheme/visual-studio-code.svg?style=flat-square&label=Docs&colorA=4c566a&colorB=88c0d0&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI%2BCiAgICA8cGF0aCBmaWxsPSIjZDhkZWU5IiBkPSJNMTMuNzQ2IDIuODEzYS42Ny42NyAwIDAgMC0uNTU5LS4xMzNMOCAzLjg0OGwtNS4xODgtMS4xOGEuNjY5LjY2OSAwIDAgMC0uNTcuMTMzLjY3Ny42NzcgMCAwIDAtLjI0Mi41MzF2OC4xMzNjLS4wMDguMzIuMjEuNTk4LjUyLjY2OGw1LjMzMiAxLjE5OWguMjk2bDUuMzMyLTEuMmEuNjY4LjY2OCAwIDAgMCAuNTItLjY2N1YzLjMzMmEuNjU5LjY1OSAwIDAgMC0uMjU0LS41MnpNMy4zMzIgNC4xNjhsNCAuODk4djYuNzY2bC00LS44OTh6bTkuMzM2IDYuNzY2bC00IC44OThWNS4wNjZsNC0uODk4em0wIDAiLz4KPC9zdmc%2BCg%3D%3D"/> </a> <a href="https://github.com/nordtheme/visual-studio-code/blob/develop/changelog.md" target="_blank"> <img src="https://img.shields.io/github/release/nordtheme/visual-studio-code.svg?style=flat-square&label=Changelog&logo=github&logoColor=eceff4&colorA=4c566a&colorB=88c0d0"/> </a> </p> <p align="center"> <a href="https://marketplace.visualstudio.com/items/arcticicestudio.nord-visual-studio-code" target="_blank"> <img src="https://vsmarketplacebadge.apphb.com/version/arcticicestudio.nord-visual-studio-code.svg?style=flat-square&label=Extension%20Marketplace&logo=visual-studio-code&logoColor=eceff4&colorA=4c566a&colorB=88c0d0"/> </a> <a href="https://marketplace.visualstudio.com/items/arcticicestudio.nord-visual-studio-code" target="_blank"> <img src="https://vsmarketplacebadge.apphb.com/installs/arcticicestudio.nord-visual-studio-code.svg?style=flat-square&label=Installations&logo=visual-studio-code&logoColor=eceff4&colorA=4c566a&colorB=88c0d0"/> </a> <a href="https://marketplace.visualstudio.com/items/arcticicestudio.nord-visual-studio-code" target="_blank"> <img src="https://vsmarketplacebadge.apphb.com/rating-short/arcticicestudio.nord-visual-studio-code.svg?style=flat-square&label=Rating&logo=visual-studio-code&logoColor=eceff4&colorA=4c566a&colorB=88c0d0"/> </a> </p> <p align="center"> <a href="https://code.visualstudio.com/updates/v1_12" target="_blank"> <img src="https://img.shields.io/static/v1.svg?style=flat-square&label=Compatibility&message=%3E%3D1.12.0&logo=visual-studio-code&logoColor=eceff4&colorA=4c566a&colorB=88c0d0"/> </a> </p> <p align="center"> <a href="https://github.com/svengreb/styleguide-javascript/releases/latest" target="_blank"> <img src="https://img.shields.io/github/release/svengreb/styleguide-javascript.svg?style=flat-square&label=JavaScript%20Style%20Guide&logoColor=eceff4&colorA=4c566a&colorB=88c0d0&logo=javascript"/> </a> <a href="https://github.com/svengreb/styleguide-markdown/releases/latest" target="_blank"> <img src="https://img.shields.io/github/release/svengreb/styleguide-markdown.svg?style=flat-square&label=Markdown%20Style%20Guide&colorA=4c566a&colorB=88c0d0&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzOSIgaGVpZ2h0PSIzOSIgdmlld0JveD0iMCAwIDM5IDM5Ij48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNEOERFRTkiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMS41IDEuNWgzNnYzNmgtMzZ6Ii8%2BPHBhdGggZmlsbD0iI0Q4REVFOSIgZD0iTTIwLjY4MyAyNS42NTVsNS44NzItMTMuNDhoLjU2Nmw1Ljg3MyAxMy40OGgtMS45OTZsLTQuMTU5LTEwLjA1Ni00LjE2MSAxMC4wNTZoLTEuOTk1em0tMi42OTYgMGwtMTMuNDgtNS44NzJ2LS41NjZsMTMuNDgtNS44NzJ2MS45OTVMNy45MzEgMTkuNWwxMC4wNTYgNC4xNnoiLz48L3N2Zz4%3D"/> </a> <a href="https://github.com/svengreb/styleguide-git/releases/latest" target="_blank"> <img src="https://img.shields.io/github/release/svengreb/styleguide-git.svg?style=flat-square&label=Git%20Style%20Guide&logoColor=eceff4&colorA=4c566a&colorB=88c0d0&logo=git"/> </a> </p> <p align="center">An arctic, north-bluish clean and elegant <a href="https://code.visualstudio.com" target="_blank">Visual Studio Code</a> theme.</p> <p align="center">Designed for a fluent and clear workflow based on the <a href="https://www.nordtheme.com" target="_blank">Nord</a> color palette.</p> <p align="center"> <a href="https://www.nordtheme.com/ports/visual-studio-code" target="_blank"> <img src="https://raw.githubusercontent.com/nordtheme/web/main/assets/images/ports/visual-studio-code/ui-overview-jsx.png"/> </a> </p>

Getting Started

Visit the [official website][nord-home] to learn all about the [syntax highlighting][nord-home#syntax] features, details and elements of the [UI and editor elements][nord-home#editor-details] and the [one-click setup][nord-home#setup].

Learn about the [installation and activation][nord-docs-home-install], how to [customize][nord-docs-home-custom] and [develop][nord-docs-home-develop] the theme from the [official documentations][nord-docs-home].

Quick Start

Thanks to the official [VS Code Extension Marketplace][vscode-extmarket-home], Nord Visual Studio Code can be installed with one click.

Open the [extension marketplace][vscode-docs-extmarket] by clicking on the Extensions icon in the [Activity Bar][vscode-docs-ui-actbar]. Search for Nord and click on the <kbd>Install</kbd> button.

<p align="center"> <picture> <img src="https://raw.githubusercontent.com/nordtheme/web/main/assets/images/ports/visual-studio-code/ui-extension-marketplace.png"/> </picture> </p>

See Nord Visual Studio Code's documentation for details about more installation options like a [manual import through a local VSIX extension file][nord-docs-home-install#local].

Activation

To activate the theme click on the gear icon in the Activity Bar and select Color Theme. Search for Nord and confirm the color theme change with <kbd>Enter</kbd>.

<p align="center"> <picture> <img src="https://raw.githubusercontent.com/nordtheme/web/main/assets/images/ports/visual-studio-code/ui-color-theme-select.png"/> </picture> </p>

See Nord Visual Studio Code's documentation for details about [more activation options][nord-docs-home-install#activation].

Features

<div align="center"> <p><strong>Your IDE. Your style.</strong></p> <p>A unified UI and editor syntax element design provides a clutter-free and fluidly merging appearance.</p> </div> <p align="center"> <picture> <img src="https://raw.githubusercontent.com/nordtheme/web/main/assets/images/ports/visual-studio-code/ui-overview-go.png"/> </picture> </p> <div align="center"> <p><strong>Beautiful code to keep focused.</strong></p> <p>The editor color scheme supports a wide range of programming languages — From bundled definitions up to many popular third-party syntax extensions.</p> </div> <p align="center"> <picture> <img src="https://raw.githubusercontent.com/nordtheme/web/main/assets/images/ports/visual-studio-code/editor-syntax-go.png"/> </picture> </p> <div align="center"><p><strong>Small details with unobtrusive styles.</strong></p><p>Popular and common code editor features like search result marker and brace matching are designed to get out of your way with a visually attractive appearance.</p></div> <p align="center"> <picture> <img src="https://raw.githubusercontent.com/nordtheme/web/main/assets/images/ports/visual-studio-code/editor-syntax-go-comments.png"/> </picture> </p>

Contributing

Nord is an open source project and we love to receive contributions from the [community][nord-comm]!

There are many ways to contribute, from [writing- and improving documentation and tutorials][nord-contrib-guide-docs], [reporting bugs][nord-contrib-guide-bugs], [submitting enhancement suggestions][nord-contrib-guide-enhance] that can be added to Nord by [submitting pull requests][nord-contrib-guide-pr].

Please take a moment to read Nord's full [contributing guide][nord-contrib-guide] to learn about the development process, the project's used [styleguides][nord-contrib-guide-styles], [branch organization][nord-contrib-guide-branching] and [versioning][nord-contrib-guide-versioning] model.

The guide also includes information about [minimal, complete, and verifiable examples][nord-contrib-guide-mcve] and other ways to contribute to the project like [improving existing issues][nord-contrib-guide-impr-issues] and [giving feedback on issues and pull requests][nord-contrib-guide-feedback].

<p align="center"> <picture> <source srcset="https://raw.githubusercontent.com/nordtheme/assets/main/static/images/elements/separators/iceberg/footer/dark/spaced.png" srcset="https://raw.githubusercontent.com/nordtheme/assets/main/static/images/elements/separators/iceberg/footer/dark/spaced-2x.png 2x" width="100%" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" /> <source srcset="https://raw.githubusercontent.com/nordtheme/assets/main/static/images/elements/separators/iceberg/footer/light/spaced.png" srcset="https://raw.githubusercontent.com/nordthe

Related Skills

View on GitHub
GitHub Stars1.1k
CategoryDevelopment
Updated11d ago
Forks90

Languages

JavaScript

Security Score

100/100

Audited on Jul 28, 2026

No findings