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#2e3a4fff
  • activityBar.dropBackground#28344aff
  • activityBar.foreground#59a7bcff
  • activityBar.inactiveForeground#606a7eff
  • activityBarBadge.background#59a7bcbf
  • activityBarBadge.foreground#faffffff
  • badge.background#59a7bcbf
  • badge.foreground#faffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#28344aff
  • breadcrumb.focusForeground#ebf1feff
  • breadcrumb.foreground#7b8497ff
  • breadcrumbPicker.background#2e3a4fff
  • button.background#116f82ff
  • button.foreground#faffffff
  • button.hoverBackground#2d8195ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#2e3a4fff
  • debugToolBar.background#28344aff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#2e3a4fff
  • dropdown.border#2e3a4fff
  • dropdown.foreground#ebf1feff
  • editor.background#28344aff
  • editor.findMatchBackground#58667640
  • editor.findMatchHighlightBackground#58667640
  • editor.findRangeHighlightBackground#58667640
  • editor.focusedStackFrameHighlightBackground#58667640
  • editor.foreground#dae1efff
  • editor.hoverHighlightBackground#58667640
  • editor.inactiveSelectionBackground#58667620
  • editor.lineHighlightBackground#2e3a4fff
  • editor.lineHighlightBorder#2e3a4fff
  • editor.rangeHighlightBackground#58667640
  • editor.selectionBackground#58667640
  • editor.selectionHighlightBackground#58667620
  • editor.snippetFinalTabstopHighlightBorder#58667640
  • editor.snippetTabstopHighlightBackground#58667640
  • editor.stackFrameHighlightBackground#58667640
  • editor.wordHighlightBackground#58667620
  • editor.wordHighlightStrongBackground#58667620
  • editorActiveLineNumber.foreground#7b8497ff
  • editorBracketMatch.background#58667620
  • editorBracketMatch.border#74a1cbff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#d2dff5ff
  • editorError.foreground#be515fff
  • editorGroup.border#2e3a4fff
  • editorGroup.dropBackground#28344aff
  • editorGroupHeader.noTabsBackground#28344aff
  • editorGroupHeader.tabsBackground#2e3a4fff
  • editorGutter.addedBackground#0c2600ff
  • editorGutter.background#28344aff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#53000bff
  • editorGutter.modifiedBackground#13212eff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#2e3a4fff
  • editorHoverWidget.border#2e3a4fff
  • editorIndentGuide.activeBackground#3e4a5fff
  • editorIndentGuide.background#364156ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#7b8497ff
  • editorLineNumber.foreground#606a7eff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#be515fff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#2d4d16ff
  • editorOverviewRuler.border#2e3a4fff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#831930ff
  • editorOverviewRuler.errorForeground#be515fbf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#384755ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#28344aff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#2e3a4fff
  • editorSuggestWidget.border#2e3a4fff
  • editorSuggestWidget.foreground#ebf1feff
  • editorSuggestWidget.highlightForeground#ebf1feff
  • editorSuggestWidget.selectedBackground#364156ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#2e3a4fff
  • editorWidget.border#2e3a4fff
  • errorForeground#be515fff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#586676ff
  • foreground#dae1efff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#7b8497ff
  • gitDecoration.modifiedResourceForeground#b8974dff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#84a569ff
  • input.background#28344aff
  • input.foreground#ebf1feff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#59a7bcff
  • inputValidation.errorBackground#380000ff
  • inputValidation.errorBorder#610018ff
  • inputValidation.infoBackground#28344aff
  • inputValidation.infoBorder#485368ff
  • inputValidation.warningBackground#220000ff
  • inputValidation.warningBorder#3d2600ff
  • list.activeSelectionBackground#364156ff
  • list.activeSelectionForeground#ebf1feff
  • list.dropBackground#28344aff
  • list.errorForeground#be515fff
  • list.focusBackground#364156ff
  • list.highlightForeground#ebf1feff
  • list.hoverBackground#364156ff
  • list.inactiveFocusBackground#364156ff
  • list.inactiveSelectionBackground#364156ff
  • list.inactiveSelectionForeground#ebf1feff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#2e3a4fff
  • menu.foreground#b9c1d1ff
  • menu.selectionBackground#364156ff
  • menu.selectionForeground#ebf1feff
  • menu.separatorBackground#485368ff
  • menubar.selectionBackground#364156ff
  • menubar.selectionForeground#ebf1feff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#2e3a4fff
  • notificationLink.foreground#59a7bcff
  • notifications.background#2e3a4fff
  • notifications.border#2e3a4fff
  • panel.background#2e3a4fff
  • panel.border#2e3a4fff
  • panel.dropBackground#28344aff
  • panelTitle.activeBorder#59a7bcff
  • panelTitle.activeForeground#ebf1feff
  • panelTitle.inactiveForeground#a9b1c2ff
  • peekView.border#2e3a4fff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#2e3a4fff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#28344aff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#2e3a4fff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#121f33ff
  • scrollbarSlider.activeBackground#606a7ebf
  • scrollbarSlider.background#485368bf
  • scrollbarSlider.hoverBackground#545e72bf
  • settings.checkboxBackground#28344aff
  • settings.checkboxBorder#606a7eff
  • settings.checkboxForeground#ebf1feff
  • settings.dropdownBackground#2e3a4fff
  • settings.dropdownBorder#2e3a4fff
  • settings.dropdownForeground#ebf1feff
  • settings.dropdownListBorder#3e4a5fff
  • settings.headerForeground#deeeffff
  • settings.modifiedItemIndicator#586676ff
  • settings.numberInputBackground#2e3a4fff
  • settings.numberInputForeground#ebf1feff
  • settings.textInputBackground#2e3a4fff
  • settings.textInputForeground#ebf1feff
  • sideBar.background#2e3a4fff
  • sideBar.dropBackground#28344aff
  • sideBar.foreground#a9b1c2ff
  • sideBarSectionHeader.background#2e3a4fff
  • sideBarSectionHeader.foreground#606a7eff
  • sideBarTitle.foreground#606a7eff
  • statusBar.background#364156ff
  • statusBar.debuggingBackground#8c0400ff
  • statusBar.debuggingForeground#a9b1c2ff
  • statusBar.foreground#a9b1c2ff
  • statusBar.noFolderBackground#470765ff
  • statusBar.noFolderForeground#a9b1c2ff
  • tab.activeBackground#2e3a4fff
  • tab.activeBorder#59a7bcff
  • tab.activeForeground#ebf1feff
  • tab.activeModifiedBorder#59a7bcbf
  • tab.border#2e3a4fff
  • tab.inactiveBackground#2e3a4fff
  • tab.inactiveForeground#a9b1c2ff
  • tab.inactiveModifiedBorder#59a7bcbf
  • tab.unfocusedActiveForeground#ebf1feff
  • tab.unfocusedActiveModifiedBorder#59a7bc80
  • tab.unfocusedInactiveForeground#a9b1c2ff
  • tab.unfocusedInactiveModifiedBorder#59a7bc80
  • terminal.ansiBlack#35425cff
  • terminal.ansiBlue#75a2ccff
  • terminal.ansiBrightBlack#465675ff
  • terminal.ansiBrightBlue#75a2ccff
  • terminal.ansiBrightCyan#7dbfbeff
  • terminal.ansiBrightGreen#9ec082ff
  • terminal.ansiBrightMagenta#d3a0caff
  • terminal.ansiBrightRed#c85a67ff
  • terminal.ansiBrightWhite#e5f0ffff
  • terminal.ansiBrightYellow#efca7eff
  • terminal.ansiCyan#75c3d8ff
  • terminal.ansiGreen#9ec082ff
  • terminal.ansiMagenta#d3a0caff
  • terminal.ansiRed#c85a67ff
  • terminal.ansiWhite#dfeafcff
  • terminal.ansiYellow#efca7eff
  • terminal.background#28344aff
  • terminal.border#2e3a4fff
  • terminal.foreground#dae1efff
  • terminal.selectionBackground#58667640
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#2e3a4fff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#59a7bcff
  • textLink.foreground#59a7bcff
  • textPreformat.foreground#d3a0caff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#2e3a4fff
  • titleBar.activeForeground#a9b1c2ff
  • titleBar.inactiveBackground#2e3a4fff
  • titleBar.inactiveForeground#606a7eff
  • widget.shadow#1d2a3eff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#dae1efff
emphasisitalic
strongbold
header#000080
comment#465675ff
constant.language#75a2ccff
constant.numeric#bc8ab3ff
constant.regexp#efca7eff
entity.name.tag#75a2ccff
entity.name.tag.css#7dbfbeff
entity.other.attribute-name#7dbfbeff
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss#7dbfbeff
invalid#f44747
markup.underlineunderline
markup.bold#75a2ccffbold
markup.heading#75a2ccffbold
markup.italicitalic
markup.inserted#bc8ab3ff
markup.deleted#9ec082ff
markup.changed#75a2ccff
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796e6
markup.inline.raw#9ec082ff
punctuation.definition.tag#e5f0ffff
meta.preprocessor#75a2ccff
meta.preprocessor.string#9ec082ff
meta.preprocessor.numeric#bc8ab3ff
meta.structure.dictionary.key.python#dae1efff
meta.diff.header#75a2ccff
storage#75a2ccff
storage.type#75a2ccff
storage.modifier#75a2ccff
string#9ec082ff
string.tag#9ec082ff
string.value#9ec082ff
string.regexp#9ec082ff
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#75a2ccff
meta.template.expression#d4d4d4
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#dae1efff
keyword#75a2ccff
keyword.control#75a2ccff
keyword.operator#75a2ccff
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python#75a2ccff
keyword.other.unit#bc8ab3ff
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#75a2ccff
support.function.git-rebase#75c3d8ff
constant.sha.git-rebase#bc8ab3ff
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4
variable.language#75a2ccff
entity.name.function, support.function, support.constant.handlebars#75c3d8ff
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#7dbfbeff
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#7dbfbeff
keyword.control#75a2ccff
variable, meta.definition.variable.name, support.variable, entity.name.variable#dae1efff
meta.object-literal.key#dae1efff
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#9ec082ff
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#e5f0ffff
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#efca7eff
keyword.operator.or.regexp, keyword.control.anchor.regexp#75a2ccff
keyword.operator.quantifier.regexp#bc8ab3ff
constant.character#75a2ccff
constant.character.escape#e5f0ffff
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
string.quoted.double.html#9ec082ff
string.template#9ec082ff
storage.type.function#75a2ccff
support.class.component.js#75a2ccff
variable.parameter#d2dff5ff
variable.other.property#dae1efff
support.function, support.constant.handlebars#75c3d8ff
support.type, support.class, support.constant.math#7dbfbeff
support.type.vendored.property-name, support.type.property-name#dae1efff
support.function#75c3d8ff
variable.other.constant#dae1efff
meta.brace.round.js, meta.brace.square.js, punctuation#e5f0ffff
support.type.property-name.json#dae1efff
storage.type.function.arrow.js, storage.type.function.arrow.ts, storage.type.function.arrow.tsx#75a2ccff
punctuation.definition.keyword.css, punctuation.definition.directive.c, punctuation.definition.heading.markdown#75a2ccff
entity.name.type.class, entity.name.type.module#7dbfbeff
punctuation.definition.comment.python, punctuation.definition.comment.js, punctuation.definition.comment.cpp, punctuation.definition.comment.begin.css, punctuation.definition.comment.end.css, punctuation.definition.list.begin.markdown#465675ff
markup.headingnormal

Shiki preview

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

Loading...

Dainty – Nord - Coding Theme