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.activeBackground#3b4252
  • activityBar.activeBorder#91e2f9
  • activityBar.background#2e3440
  • activityBar.dropBackground#3b4252
  • activityBar.foreground#d8dee9
  • activityBarBadge.background#91e2f9
  • activityBarBadge.foreground#2e3440
  • badge.background#91e2f9
  • badge.foreground#2e3440
  • button.background#91e2f9ee
  • button.foreground#2e3440
  • button.hoverBackground#91e2f9
  • button.secondaryBackground#434c5e
  • button.secondaryForeground#d8dee9
  • button.secondaryHoverBackground#4c566a
  • charts.blue#8db0e6
  • charts.foreground#d8dee9
  • charts.green#a8c98b
  • charts.lines#91e2f9
  • charts.orange#d08770
  • charts.purple#d198c7
  • charts.red#bf616a
  • charts.yellow#ebcb8b
  • debugConsole.errorForeground#bf616a
  • debugConsole.infoForeground#91e2f9
  • debugConsole.sourceForeground#7d8494
  • debugConsole.warningForeground#ebcb8b
  • debugConsoleInputIcon.foreground#8db0e6
  • debugExceptionWidget.background#4c566a
  • debugExceptionWidget.border#2e3440
  • debugToolBar.background#3b4252
  • descriptionForeground#d8dee9e6
  • diffEditor.insertedTextBackground#8db0e633
  • diffEditor.removedTextBackground#bf616a4d
  • dropdown.background#3b4252
  • dropdown.border#3b4252
  • dropdown.foreground#d8dee9
  • editor.background#2e3440
  • editor.findMatchBackground#91e2f966
  • editor.findMatchHighlightBackground#91e2f933
  • editor.findRangeHighlightBackground#91e2f933
  • editor.focusedStackFrameHighlightBackground#5e81ac
  • editor.foreground#d8dee9
  • editor.hoverHighlightBackground#3b4252
  • editor.inactiveSelectionBackground#434c5ecc
  • editor.inlineValuesBackground#4c566a
  • editor.inlineValuesForeground#eceff4
  • editor.lineHighlightBackground#3b4252
  • editor.lineHighlightBorder#3b4252
  • editor.rangeHighlightBackground#434c5e52
  • editor.selectionBackground#434c5ecc
  • editor.selectionHighlightBackground#434c5ecc
  • editor.stackFrameHighlightBackground#5e81ac
  • editor.wordHighlightBackground#8db0e666
  • editor.wordHighlightStrongBackground#8db0e699
  • editorActiveLineNumber.foreground#d8dee9cc
  • editorBracketHighlight.foreground1#6bd6c1
  • editorBracketHighlight.foreground2#91e2f9
  • editorBracketHighlight.foreground3#8db0e6
  • editorBracketHighlight.foreground4#5e81ac
  • editorBracketHighlight.foreground5#6bd6c1
  • editorBracketHighlight.foreground6#91e2f9
  • editorBracketHighlight.unexpectedBracket.foreground#bf616a
  • editorBracketMatch.background#2e344000
  • editorBracketMatch.border#91e2f9
  • editorCodeLens.foreground#4c566a
  • editorCursor.foreground#d8dee9
  • editorError.border#bf616a00
  • editorError.foreground#bf616a
  • editorGroup.background#2e3440
  • editorGroup.border#3b425201
  • editorGroup.dropBackground#3b425299
  • editorGroupHeader.border#3b425200
  • editorGroupHeader.noTabsBackground#2e3440
  • editorGroupHeader.tabsBackground#2e3440
  • editorGroupHeader.tabsBorder#3b425200
  • editorGutter.addedBackground#a8c98b
  • editorGutter.background#2e3440
  • editorGutter.deletedBackground#bf616a
  • editorGutter.modifiedBackground#ebcb8b
  • editorHint.border#ebcb8b00
  • editorHint.foreground#ebcb8b
  • editorHoverWidget.background#3b4252
  • editorHoverWidget.border#3b4252
  • editorIndentGuide.activeBackground#4c566a
  • editorIndentGuide.background#434c5eb3
  • editorInlayHint.background#434c5e
  • editorInlayHint.foreground#d8dee9
  • editorLineNumber.activeForeground#d8dee9
  • editorLineNumber.foreground#4c566a
  • editorLink.activeForeground#91e2f9
  • editorMarkerNavigation.background#5e81acc0
  • editorMarkerNavigationError.background#bf616ac0
  • editorMarkerNavigationWarning.background#ebcb8bc0
  • editorOverviewRuler.addedForeground#a8c98b
  • editorOverviewRuler.border#3b4252
  • editorOverviewRuler.currentContentForeground#3b4252
  • editorOverviewRuler.deletedForeground#bf616a
  • editorOverviewRuler.errorForeground#bf616a
  • editorOverviewRuler.findMatchForeground#91e2f966
  • editorOverviewRuler.incomingContentForeground#3b4252
  • editorOverviewRuler.infoForeground#8db0e6
  • editorOverviewRuler.modifiedForeground#ebcb8b
  • editorOverviewRuler.rangeHighlightForeground#91e2f966
  • editorOverviewRuler.selectionHighlightForeground#91e2f966
  • editorOverviewRuler.warningForeground#ebcb8b
  • editorOverviewRuler.wordHighlightForeground#91e2f966
  • editorOverviewRuler.wordHighlightStrongForeground#91e2f966
  • editorRuler.foreground#434c5e
  • editorSuggestWidget.background#2e3440
  • editorSuggestWidget.border#3b4252
  • editorSuggestWidget.focusHighlightForeground#91e2f9
  • editorSuggestWidget.foreground#d8dee9
  • editorSuggestWidget.highlightForeground#91e2f9
  • editorSuggestWidget.selectedBackground#434c5e
  • editorSuggestWidget.selectedForeground#d8dee9
  • editorWarning.border#ebcb8b00
  • editorWarning.foreground#ebcb8b
  • editorWhitespace.foreground#4c566ab3
  • editorWidget.background#2e3440
  • editorWidget.border#3b4252
  • errorForeground#bf616a
  • extensionButton.prominentBackground#434c5e
  • extensionButton.prominentForeground#d8dee9
  • extensionButton.prominentHoverBackground#4c566a
  • focusBorder#3b4252
  • foreground#d8dee9
  • gitDecoration.conflictingResourceForeground#5e81ac
  • gitDecoration.deletedResourceForeground#bf616a
  • gitDecoration.ignoredResourceForeground#d8dee966
  • gitDecoration.modifiedResourceForeground#ebcb8b
  • gitDecoration.stageDeletedResourceForeground#bf616a
  • gitDecoration.stageModifiedResourceForeground#ebcb8b
  • gitDecoration.submoduleResourceForeground#6bd6c1
  • gitDecoration.untrackedResourceForeground#a8c98b
  • input.background#3b4252
  • input.border#3b4252
  • input.foreground#d8dee9
  • input.placeholderForeground#d8dee999
  • inputOption.activeBackground#5e81ac
  • inputOption.activeBorder#5e81ac
  • inputOption.activeForeground#eceff4
  • inputValidation.errorBackground#bf616a
  • inputValidation.errorBorder#bf616a
  • inputValidation.infoBackground#8db0e6
  • inputValidation.infoBorder#8db0e6
  • inputValidation.warningBackground#d08770
  • inputValidation.warningBorder#d08770
  • keybindingLabel.background#4c566a
  • keybindingLabel.border#4c566a
  • keybindingLabel.bottomBorder#4c566a
  • keybindingLabel.foreground#d8dee9
  • list.activeSelectionBackground#91e2f9
  • list.activeSelectionForeground#2e3440
  • list.dropBackground#91e2f999
  • list.errorForeground#bf616a
  • list.focusBackground#91e2f999
  • list.focusForeground#d8dee9
  • list.focusHighlightForeground#eceff4
  • list.highlightForeground#91e2f9
  • list.hoverBackground#3b4252
  • list.hoverForeground#eceff4
  • list.inactiveFocusBackground#434c5ecc
  • list.inactiveSelectionBackground#434c5e
  • list.inactiveSelectionForeground#d8dee9
  • list.warningForeground#ebcb8b
  • merge.border#3b425200
  • merge.currentContentBackground#8db0e64d
  • merge.currentHeaderBackground#8db0e666
  • merge.incomingContentBackground#6bd6c14d
  • merge.incomingHeaderBackground#6bd6c166
  • minimap.background#2e3440
  • minimap.errorHighlight#bf616acc
  • minimap.findMatchHighlight#91e2f9
  • minimap.selectionHighlight#91e2f9cc
  • minimap.warningHighlight#ebcb8bcc
  • minimapGutter.addedBackground#a8c98b
  • minimapGutter.deletedBackground#bf616a
  • minimapGutter.modifiedBackground#ebcb8b
  • minimapSlider.activeBackground#434c5eaa
  • minimapSlider.background#434c5e99
  • minimapSlider.hoverBackground#434c5eaa
  • notification.background#3b4252
  • notification.buttonBackground#434c5e
  • notification.buttonForeground#d8dee9
  • notification.buttonHoverBackground#4c566a
  • notification.errorBackground#bf616a
  • notification.errorForeground#2e3440
  • notification.foreground#d8dee9
  • notification.infoBackground#91e2f9
  • notification.infoForeground#2e3440
  • notification.warningBackground#ebcb8b
  • notification.warningForeground#2e3440
  • notificationCenter.border#3b425200
  • notificationCenterHeader.background#2e3440
  • notificationCenterHeader.foreground#91e2f9
  • notificationLink.foreground#91e2f9
  • notifications.background#3b4252
  • notifications.border#2e3440
  • notifications.foreground#d8dee9
  • notificationToast.border#3b425200
  • panel.background#2e3440
  • panel.border#3b4252
  • panelTitle.activeBorder#91e2f900
  • panelTitle.activeForeground#91e2f9
  • panelTitle.inactiveForeground#d8dee9
  • peekView.border#4c566a
  • peekViewEditor.background#2e3440
  • peekViewEditor.matchHighlightBackground#91e2f94d
  • peekViewEditorGutter.background#2e3440
  • peekViewResult.background#2e3440
  • peekViewResult.fileForeground#91e2f9
  • peekViewResult.lineForeground#d8dee966
  • peekViewResult.matchHighlightBackground#91e2f9cc
  • peekViewResult.selectionBackground#434c5e
  • peekViewResult.selectionForeground#d8dee9
  • peekViewTitle.background#3b4252
  • peekViewTitleDescription.foreground#d8dee9
  • peekViewTitleLabel.foreground#91e2f9
  • pickerGroup.border#3b4252
  • pickerGroup.foreground#91e2f9
  • progressBar.background#91e2f9
  • quickInputList.focusBackground#91e2f9
  • quickInputList.focusForeground#2e3440
  • sash.hoverBorder#91e2f9
  • scrollbar.shadow#00000066
  • scrollbarSlider.activeBackground#434c5eaa
  • scrollbarSlider.background#434c5e99
  • scrollbarSlider.hoverBackground#434c5eaa
  • selection.background#91e2f999
  • sideBar.background#2e3440
  • sideBar.border#3b4252
  • sideBar.foreground#d8dee9
  • sideBarSectionHeader.background#3b4252
  • sideBarSectionHeader.foreground#d8dee9
  • sideBarTitle.foreground#d8dee9
  • statusBar.background#3b4252
  • statusBar.border#3b425200
  • statusBar.debuggingBackground#5e81ac
  • statusBar.debuggingForeground#d8dee9
  • statusBar.foreground#d8dee9
  • statusBar.noFolderBackground#3b4252
  • statusBar.noFolderForeground#d8dee9
  • statusBarItem.activeBackground#4c566a
  • statusBarItem.errorBackground#3b4252
  • statusBarItem.errorForeground#bf616a
  • statusBarItem.hoverBackground#434c5e
  • statusBarItem.prominentBackground#3b4252
  • statusBarItem.prominentHoverBackground#434c5e
  • statusBarItem.warningBackground#ebcb8b
  • statusBarItem.warningForeground#2e3440
  • tab.activeBackground#3b4252
  • tab.activeBorder#91e2f900
  • tab.activeBorderTop#91e2f900
  • tab.activeForeground#d8dee9
  • tab.border#3b425200
  • tab.hoverBackground#3b4252cc
  • tab.hoverBorder#91e2f900
  • tab.inactiveBackground#2e3440
  • tab.inactiveForeground#d8dee966
  • tab.lastPinnedBorder#4c566a
  • tab.unfocusedActiveBorder#91e2f900
  • tab.unfocusedActiveBorderTop#91e2f900
  • tab.unfocusedActiveForeground#d8dee999
  • tab.unfocusedHoverBackground#3b4252b3
  • tab.unfocusedHoverBorder#91e2f900
  • tab.unfocusedInactiveForeground#d8dee966
  • terminal.ansiBlack#3b4252
  • terminal.ansiBlue#8db0e6
  • terminal.ansiBrightBlack#4c566a
  • terminal.ansiBrightBlue#8db0e6
  • terminal.ansiBrightCyan#6bd6c1
  • terminal.ansiBrightGreen#a8c98b
  • terminal.ansiBrightMagenta#d198c7
  • terminal.ansiBrightRed#bf616a
  • terminal.ansiBrightWhite#eceff4
  • terminal.ansiBrightYellow#ebcb8b
  • terminal.ansiCyan#91e2f9
  • terminal.ansiGreen#a8c98b
  • terminal.ansiMagenta#d198c7
  • terminal.ansiRed#bf616a
  • terminal.ansiWhite#e5e9f0
  • terminal.ansiYellow#ebcb8b
  • terminal.background#2e3440
  • terminal.foreground#d8dee9
  • terminal.tab.activeBorder#91e2f9
  • textBlockQuote.background#3b4252
  • textBlockQuote.border#8db0e6
  • textCodeBlock.background#4c566a
  • textLink.activeForeground#91e2f9
  • textLink.foreground#91e2f9
  • textPreformat.foreground#6bd6c1
  • textSeparator.foreground#eceff4
  • titleBar.activeBackground#2e3440
  • titleBar.activeForeground#d8dee9
  • titleBar.border#2e344000
  • titleBar.inactiveBackground#2e3440
  • titleBar.inactiveForeground#d8dee966
  • tree.indentGuidesStroke#7d8494
  • walkThrough.embeddedEditorBackground#2e3440
  • welcomePage.buttonBackground#434c5e
  • welcomePage.buttonHoverBackground#4c566a
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#d8dee9ff
emphasisitalic
strongbold
comment#7d8494
constant.character#EBCB8B
constant.character.escape#EBCB8B
constant.language#8db0e6
constant.numeric#d198c7
constant.regexp#EBCB8B
entity.name.class, entity.name.type.class#6bd6c1
entity.name.function#91e2f9
entity.name.tag#8db0e6
entity.other.attribute-name#6bd6c1
entity.other.inherited-class#6bd6c1bold
invalid.deprecated#D8DEE9
invalid.illegal#D8DEE9
keyword#8db0e6
keyword.operator#8db0e6
keyword.other.new#8db0e6
markup.boldbold
markup.changed#EBCB8B
markup.deleted#BF616A
markup.inserted#a8c98b
meta.preprocessor#5E81AC
punctuation#ECEFF4
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters#ECEFF4
punctuation.definition.tag#8db0e6
punctuation.definition.comment, punctuation.end.definition.comment, punctuation.start.definition.comment#7d8494
punctuation.section#ECEFF4
punctuation.section.embedded.begin, punctuation.section.embedded.end#8db0e6
punctuation.terminator#8db0e6
punctuation.definition.variable#8db0e6
storage#8db0e6
string#a8c98b
string.regexp#EBCB8B
support.class#6bd6c1
support.constant#8db0e6
support.function#91e2f9
support.function.construct#8db0e6
support.type#6bd6c1
support.type.exception#6bd6c1
token.debug-token#d198c7
token.error-token#bf616a
token.info-token#91e2f9
token.warn-token#ebcb8b
variable.other#D8DEE9
variable.language#8db0e6
variable.parameter#D8DEE9
punctuation.separator.pointer-access.c#8db0e6
source.c meta.preprocessor.include, source.c string.quoted.other.lt-gt.include#6bd6c1
source.cpp keyword.control.directive.conditional, source.cpp punctuation.definition.directive, source.c keyword.control.directive.conditional, source.c punctuation.definition.directive#5E81ACbold
source.css constant.other.color.rgb-value#d198c7
source.css meta.property-value#91e2f9
source.css keyword.control.at-rule.media, source.css keyword.control.at-rule.media punctuation.definition.keyword#D08770
source.css punctuation.definition.keyword#8db0e6
source.css support.type.property-name#D8DEE9
source.diff meta.diff.range.context#6bd6c1
source.diff meta.diff.header.from-file#6bd6c1
source.diff punctuation.definition.from-file#6bd6c1
source.diff punctuation.definition.range#6bd6c1
source.diff punctuation.definition.separator#8db0e6
entity.name.type.module.elixir#6bd6c1
variable.other.readwrite.module.elixir#D8DEE9bold
constant.other.symbol.elixir#D8DEE9bold
variable.other.constant.elixir#6bd6c1
source.go constant.other.placeholder.go#EBCB8B
source.java comment.block.documentation.javadoc punctuation.definition.entity.html#8db0e6
source.java constant.other#D8DEE9
source.java keyword.other.documentation#6bd6c1
source.java keyword.other.documentation.author.javadoc#6bd6c1
source.java keyword.other.documentation.directive, source.java keyword.other.documentation.custom#6bd6c1
source.java keyword.other.documentation.see.javadoc#6bd6c1
source.java meta.method-call meta.method#91e2f9
source.java meta.tag.template.link.javadoc, source.java string.other.link.title.javadoc#6bd6c1
source.java meta.tag.template.value.javadoc#91e2f9
source.java punctuation.definition.keyword.javadoc#6bd6c1
source.java punctuation.definition.tag.begin.javadoc, source.java punctuation.definition.tag.end.javadoc#7d8494
source.java storage.modifier.import#6bd6c1
source.java storage.modifier.package#6bd6c1
source.java storage.type#6bd6c1
source.java storage.type.annotation#D08770
source.java storage.type.generic#6bd6c1
source.java storage.type.primitive#8db0e6
source.js punctuation.decorator, source.js meta.decorator variable.other.readwrite, source.js meta.decorator entity.name.function#D08770
source.js meta.object-literal.key#91e2f9
source.js storage.type.class.jsdoc#6bd6c1
source.js string.quoted.template punctuation.quasi.element.begin, source.js string.quoted.template punctuation.quasi.element.end, source.js string.template punctuation.definition.template-expression#8db0e6
source.js string.quoted.template meta.method-call.with-arguments#ECEFF4
source.js string.template meta.template.expression support.variable.property, source.js string.template meta.template.expression variable.other.object#D8DEE9
source.js support.type.primitive#8db0e6
source.js variable.other.object#D8DEE9
source.js variable.other.readwrite.alias#6bd6c1
source.js meta.embedded.line meta.brace.square, source.js meta.embedded.line meta.brace.round, source.js string.quoted.template meta.brace.square, source.js string.quoted.template meta.brace.round#ECEFF4
text.html.basic constant.character.entity.html#EBCB8B
text.html.basic constant.other.inline-data#D08770italic
text.html.basic meta.tag.sgml.doctype#5E81AC
text.html.basic punctuation.definition.entity#8db0e6
source.properties entity.name.section.group-title.ini#91e2f9
source.properties punctuation.separator.key-value.ini#8db0e6
text.html.markdown markup.fenced_code.block, text.html.markdown markup.fenced_code.block punctuation.definition#6bd6c1
markup.heading#91e2f9
text.html.markdown markup.inline.raw, text.html.markdown markup.inline.raw punctuation.definition.raw#6bd6c1
text.html.markdown markup.italicitalic
text.html.markdown markup.underline.linkunderline
text.html.markdown beginning.punctuation.definition.list#8db0e6
text.html.markdown beginning.punctuation.definition.quote#6bd6c1
text.html.markdown markup.quote#7d8494
text.html.markdown constant.character.math.tex#8db0e6
text.html.markdown punctuation.definition.math.begin, text.html.markdown punctuation.definition.math.end#5E81AC
text.html.markdown punctuation.definition.function.math.tex#91e2f9
text.html.markdown punctuation.math.operator.latex#8db0e6
text.html.markdown punctuation.definition.heading#8db0e6
text.html.markdown punctuation.definition.constant, text.html.markdown punctuation.definition.string#8db0e6
text.html.markdown constant.other.reference.link, text.html.markdown string.other.link.description, text.html.markdown string.other.link.title#91e2f9
source.perl punctuation.definition.variable#D8DEE9
source.php meta.function-call, source.php meta.function-call.object#91e2f9
source.python entity.name.function.decorator, source.python meta.function.decorator support.type#D08770
source.python meta.function-call.generic#91e2f9
source.python support.type#91e2f9
source.python variable.parameter.function.language#D8DEE9
source.python meta.function.parameters variable.parameter.function.language.special.self#8db0e6
source.css.scss punctuation.definition.interpolation.begin.bracket.curly, source.css.scss punctuation.definition.interpolation.end.bracket.curly#8db0e6
source.css.scss variable.interpolation#D8DEE9italic
source.ts punctuation.decorator, source.ts meta.decorator variable.other.readwrite, source.ts meta.decorator entity.name.function, source.tsx punctuation.decorator, source.tsx meta.decorator variable.other.readwrite, source.tsx meta.decorator entity.name.function#D08770
source.ts meta.object-literal.key, source.tsx meta.object-literal.key#D8DEE9
source.ts meta.object-literal.key entity.name.function, source.tsx meta.object-literal.key entity.name.function#91e2f9
source.ts support.class, source.ts support.type, source.ts entity.name.type, source.ts entity.name.class, source.tsx support.class, source.tsx support.type, source.tsx entity.name.type, source.tsx entity.name.class#6bd6c1
source.ts support.constant.math, source.ts support.constant.dom, source.ts support.constant.json, source.tsx support.constant.math, source.tsx support.constant.dom, source.tsx support.constant.json#6bd6c1
source.ts support.variable, source.tsx support.variable#D8DEE9
source.ts meta.embedded.line meta.brace.square, source.ts meta.embedded.line meta.brace.round, source.tsx meta.embedded.line meta.brace.square, source.tsx meta.embedded.line meta.brace.round#ECEFF4
text.xml entity.name.tag.namespace#6bd6c1
text.xml keyword.other.doctype#5E81AC
text.xml meta.tag.preprocessor entity.name.tag#5E81AC
text.xml string.unquoted.cdata, text.xml string.unquoted.cdata punctuation.definition.string#D08770italic
source.yaml entity.name.tag#6bd6c1
Nord Bright by jeembaa - VS Code Theme