Skip to main content
Coding Theme

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

  • activityBar.background#323846
  • activityBar.foreground#e5e9f0
  • activityBarBadge.background#4d78cc
  • activityBarBadge.foreground#f8fafd
  • badge.background#282c34
  • button.background#404754
  • button.secondaryBackground#30333d
  • button.secondaryForeground#c0bdbd
  • debugToolBar.background#21252b
  • descriptionForeground#d8dee9
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#21252b
  • dropdown.border#21252b
  • editor.background#232731
  • editor.findMatchBackground#42557b
  • editor.findMatchBorder#457dff
  • editor.findMatchHighlightBackground#6199ff2f
  • editor.foreground#a4b2ca
  • editor.lineHighlightBackground#2c313d
  • editor.selectionBackground#67769660
  • editor.selectionHighlightBackground#ffffff10
  • editor.wordHighlightBackground#d2e0ff2f
  • editor.wordHighlightBorder#7f848e
  • editor.wordHighlightStrongBackground#abb2bf26
  • editor.wordHighlightStrongBorder#7f848e
  • editorBracketMatch.background#515a6b
  • editorBracketMatch.border#515a6b
  • editorCursor.background#ffffffc9
  • editorCursor.foreground#528bff
  • editorError.foreground#bf616a
  • editorGroup.border#181a1f
  • editorGroupHeader.tabsBackground#21252b
  • editorGutter.addedBackground#109868
  • editorGutter.deletedBackground#9A353D
  • editorGutter.modifiedBackground#948B60
  • editorHoverWidget.background#21252b
  • editorHoverWidget.border#181a1f
  • editorIndentGuide.activeBackground#c8c8c859
  • editorIndentGuide.background#3b4048
  • editorLineNumber.activeForeground#abb2bf
  • editorLineNumber.foreground#495162
  • editorMarkerNavigation.background#21252b
  • editorRuler.foreground#abb2bf26
  • editorSuggestWidget.background#21252b
  • editorSuggestWidget.border#181a1f
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWarning.foreground#ebcb8b
  • editorWhitespace.foreground#3b4048
  • editorWidget.background#21252b
  • focusBorder#3e4452
  • gitDecoration.ignoredResourceForeground#636b78
  • input.background#1d1f23
  • inputOption.activeBorder#E9436D80
  • list.activeSelectionBackground#2c313a
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#323842
  • list.focusForeground#f0f0f0
  • list.highlightForeground#c5c5c5
  • list.hoverBackground#2c313a
  • list.hoverForeground#fff
  • list.inactiveSelectionBackground#323842
  • list.inactiveSelectionForeground#d7dae0
  • list.warningForeground#d19a66
  • menu.foreground#abb2bf
  • menu.separatorBackground#343a45
  • minimapGutter.addedBackground#109868
  • minimapGutter.deletedBackground#9A353D
  • minimapGutter.modifiedBackground#948B60
  • panelSectionHeader.background#21252b
  • peekViewEditor.background#1b1d23
  • peekViewEditor.matchHighlightBackground#29244b
  • peekViewResult.background#22262b
  • scrollbar.shadow#23252c
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566660
  • scrollbarSlider.hoverBackground#5a637580
  • settings.focusedRowBackground#282c34
  • settings.headerForeground#fff
  • sideBar.background#272c37
  • sideBar.foreground#a4b2ca
  • sideBarSectionHeader.background#282c34
  • sideBarSectionHeader.foreground#abb2bf
  • statusBar.background#3b4252
  • statusBar.debuggingBackground#cc6633
  • statusBar.debuggingBorder#66017a
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#21252b
  • statusBarItem.hoverBackground#2c313a
  • statusBarItem.remoteBackground#6f94b8
  • statusBarItem.remoteForeground#f8fafd
  • tab.activeBackground#3b4252
  • tab.activeForeground#d8dee9
  • tab.border#272c37
  • tab.hoverBackground#303643
  • tab.inactiveBackground#272c37
  • tab.unfocusedHoverBackground#303643
  • terminal.ansiBlack#2e3440
  • terminal.ansiBlue#8fbcbb
  • terminal.ansiBrightBlack#3b4252
  • terminal.ansiBrightBlue#9ec5c4
  • terminal.ansiBrightCyan#9ac9d7
  • terminal.ansiBrightGreen#b0c79c
  • terminal.ansiBrightMagenta#be9db8
  • terminal.ansiBrightRed#c6737b
  • terminal.ansiBrightWhite#d8dee9
  • terminal.ansiBrightYellow#eed4a0
  • terminal.ansiCyan#88c0d0
  • terminal.ansiGreen#a3be8c
  • terminal.ansiMagenta#b48ead
  • terminal.ansiRed#bf616a
  • terminal.ansiWhite#eceff4
  • terminal.ansiYellow#ebcb8b
  • terminal.background#252a34
  • terminal.border#252a34
  • terminal.foreground#a7b4cd
  • terminal.selectionBackground#383f4f
  • textBlockQuote.background#2e3440
  • textBlockQuote.border#4b5362
  • textLink.activeForeground#6fa8a7
  • textLink.foreground#8fbcbb
  • textPreformat.foreground#d19a66
  • titleBar.activeBackground#282c34
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#21252b
  • titleBar.inactiveForeground#6b717d
  • walkThrough.embeddedEditorBackground#2e3440
  • welcomePage.buttonBackground#292f3a
  • welcomePage.buttonHoverBackground#3b4252

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.definition.delayed.unison,punctuation.definition.list.begin.unison,punctuation.definition.list.end.unison,punctuation.definition.ability.begin.unison,punctuation.definition.ability.end.unison,punctuation.operator.assignment.as.unison,punctuation.separator.pipe.unison,punctuation.separator.delimiter.unison,punctuation.definition.hash.unison#6f94b8
variable.other.generic-type.haskell#81a1c1
storage.type.haskell#b48ead
support.variable.magic.python#6f94b8
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python#c4cddd
variable.parameter.function.language.special.self.python#8fbcbb
storage.modifier.lifetime.rust#c4cddd
support.function.std.rust#88c0d0
entity.name.lifetime.rust#8fbcbb
variable.language.rust#6f94b8
support.constant.edge#81a1c1
constant.other.character-class.regexp#6f94b8
keyword.operator.quantifier.regexp#b48ead
punctuation.definition.string.begin,punctuation.definition.string.end#a3be8c
variable.parameter.function#c4cddd
comment markup.link#5c6370
markup.changed.diff#8fbcbb
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff#88c0d0
markup.inserted.diff#a3be8c
markup.deleted.diff#6f94b8
meta.function.c,meta.function.cpp#6f94b8
punctuation.section.block.begin.bracket.curly.cpp,punctuation.section.block.end.bracket.curly.cpp,punctuation.terminator.statement.c,punctuation.section.block.begin.bracket.curly.c,punctuation.section.block.end.bracket.curly.c,punctuation.section.parens.begin.bracket.round.c,punctuation.section.parens.end.bracket.round.c,punctuation.section.parameters.begin.bracket.round.c,punctuation.section.parameters.end.bracket.round.c#aab7ce
punctuation.separator.key-value#c4cddd
keyword.operator.expression.import#88c0d0
support.constant.math#8fbcbb
support.constant.property.math#b48ead
variable.other.constant#5e87b0
storage.type.annotation.java, storage.type.object.array.java#8fbcbb
source.java#6f94b8
punctuation.section.block.begin.java,punctuation.section.block.end.java,punctuation.definition.method-parameters.begin.java,punctuation.definition.method-parameters.end.java,meta.method.identifier.java,punctuation.section.method.begin.java,punctuation.section.method.end.java,punctuation.terminator.java,punctuation.section.class.begin.java,punctuation.section.class.end.java,punctuation.section.inner-class.begin.java,punctuation.section.inner-class.end.java,meta.method-call.java,punctuation.section.class.begin.bracket.curly.java,punctuation.section.class.end.bracket.curly.java,punctuation.section.method.begin.bracket.curly.java,punctuation.section.method.end.bracket.curly.java,punctuation.separator.period.java,punctuation.bracket.angle.java,punctuation.definition.annotation.java,meta.method.body.java#c4cddd
meta.method.java#88c0d0
storage.modifier.import.java,storage.type.java,storage.type.generic.java#8fbcbb
keyword.operator.instanceof.java#81a1c1
meta.definition.variable.name.java#6f94b8
keyword.operator.logical#81A1C1
keyword.operator.bitwise#81A1C1
keyword.operator.channel#81A1C1
support.constant.property-value.scss,support.constant.property-value.css#b48ead
keyword.operator.css,keyword.operator.scss,keyword.operator.less#81A1C1
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#b48ead
punctuation.separator.list.comma.css#c4cddd
support.constant.color.w3c-standard-color-name.css#b48ead
support.type.vendored.property-name.css#56b6c2
support.module.node,support.type.object.module,support.module.node#8fbcbb
entity.name.type.module#8fbcbb
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#6f94b8
support.constant.json#b48ead
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof#81a1c1
support.type.object.console#6f94b8
support.variable.property.process#b48ead
entity.name.function,support.function.console#88c0d0
keyword.operator.misc.rust#c4cddd
keyword.operator.sigil.rust#81a1c1
keyword.operator.delete#81a1c1
support.type.object.dom#56b6c2
support.variable.dom,support.variable.property.dom#6f94b8
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational#81A1C1
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c,keyword.operator.decrement.c,keyword.operator.bitwise.shift.c,keyword.operator.assignment.cpp,keyword.operator.comparison.cpp,keyword.operator.cpp,keyword.operator.increment.cpp,keyword.operator.decrement.cpp,keyword.operator.bitwise.shift.cpp#81a1c1
punctuation.separator.delimiter#c4cddd
punctuation.separator.c,punctuation.separator.cpp#81a1c1
support.type.posix-reserved.c,support.type.posix-reserved.cpp#56b6c2
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp#81a1c1
variable.parameter.function.language.python#b48ead
support.type.python#56b6c2
keyword.operator.logical.python#81a1c1
variable.parameter.function.python#b48ead
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python#c4cddd
meta.function-call.generic.python#88c0d0
constant.character.format.placeholder.other.python#b48ead
keyword.operator#81a1c1
keyword.operator.assignment.compound#81a1c1
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts#81A1C1
keyword#81a1c1
entity.name.namespace#8fbcbb
variable#6f94b8
variable.c#c4cddd
variable.language#8fbcbb
token.variable.parameter.java#c4cddd
import.storage.java#8fbcbb
token.package.keyword#81a1c1
token.package#c4cddd
entity.name.function, meta.require, support.function.any-method, variable.function#88c0d0
entity.name.type.namespace#8fbcbb
support.class, entity.name.type.class#8fbcbb
entity.name.class.identifier.namespace.type#8fbcbb
entity.name.class, variable.other.class.js, variable.other.class.ts#8fbcbb
variable.other.class.php#6f94b8
entity.name.type#8fbcbb
keyword.control#81a1c1
control.elements, keyword.operator.less#b48ead
keyword.other.special-method#88c0d0
storage#81a1c1
token.storage#81a1c1
keyword.operator.expression.delete,keyword.operator.expression.in,keyword.operator.expression.of,keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.expression.typeof,keyword.operator.expression.void#81a1c1
token.storage.type.java#8fbcbb
support.function#88c0d0
support.type.property-name#c4cddd
support.constant.property-value#c4cddd
support.constant.font-name#b48ead
meta.tag#c4cddd
string#a3be8c
constant.other.symbol#56b6c2
constant.numeric#b48ead
constant#b48ead
punctuation.definition.constant#b48ead
entity.name.tag#6f94b8
entity.other.attribute-name#d08770
entity.other.attribute-name.id#88c0d0normal
entity.other.attribute-name.class.css#b48eadnormal
meta.selector#81a1c1
markup.heading#6f94b8
markup.heading punctuation.definition.heading, entity.name.section#88c0d0
keyword.other.unit#6f94b8
markup.bold,todo.bold#b48ead
punctuation.definition.bold#8fbcbb
markup.italic, punctuation.definition.italic,todo.emphasis#81a1c1
emphasis md#81a1c1
entity.name.section.markdown#6f94b8
punctuation.definition.heading.markdown#6f94b8
punctuation.definition.list.begin.markdown#6f94b8
markup.heading.setext#c4cddd
punctuation.definition.bold.markdown#b48ead
markup.inline.raw.markdown#a3be8c
markup.inline.raw.string.markdown#a3be8c
punctuation.definition.list.markdown#6f94b8
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#6f94b8
beginning.punctuation.definition.list.markdown#6f94b8
punctuation.definition.metadata.markdown#6f94b8
markup.underline.link.markdown,markup.underline.link.image.markdown#81a1c1
string.other.link.title.markdown,string.other.link.description.markdown#88c0d0
string.regexp#56b6c2
constant.character.escape#56b6c2
punctuation.section.embedded, variable.interpolation#6f94b8
punctuation.section.embedded.begin,punctuation.section.embedded.end#81a1c1
invalid.illegal#ffffff
invalid.illegal.bad-ampersand.html#c4cddd
invalid.broken#ffffff
invalid.deprecated#ffffff
invalid.unimplemented#ffffff
source.json meta.structure.dictionary.json > string.quoted.json#6f94b8
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#6f94b8
source.json meta.structure.dictionary.json > value.json > string.quoted.json,source.json meta.structure.array.json > value.json > string.quoted.json,source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation,source.json meta.structure.array.json > value.json > string.quoted.json > punctuation#a3be8c
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#56b6c2
support.type.property-name.json#6f94b8
support.type.property-name.json punctuation#6f94b8
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#81a1c1
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#81a1c1
support.other.namespace.use.php,support.other.namespace.use-as.php,entity.other.alias.php,meta.interface.php#8fbcbb
keyword.operator.error-control.php#81a1c1
keyword.operator.type.php#81a1c1
punctuation.section.array.begin.php#c4cddd
punctuation.section.array.end.php#c4cddd
invalid.illegal.non-null-typehinted.php#f44747
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php#8fbcbb
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#88c0d0
punctuation.definition.parameters.begin.bracket.round.php,punctuation.definition.parameters.end.bracket.round.php,punctuation.separator.delimiter.php,punctuation.section.scope.begin.php,punctuation.section.scope.end.php,punctuation.terminator.expression.php,punctuation.definition.arguments.begin.bracket.round.php,punctuation.definition.arguments.end.bracket.round.php,punctuation.definition.storage-type.begin.bracket.round.php,punctuation.definition.storage-type.end.bracket.round.php,punctuation.definition.array.begin.bracket.round.php,punctuation.definition.array.end.bracket.round.php,punctuation.definition.begin.bracket.round.php,punctuation.definition.end.bracket.round.php,punctuation.definition.begin.bracket.curly.php,punctuation.definition.end.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php,punctuation.definition.section.switch-block.start.bracket.curly.php,punctuation.definition.section.switch-block.begin.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php#c4cddd
support.constant.core.rust#b48ead
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#b48ead
entity.name.goto-label.php,support.other.php#88c0d0
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#81A1C1
keyword.operator.regexp.php#81a1c1
keyword.operator.comparison.php#81A1C1
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#81a1c1
meta.function.decorator.python#88c0d0
support.token.decorator.python,meta.function.decorator.identifier.python#56b6c2
function.parameter#c4cddd
function.brace#c4cddd
function.parameter.ruby, function.parameter.cs#c4cddd
constant.language.symbol.ruby#56b6c2
rgb-value#56b6c2
inline-color-decoration rgb-value#b48ead
less rgb-value#b48ead
selector.sass#6f94b8
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#8fbcbb
block.scope.end,block.scope.begin#c4cddd
storage.type.cs#8fbcbb
entity.name.variable.local.cs#6f94b8
token.info-token#88c0d0
token.warn-token#b48ead
token.error-token#f44747
token.debug-token#81a1c1
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#81a1c1
meta.template.expression#c4cddd
keyword.operator.module#81a1c1
support.type.type.flowtype#88c0d0
support.type.primitive#8fbcbb
meta.property.object#6f94b8
variable.parameter.function.js#6f94b8
keyword.other.template.begin#a3be8c
keyword.other.template.end#a3be8c
keyword.other.substitution.begin#a3be8c
keyword.other.substitution.end#a3be8c
keyword.operator.assignment#81A1C1
keyword.operator.assignment.go#8fbcbb
keyword.operator.arithmetic.go, keyword.operator.address.go#81a1c1
entity.name.package.go#8fbcbb
support.type.prelude.elm#56b6c2
support.constant.elm#b48ead
punctuation.quasi.element#81a1c1
constant.character.entity#6f94b8
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#56b6c2
entity.global.clojure#8fbcbb
meta.symbol.clojure#6f94b8
constant.keyword.clojure#56b6c2
meta.arguments.coffee, variable.parameter.function.coffee#6f94b8
source.ini#a3be8c
meta.scope.prerequisites.makefile#6f94b8
source.makefile#8fbcbb
storage.modifier.import.groovy#8fbcbb
meta.method.groovy#88c0d0
meta.definition.variable.name.groovy#6f94b8
meta.definition.class.inherited.classes.groovy#a3be8c
support.variable.semantic.hlsl#8fbcbb
support.type.texture.hlsl, support.type.sampler.hlsl, support.type.object.hlsl, support.type.object.rw.hlsl, support.type.fx.hlsl, support.type.object.hlsl#81a1c1
text.variable, text.bracketed#6f94b8
support.type.swift, support.type.vb.asp#8fbcbb
entity.name.function.xi#8fbcbb
entity.name.class.xi#56b6c2
constant.character.character-class.regexp.xi#6f94b8
constant.regexp.xi#81a1c1
keyword.control.xi#56b6c2
invalid.xi#c4cddd
beginning.punctuation.definition.quote.markdown.xi#a3be8c
beginning.punctuation.definition.list.markdown.xi#41495b
constant.character.xi#88c0d0
accent.xi#88c0d0
wikiword.xi#b48ead
constant.other.color.rgb-value.xi#ffffff
punctuation.definition.tag.xi#5c6370
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition#8fbcbb
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#6f94b8
meta.brace.square#c4cddd
comment, punctuation.definition.comment#41495b
markup.quote.markdown#5c6370
punctuation.definition.block.sequence.item.yaml#c4cddd
constant.language.symbol.elixir, constant.language.symbol.double-quoted.elixir#56b6c2
entity.name.variable.parameter.cs#8fbcbb
entity.name.variable.field.cs#6f94b8
markup.deleted#6f94b8
markup.inserted#a3be8c
markup.underlineunderline
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#BE5046
support.other.namespace.php#c4cddd
variable.other.object#8fbcbb
variable.other.constant.property#6f94b8
entity.other.inherited-class#8fbcbb
entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,entity.other.attribute-name.tsx,variable.parameter,variable.language.superitalic
comment.line.double-slash,comment.block.documentation
keyword.control.import.python,keyword.control.flow.pythonitalic
markup.italic.markdownitalic
support.other.attribute.cpp#d08770

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Nord Dark Pro - Coding Theme