Customization
Not in agreement with all of Nord Visual Studio Code's design decisions? No problem — simply override every theme style you like.
This is a living document which means it is work in progress, not completed yet and can change at any time while the project is still in development major version zero
0.y.z!
It is totally fine that you not agree to all design decisions and color highlighting assignments — that's the reason why themes exist.
Even though Nord Visual Studio Code comes with sane defaults, it can still be customized down to it's core, using Visual Studio Code's builtin features, by overriding every UI (workbench) and syntax style defined by the theme. It is even possible to set new styles not defined or supported by the theme yet.
Visual Studio Code's workbench.colorCustomizations and editor.tokenColorCustomizations user settings. Both allow to either define global styles or only for a specific theme like Nord Visual Studio Code while leaving other themes unaffected.
While editing the settings.json file all changes will be applied on save and doesn't require to restart VS Code.
Please see the official VS Code documentation on how to customize a color theme for more details and customization examples.
You can use Visual Studio Code's IntelliSense auto-completion feature while adding customizations and read the official theme color reference documentation for a list of all customizable colors.
Also note that the settings.json file uses the JSON5 language syntax that comes with more features than the JSON specification like comments allowing to document fields and their purpose.
UI
To override or define any workbench UI styles of Nord Visual Studio Code, e.g. lists, buttons, or the Activity Bar, add the workbench.colorCustomizations object to your settings and scope the styles to only apply to Nord by adding the [Nord] object as field.
The following example shows how to override the colors of the activity bar and badges:
"workbench.colorCustomizations": {
"[Nord]": {
// Use a brighter (nord1) activity bar background color.
"activityBar.background": "#3b4252",
// Use a darker (nord9) background color for badges
// with brighter a (nord6) foreground color.
"activityBarBadge.background": "#81a1c1",
"activityBarBadge.foreground": "#eceff4"
}
}
Syntax
To override or define any code syntax styles of Nord Visual Studio Code of languages like e.g. Go or JavaScript, add the editor.tokenColorCustomizations object to your settings and scope the styles to only apply to Nord by adding the [Nord] object as field.
VS Code comes with a pre-configured set of syntax tokens, e.g. comments or strings, that apply to all languages for a easy and quick customization for every syntax while the textMateRules array can be used to define explicit TextMate rules to fine-tune styles for every element of all languages.
Using TextMate grammar style rules requires advanced knowledge about the syntax!
Please read the guide about syntax highlighting with TextMate grammars for more details about the syntax and usage guides.
The following example shows how to override the foreground color of all comments and commas for the Go syntax:
"editor.tokenColorCustomizations": {
"[Nord]": {
// Use a 10% brigher foreground color for all comments.
"comments": "#7b88a1",
"textMateRules": [
{
// Also use `nord9` as comma foreground color for Go syntax.
"scope": "punctuation.other.comma.go",
"settings": {
"foreground": "#81a1c1"
}
}
]
}
}
