Nord Visual Studio Code Versions Save

↠ VS Code 1.59 (July 2021) introduced a new color token for active terminal tab indicators. It has been added to make it conform with Nord's theme style:

• terminal.tab.activeBorder — color for the border on the side of the terminal tab in the panel.

Before

After

↠ VS Code 1.59 (July 2021) introduced new color tokens for status bar warnings. They have been added and adjusted to match Nord's theme style:

• statusBarItem.warningBackground — the background color used for warning items in the status bar that stand out from other status bar entries to indicate warning conditions.
• statusBarItem.warningForeground — the foreground color used for warning items in the status bar that stand out from other status bar entries to indicate warning conditions.

↠ VS Code 1.60 (August 2021) introduced native, high performance bracket pair colorization (opt-in via editor.bracketPairColorization.enabled setting) to address performance issues of popular extensions. The color tokens have been added and adjusted to match Nord's theme style:

• statusBarItem.warningBackground — the background color used for warning items in the status bar that stand out from other status bar entries to indicate warning conditions.
• statusBarItem.warningForeground — the foreground color used for warning items in the status bar that stand out from other status bar entries to indicate warning conditions.

Note that bracket pair colorization is a feature that does not go well with the design concepts of Nord and the recommendation is therefore to not enable it. Of course this is always a personal preference and the feature be used as you wish, but note that the bracket colors defined by the Nord theme won't be changed on request but users can simply customize it on their own.

Preview

↠ VS Code 1.60 (August 2021) introduced inlay hints for JavaScript and TypeScript (opt-in via editor.inlayHints.enabled), including new color tokens to customize their appereance. They have been added and adjusted to match Nord's theme style:

• editorInlayHint.background — the background color used for inline hint boxes.
• editorInlayHint.foreground — the foreground color used for inline hint boxes.

Before

After

↠ The npm CLI v7 introduced the new package-lock.json format v2 that unlocks the ability to do deterministically reproducible builds and includes everything npm needs to fully build the package tree. Since this is a new major version the current package-lock.json file has been updated to the new format.

At the same time outdated dependencies have been upgraded to their latest, compatible version. This also changed the versions by using the ^ caret range selector to reduce the overhead of updating dependencies.

• @arcticicestudio/eslint-config-base — the minimum versions will be bumped from 0.5.0 to 0.11.0.
• babel-eslint → @babel/eslint-parser — the babel-eslint package is deprecated and is now available as @babel/eslint-parser.
• eslint-plugin-json → eslint-plugin-jsonc — since Visual Studio Code uses JSONC the eslint-plugin-jsonc matches better to the scope of this repository. It also utilizes the ESLint engine by passing the AST to it.
• del-cli — updated from version 1.1.0 to ^4.0.1.
• eslint — updated from version 5.16.0 to ^7.32.0.
• eslint-plugin-import — updated from version 2.17.3 to ^2.24.2.
• eslint-plugin-prettier — updated from version 3.1.0 to ^4.0.0.
• prettier — updated from version 1.17.1 to ^2.4.1.
• remark-cli — updated from version 6.0.1 to ^9.0.0.
• remark-preset-lint-arcticicestudio → @arcticicestudio/remark-preset-lint — the remark-preset-lint-arcticicestudio package is deprecated and is now available as @arcticicestudio/remark-preset-lint. This also includes the linting and adjusting for matches that are found after running with the new rules.
• vsce — updated from version 6.0.1 to ^1.100.0.

↠ VS Code 1.58 (June 2021) introduced syntax highlighting for Markdown math formulas. To adapt the coloring to Nord's style new TextMate rules with the following scopes have been added:

• text.html.markdown constant.character.math.tex — targets constants like \displaystyle and \left.
• text.html.markdown constant.character.math.tex — targets $$ definition markers.
• text.html.markdown punctuation.definition.function.math.tex — targets the \ (backslash) function definition marker.
• text.html.markdown punctuation.math.operator.latex — targets operators like =.

Before

After

↠ In #206 the deprecated list.focusBackground color token was replaced by the new quickInputList.focusBackground token, but somehow in #215 (while resolving merge conflicts) the value was changed to use a alpha layer value of 60%. This is not intended was should use nord8 instead without any transparency.

Before

After

↠ VS Code 1.46 (May 2020) introduced the new inputOption.activeForeground theme token for the foreground color of active inputs which are used in the search view and find widget. The token uses nord6 to make it more conform with Nord's style.

↠ VS Code 1.50 (September 2020) introduced new theme color tokens pinned tabs, Git integration and charts.

The following tokens have been added to make it more conform with Nord's style:

• tab.lastPinnedBorder — border on the right of the last pinned editor to separate from unpinned editors.
• gitDecoration.stageDeletedResourceForeground — foreground color for staged deletions git decorations.
• gitDecoration.stageModifiedResourceForeground — foreground color for staged modifications git decorations.
• Colors intended to be used by data visualization extensions:
  • charts.red
  • charts.blue
  • charts.yellow
  • charts.orange
  • charts.green
  • charts.purple
  • charts.foreground
  • charts.lines

Git Staged State Decorations

Deleted

Modified

Last Tab Separator

Before

After

↠ VS Code 1.52 (November 2020) introduced new theme color tokens for error items in the status bar.

The following tokens have been added to make it more conform with Nord's style:

• statusBarItem.errorBackground — status bar error items background color. Error items stand out from other status bar entries to indicate error conditions.
• statusBarItem.errorForeground — status bar error items foreground color. Error items stand out from other status bar entries to indicate error conditions.

↠ VS Code 1.52 (November 2020) introduced the new sash.hoverBorder theme color token for the sash border in hover state. The token uses nord8 to make it more conform with Nord's style.

Before

After

↠ VS Code 1.52 (November 2020) introduced the new editor.focusedStackFrameHighlightBackground theme color token to highlight the currently focused debugged line in the overview ruler. Additionally, the editor.stackFrameHighlightBackground key has been added that is used to highlight the decoration in the overview ruler on the right of the editor. Both tokens use nord10 to make them more conform with Nord's style.

↠ VS Code 1.54 (February 2021) introduced a breaking change for the focused background color of list/tree UI elements by deprecating the list.focusBackground in favor of the quickInputList.focusBackground theme color token. The advised adaption for theme authors is to simply adopt the same value of the deprecated token.

↠ VS Code 1.56 (April 2021) introduced new colors tokens for secondary buttons of custom dialogs:

• button.secondaryBackground
• button.secondaryForeground
• button.secondaryHoverBackground

This also includes a visual improvement for the current Nord theme styles of primary buttons:

• button.background - nord2 to nord8 with a transparency of ~93%.
• button.foreground - nord4 to nord0.
• button.hoverBackground - nord3 to nord8.

Before

After

↠ VS Code 1.56 (April 2021) introduced new color tokens for keybinding labels. These have been added to make them conform with Nord's theme style:

• keybindingLabel.background — keybinding label background color used to represent a keyboard shortcut.
• keybindingLabel.foreground — keybinding label foreground color used to represent a keyboard shortcut.
• keybindingLabel.border — keybinding label border color used to represent a keyboard shortcut.
• keybindingLabel.bottomBorder — keybinding label border bottom color used to represent a keyboard shortcut.

Command Palette

Before

After

Key Binding Configurations

Before

After

↠ VS Code 1.57 (May 2021) introduced new color tokens for debugger inline values. They have been added to make them conform with Nord's theme style:

• editor.inlineValuesBackground — color for the debug inline value foreground text.
• editor.inlineValuesForeground — color for the debug inline value background.

↠ VS Code 1.46 (May 2020) introduced new debug console colors for text of messages and the input icon.

The following theme keys have been added to make it conform with Nord's theme style:

• debugConsole.infoForeground — foreground color for info messages in the debug console.
• debugConsole.warningForeground — foreground color for warning messages in the debug console.
• debugConsole.errorForeground — foreground color for error messages in the debug console.
• debugConsole.sourceForeground — foreground color for source filenames in the debug console.
• debugConsoleInputIcon.foreground — foreground color for the debug console input marker icon.

↠ VS Code 1.57 (May 2021) introduced new color tokens for the “quick pick“ and “editor suggest“ widgets in focused state to better align with the tree widget styles. These changes broke the current style of Nord and made the theme har to use. The new keys have now been added to make it conform with Nord‘s style:

• editorSuggestWidget.focusHighlightForeground — color of the match highlights in the suggest widget when an item is focused.
• editorSuggestWidget.selectedForeground — foreground color of the selected entry in the suggest widget.
• list.focusHighlightForeground — list/tree foreground color of the match highlights on actively focused items when searching inside the list/tree.
• quickInputList.focusForeground — quick picker foreground color for the focused item.

Editor Suggest Widget

Before

After

(Quick) List

Before

After

↠ The link still included the md file extension that was mainly used for license files some years ago.

↠ Before the eslint-config-arcticicestudio-base NPM package was used which has been deprecated and also deleted from the registry. Because the goal of the deprecation was to move to the new @arcticicestudio/eslint-config-base package anyway it has now been switched.