nordtheme / visual-studio-code

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

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

Designed for a fluent and clear workflow based on the Nord color palette.

Getting Started

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

Learn about the installation and activation, how to customize and develop the theme from the official documentations.

Quick Start

Thanks to the official VS Code Extension Marketplace, Nord Visual Studio Code can be installed with one click.

Open the extension marketplace by clicking on the Extensions icon in the Activity Bar. Search for Nord and click on the Install button.

See Nord Visual Studio Code's documentation for details about more installation options like a manual import through a local VSIX extension file.

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

See Nord Visual Studio Code's documentation for details about more activation options.

Features

Your IDE. Your style.

A unified UI and editor syntax element design provides a clutter-free and fluidly merging appearance.

Beautiful code to keep focused.

The editor color scheme supports a wide range of programming languages — From bundled definitions up to many popular third-party syntax extensions.

Small details with unobtrusive styles.

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.

Contributing

Nord is an open source project and we love to receive contributions from the community!

There are many ways to contribute, from writing- and improving documentation and tutorials, reporting bugs, submitting enhancement suggestions that can be added to Nord by submitting pull requests.

Please take a moment to read Nord's full contributing guide to learn about the development process, the project's used styleguides, branch organization and versioning model.

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

Copyright © 2016-present Sven Greb

visual-studio-code's Issues

New tab mouse hover and border styles

There are some new themable color options nord could support, though it's certainly not necessary. The new colors are:

tab.hoverBackground
tab.hoverBorder
tab.unfocusedHoverBackground
tab.unfocusedHoverBorder

I have mine set like this

"workbench.colorCustomizations": {
        "tab.hoverBackground": "#434c5e",
        "tab.hoverBorder": "#d08770",
        "tab.unfocusedHoverBorder": "#88c0d0"
}

The "editor.selectionHighlightBackground" color should have different contrast with "editor.selectionBackground" color

By default, the editor.selectionHighlightBackground have the same color with editor.selectionBackground , it could be confused sometime:

In the screenshot I only selected the fourth a, but the background highlight is confusing.

The editor.selectionHighlightBackground color usually have lower contrast than the editor.selectionBackground

For example:

Default Dark+

Monokai

Monokai Dimmed

Text color issue of Nord theme in extensions of VS Code

VS Code: 1.12.1
OS: Windows 10

Use Arctic Ice Studio's base ESLint config

The currently used ESLint rules should be replaced with the base config's eslint-config-arcticicestudio-base.

VS Code 1.13 workbench theme feature migration

VS Code 1.13 has been released including a bunch of new workbench theme features documented in the official Theme Color Reference.

Tasks

UI

Base Colors

• errorForeground

Input Control

• input.placeholderForeground

List and Trees

• list.inactiveSelectionForeground
• list.hoverForeground
• list.focusForeground

Sidebar

• sideBar.foreground
• sideBar.border
• sideBarSectionHeader.foreground

Editor Groups & Tabs

• editorGroupHeader.tabsBorder
• tab.unfocusedActiveForeground
• tab.unfocusedInactiveForeground

Editor

Rulers

• editorRuler.foreground

Code Lens

• editorCodeLens.foreground

Bracket matches

• editorBracketMatch.background
• editorBracketMatch.border

Overview ruler

• editorOverviewRuler.border

Gutter

• editorGutter.background
• editorGutter.modifiedBackground
• editorGutter.addedBackground
• editorGutter.deletedBackground

Editor Widgets

• editorWidgetBorder

Peek View Colors

• peekViewEditorGutter.background

Merge Conflicts

• merge.currentHeaderBackground
• merge.currentContentBackground
• merge.incomingHeaderBackground
• merge.incomingContentBackground
• merge.border
• editorOverviewRuler.currentContentForeground
• editorOverviewRuler.incomingContentForeground

Status Bar Colors

• statusBar.debuggingForeground
• statusBar.noFolderForeground
• statusBar.noFolderBackground
• statusBar.border

Quick Picker

• pickerGroup.border

Integrated Terminal Colors

• terminal.background
• terminal.foreground

Welcome Page

• welcomePage.buttonBackground
• welcomePage.buttonHoverBackground
• walkThrough.embeddedEditorBackground

Suggestion: Higher-contrast version

Love the theme, but I had to make a couple of tweaks as I found it a tad too pale for late night sessions.
Not sure how active this project is, but I'll share them here in case you'd like to add an alternative variant.

I'm aware that the darker colors are outside the Nord palette, but I think it looks fairly decent without going overboard (like some forks I've seen).

"workbench.colorCustomizations": {
    "editor.selectionHighlightBackground": "#2e3440",
    "editor.selectionHighlightBorder": "#FFFFFF15",
    "editor.background": "#272c36",
    "editorGutter.background": "#272c36",
    "tab.activeBackground": "#2e3440",
    "tab.inactiveBackground": "#272c36",
    "editorGroupHeader.tabsBackground": "#272c36",
    "editorGroupHeader.tabsBorder": "#2e3440",
    "editorLineNumber.foreground": "#4C566A"
},
"editor.tokenColorCustomizations": {
    "textMateRules": [
        {
            "name": "Comment",
            "scope": "comment",
            "settings": {
                "foreground": "#576279",
                "fontStyle": "italic"
            }
        }
    ]
},

Push 0.6.0 update

More theme improvements

• Color of editor squiggles
• Selection color within workbench
• Progress bar coloring with "progressBar.background"
• Changing button color for Install with "extensionButton."

Colors of these can also be changed

• BG/FG color of that Total 494 settings: colored with "badge.background" and "badge.foreground"
• Line below User Settings

---

• Color of the seperator (between Monokai Dimmed and Install Additional Color Themes)

Colors for Git status in File Explorer

VS Code 1.18 (October 2017) introduced new workbench theme keys for the very popular feature request to colorize the Git status in File Explorer documented in the official Theme Color Reference.

The feature can be toggled with the git.decorations.enabled config key. The keys explorer.decorations.colors and explorer.decorations.badges can be used to control the visibility of the colors and badges.

Tasks

UI

Git Colors

• gitDecoration.modifiedResourceForeground
• gitDecoration.deletedResourceForeground
• gitDecoration.untrackedResourceForeground
• gitDecoration.ignoredResourceForeground
• gitDecoration.conflictingResourceForeground
• gitDecoration.submoduleResourceForeground

General theme improvements to keep an eye on

Please add these color customisations to your theme when they are made available
microsoft/vscode#25966

Double underlines under error and warnings

Why are there double underlines under errror and warning in editor? I think only squiggle is more clean.

Different contrast for sidebar and activity bar

Any chance we can get different background color contrasts for the sidebar and the activity bar similar to the default theme?

Theme appears to be broken on latest Insiders build

On the latest Insiders build (1.11.0-insider, commit 01091bb), the theme seems to only change some colors. I've been using it successfully for several weeks up until it broke a few (?) days ago.

For reference, here are two screenshots comparing the default theme and Nord:

Doesn't highlight Go string format placeholders

Version: Nord 0.1.1

The Nord theme is missing colors for constant.other.placeholder.go, which golang uses for Printf (etc) placeholders.

Example of the Solarized theme with the same line of Go code:

I don't really know my way around the theme, but I did a quick test using the escape character color:

<dict>
    <key>name</key>
    <string>[Go] String format placeholder</string>
    <key>scope</key>
    <string>source.go constant.other.placeholder.go</string>
    <key>settings</key>
    <dict>
        <key>foreground</key>
        <string>#EBCB8B</string>
    </dict>
</dict>

Good job on this color scheme, definitely one of my favorites!

Comments not different enough.

I know that much of a user's preference when it comes to a theme can be driven by small changes in the settings of their display. So if others aren't experiencing the same, I apologize.

I find that on my display, and many of my coworkers' displays, the different between comments and the background color is not substantial which causes the comments to be difficult to read when the lighting in the office isn't perfect.

I know that it's not as simple as lightening up the comment (and token) color as that might interfere with the line highlight color but I hope you can find a solution that would make it just a little easier to read.

Overview ruler highlighting

Visual Studio Code version 1.16 introduced new theming color keys for highlighting in the overview ruler.

Use Prettier

Prettier should be used in development with the Prettier → ESLint formatting flow.

Tab activity border

Visual Studio Code version 1.16 introduced new theming color keys to determine the activity of tabs via a bottom-border.

It should be fully transparent to keep the theme flat.

Brightness

The theme is awsome but when used for a long time the white strings brightness makes my eyes so tired.

Status bar background color with no active folder unsupported

The statusBar.noFolderBackground workbench setting got lost after a solved merge conflict between the release version 0.3.0 and 0.4.0.

Change color of word "reference" from referencesCodeLens

Hello, thanks for awesome theme!
Could you please investigate if it's possible to change color of word "reference" in code if option
"typescript.referencesCodeLens.enabled" is true.

Comment end- and start elements of various languages are not colored

This is a follow-up of PR #2.

Some syntaxes are using the punctuation.end.definition.comment and punctuation.start.definition.comment scopes instead of punctuation.definition.comment.end and punctuation.definition.comment.startresulting in uncolored elements.
This should be fixed by adding the mising scopes to the base dict for comment punctuation definitions.

Incorrect installation instructions

The installation instructions should say to run ext install arcticicestudio.nord-visual-studio-code. The current instructions just searches the marketplace for the string nord-visual-studio-code, which doesn't actually even find the theme.

Markdown blockquote text is too dark

Perhaps not constrasting enough is a more accurate description. A better color should be selected. Perhaps to differentiate it from other text, it could be made italic? For now I've just set it to the same color as my comments, which I have at #66738e.

This is text.html.markdown markup.quote.

Keep it Nord

I know you'll give workbench theming after VS Code releases its API for it. This is not about it.

Mattia Astornio has its theme now for VS Code
https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme
and Dracula has it too
https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula

I want you to try out both the themes.
And then reconsider about the color schemes provided here
#8 (comment)

Nord is made to be non-obstructive kind and that's what people love about it. Giving the above workbench theming will make it too obstructive. Please keep it minimal when you release. Thanks! 🙌

colors for structs and typedefs

In C lang, is possible use a color for structs and typedefs?

Use transparent color for scrollbar

The current way the scroll bar hides all the decorations in the right margin.
Please use a transparent color like all other themes

Scrollbar visibility

Please make the scrollbar more visible.

Before:

After:

Snap-in window is not visible

Snap-in window is not visible while dragging it.

Change editorGroup.dropBackground to any other color than background color, with transparency. E.g.
"editorGroup.dropBackground": "#3b425299"

Code info can be covered by scroll bar

Typo in project description

📝 A arctic ... -> An arctic ...

This is a 🔀 sub-task of nord #20.

tmTheme

Implement the main tmTheme file including optimized styles for

• C / C++
• CSS
• diff
• Java
• JavaScript
• HTML
• INI
• Markdown
• PHP
• Python
• Sass (SCSS)
• XML
• YAML

Php variables

Hello. I don't know is bug or not.

VS Code 1.14

VS Code 1.14 breaks heads-up notification label and button colors.

New keys are here: microsoft/vscode#28280

Also 1.14 has introduced keyboard shortcuts as buttons in command palette, maybe there exist few keys for it too...

Migrate to MIT license

Subtask of nordtheme/nord#55

Adapt to the MIT license migration of the main Nord project. Detailed information can be found in the main task ticket.

Tasks

• Update all license SVG badges
• Update the LICENSE content
• Update- and simplify all source code comment header

Stylus

Please support highlight stylus files

Color setting for support.variable is missing

In JS template literals support variables have the same color as strings. For TS setting is there but for JS it is missing.

{
  "name": "[JavaScript] Variables",
  "scope": "source.js support.variable",
  "settings": {
    "foreground": "#D8DEE9"
  }
}

Before:

After:

.vscodeignore

A .vscodeignore file should be added decrease the size of the distributed extension package.

Files and folders that should be ignored:

• assets/ - There is no need to package assets, they are linked to the GitHub repository in all documents
• .github/**
• .vscode/**
• node_modules - Only used during compile time
• .editorconfig - Only relevant for development, no usage in production
• .eslintrc.js - Only relevant for development and testing, no usage in production
• .gitignore - Only relevant for Git, no usage in production
• .npmrc - Only relevant for development and during compile time by npm, no usage in production
• .travis.yml - Only relevant for CI builds, no usage in production
• circle.yml - Only relevant for CI builds, no usage in production
• gulpfile.js - Only relevant for development and during compile time, no usage in production
• yarn.lock - Only relevant for development by Yarn, no usage in production

All entries should be ordered first by their type starting with folders/directory structures and followed by single files. All entries should be sorted alphabetically irrespective of their type.

Comment text is not very visible in added diff view

If this cannot be solved by changing some values in the existing schema, I can also open an issue on VS Code side to request a theme config for this case.

CSS - Distinguish between tags and properties

Hi,
please differentiate colors of tags (like <a> etc.) and properties (like margin-bottom) in css.
Class and id targets use nord7 (both in css and html) and tags use nord9 (both in css and html), so I assume best would be to change the properties color. Please see the attached screenshot. Thanks.

Update syntax color to make them richer

First, thanks a lot for the workbench update. I'm using it and it's awesome.

However, I hope the syntax can be updated a bit to match the richness of Dark+'s syntax highlighting. When I'm working on TS, I rely on colors as visual cues. For example, Type information is always marked as Green.

Here is a pic of Dark+ vs Nord.

Update to new 1.14 constraints for rendering SVG images

Due to security concerns, VS Code version 1.14 introduced a change so SVG images are no more rendered within VS Code with the following contraints:

• The icon provided in package.json may not be an SVG.
• The badges provided in the package.json may not be SVGs unless they are from approved badge providers.
• Image URLs in README.md and CHANGELOG.md need to resolve to https URLs.
• Images in README.md and CHANGELOG.md may not be SVGs unless they are from approved badge providers.
• Images in README.md and CHANGELOG.md may not use data URIs.

Tasks

• Convert the package.json marketplace icon to PNG (x2).
• Convert project banner to PNG (x2).

Color intellisense more

Can't this be colored?

Color function call and self in Python

1. Function name in function call isn't colored in Python, while in other languages it is.
   
   

2. self is not colored in function argument
   

Title bar border

Visual Studio Code version 1.15 introduced a new theme color for title bar border for macOS.

It should be fully transparent to keep the theme flat.

Workbench theming

Avid user of nord palettes here!
I was wondering if you are putting in any work towards the new workbench theming that is going to come to vscode.
microsoft/vscode#3112

I would love to see nord more integrated into vscode like it is in atom with Nord UI. I would be willing to help you on this as well?

Use remark-lint with styleguide preset

remark-lint should be used with the Markdown styleguide preset remark-preset-lint-arcticicestudio.

Flow annotation support

Before:

After:

As you can see export const appStateChannel lost own color definition.

Replace Gulp with npm scripts

gulp.js is a awesome tool to create simple or complex build workflows with streams, but there are also some drawbacks:

• Gulp plugins often get out of date and don’t support new features from the underlying library
• The project depends on the Gulp plugin author and not the library that is being wrapped
• Documentation for Gulp plugins are typically not very robust or comprehensive
• Debugging a Gulp plugin can be frustrating (is the problem in the plugin or in the underlying library?)
• If a plugin doesn't exist already for Gulp you need to write it yourself
• Errors that occur inside a Gulp wrapper aren't always handled very well

All currently implemented Gulp tasks can be migrated to npm scripts by directly using the CLI API of the wrapped library.

Highlighted indent guides

Please provide a value for newly introduced editorIndentGuide.activeBackground to differentiate active indent guide from other indent guides (editorIndentGuide.background).