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#0d0f12
  • activityBar.dropBackground#232530
  • activityBar.foreground#e2e7ef
  • activityBarBadge.background#6ab0a3
  • activityBarBadge.foreground#0d0f12
  • badge.background#6ab0a3
  • badge.foreground#0d0f12
  • button.background#2b313c
  • button.foreground#e2e7ef
  • button.hoverBackground#464f61
  • debugExceptionWidget.background#464f61
  • debugExceptionWidget.border#0d0f12
  • debugToolBar.background#232530
  • descriptionForeground#e2e7efe6
  • diffEditor.insertedTextBackground#508aaa33
  • diffEditor.removedTextBackground#aa505d4d
  • dropdown.background#232530
  • dropdown.border#232530
  • dropdown.foreground#e2e7ef
  • editor.background#0d0f12
  • editor.findMatchBackground#6ab0a366
  • editor.findMatchHighlightBackground#6ab0a333
  • editor.findRangeHighlightBackground#6ab0a333
  • editor.foreground#e2e7ef
  • editor.hoverHighlightBackground#232530
  • editor.inactiveSelectionBackground#2b313ccc
  • editor.lineHighlightBackground#232530
  • editor.lineHighlightBorder#232530
  • editor.rangeHighlightBackground#2b313c52
  • editor.selectionBackground#2b313ccc
  • editor.selectionHighlightBackground#2b313ccc
  • editor.wordHighlightBackground#508aaa66
  • editor.wordHighlightStrongBackground#508aaa99
  • editorBracketMatch.background#0d0f1200
  • editorBracketMatch.border#6ab0a3
  • editorCodeLens.foreground#464f61
  • editorCursor.foreground#e2e7ef
  • editorError.border#aa505d00
  • editorError.foreground#aa505d
  • editorGroup.border#23253001
  • editorGroup.dropBackground#23253099
  • editorGroup.emptyBackground#0d0f12
  • editorGroupHeader.noTabsBackground#0d0f12
  • editorGroupHeader.tabsBackground#0d0f12
  • editorGroupHeader.tabsBorder#23253000
  • editorGutter.addedBackground#9ebf82
  • editorGutter.background#0d0f12
  • editorGutter.deletedBackground#aa505d
  • editorGutter.modifiedBackground#ead88b
  • editorHint.border#ead88b00
  • editorHint.foreground#ead88b
  • editorHoverWidget.background#232530
  • editorHoverWidget.border#232530
  • editorIndentGuide.activeBackground#464f61
  • editorIndentGuide.background#2b313cb3
  • editorLineNumber.activeForeground#e2e7ef
  • editorLineNumber.foreground#464f61
  • editorLink.activeForeground#6ab0a3
  • editorMarkerNavigation.background#508aaac0
  • editorMarkerNavigationError.background#aa505dc0
  • editorMarkerNavigationWarning.background#ead88bc0
  • editorOverviewRuler.addedForeground#9ebf82
  • editorOverviewRuler.border#232530
  • editorOverviewRuler.currentContentForeground#232530
  • editorOverviewRuler.deletedForeground#aa505d
  • editorOverviewRuler.errorForeground#aa505d
  • editorOverviewRuler.findMatchForeground#6ab0a366
  • editorOverviewRuler.incomingContentForeground#232530
  • editorOverviewRuler.infoForeground#508aaa
  • editorOverviewRuler.modifiedForeground#ead88b
  • editorOverviewRuler.rangeHighlightForeground#6ab0a366
  • editorOverviewRuler.selectionHighlightForeground#6ab0a366
  • editorOverviewRuler.warningForeground#ead88b
  • editorOverviewRuler.wordHighlightForeground#6ab0a366
  • editorOverviewRuler.wordHighlightStrongForeground#6ab0a366
  • editorRuler.foreground#2b313c
  • editorSuggestWidget.background#0d0f12
  • editorSuggestWidget.border#232530
  • editorSuggestWidget.foreground#e2e7ef
  • editorSuggestWidget.highlightForeground#6ab0a3
  • editorSuggestWidget.selectedBackground#2b313c
  • editorWarning.border#ead88b00
  • editorWarning.foreground#ead88b
  • editorWhitespace.foreground#464f61b3
  • editorWidget.background#0d0f12
  • editorWidget.border#232530
  • errorForeground#aa505d
  • extensionButton.prominentBackground#2b313c
  • extensionButton.prominentForeground#e2e7ef
  • extensionButton.prominentHoverBackground#464f61
  • focusBorder#232530
  • foreground#e2e7ef
  • gitDecoration.conflictingResourceForeground#508aaa
  • gitDecoration.deletedResourceForeground#aa505d
  • gitDecoration.ignoredResourceForeground#e2e7ef66
  • gitDecoration.modifiedResourceForeground#ead88b
  • gitDecoration.submoduleResourceForeground#699caf
  • gitDecoration.untrackedResourceForeground#9ebf82
  • input.background#232530
  • input.border#232530
  • input.foreground#e2e7ef
  • input.placeholderForeground#e2e7ef99
  • inputOption.activeBackground#508aaa
  • inputOption.activeBorder#508aaa
  • inputValidation.errorBackground#aa505d
  • inputValidation.errorBorder#aa505d
  • inputValidation.infoBackground#508aaa
  • inputValidation.infoBorder#508aaa
  • inputValidation.warningBackground#c88470
  • inputValidation.warningBorder#c88470
  • list.activeSelectionBackground#6ab0a3
  • list.activeSelectionForeground#0d0f12
  • list.dropBackground#6ab0a399
  • list.errorForeground#aa505d
  • list.focusBackground#6ab0a399
  • list.focusForeground#e2e7ef
  • list.highlightForeground#6ab0a3
  • list.hoverBackground#232530
  • list.hoverForeground#f1f3f7
  • list.inactiveFocusBackground#2b313ccc
  • list.inactiveSelectionBackground#2b313c
  • list.inactiveSelectionForeground#e2e7ef
  • list.warningForeground#ead88b
  • merge.border#23253000
  • merge.currentContentBackground#508aaa4d
  • merge.currentHeaderBackground#508aaa66
  • merge.incomingContentBackground#699caf4d
  • merge.incomingHeaderBackground#699caf66
  • minimap.findMatchHighlight#6ab0a3
  • notificationCenter.border#23253000
  • notificationCenterHeader.background#0d0f12
  • notificationCenterHeader.foreground#6ab0a3
  • notificationLink.foreground#6ab0a3
  • notifications.background#232530
  • notifications.border#0d0f12
  • notifications.foreground#e2e7ef
  • notificationToast.border#23253000
  • panel.background#0d0f12
  • panel.border#232530
  • panelTitle.activeBorder#6ab0a300
  • panelTitle.activeForeground#6ab0a3
  • panelTitle.inactiveForeground#e2e7ef
  • peekView.border#464f61
  • peekViewEditor.background#0d0f12
  • peekViewEditor.matchHighlightBackground#6ab0a34d
  • peekViewEditorGutter.background#0d0f12
  • peekViewResult.background#0d0f12
  • peekViewResult.fileForeground#6ab0a3
  • peekViewResult.lineForeground#e2e7ef66
  • peekViewResult.matchHighlightBackground#6ab0a3cc
  • peekViewResult.selectionBackground#2b313c
  • peekViewResult.selectionForeground#e2e7ef
  • peekViewTitle.background#232530
  • peekViewTitleDescription.foreground#e2e7ef
  • peekViewTitleLabel.foreground#6ab0a3
  • pickerGroup.border#232530
  • pickerGroup.foreground#6ab0a3
  • progressBar.background#6ab0a3
  • scrollbar.shadow#00000066
  • scrollbarSlider.activeBackground#2b313caa
  • scrollbarSlider.background#2b313c99
  • scrollbarSlider.hoverBackground#2b313caa
  • selection.background#6ab0a399
  • sideBar.background#0d0f12
  • sideBar.border#232530
  • sideBar.foreground#e2e7ef
  • sideBarSectionHeader.background#232530
  • sideBarSectionHeader.foreground#e2e7ef
  • sideBarTitle.foreground#e2e7ef
  • statusBar.background#232530
  • statusBar.border#23253000
  • statusBar.debuggingBackground#508aaa
  • statusBar.debuggingForeground#e2e7ef
  • statusBar.foreground#e2e7ef
  • statusBar.noFolderBackground#232530
  • statusBar.noFolderForeground#e2e7ef
  • statusBarItem.activeBackground#464f61
  • statusBarItem.hoverBackground#2b313c
  • statusBarItem.prominentBackground#232530
  • statusBarItem.prominentHoverBackground#2b313c
  • tab.activeBackground#232530
  • tab.activeBorder#6ab0a300
  • tab.activeBorderTop#6ab0a300
  • tab.activeForeground#e2e7ef
  • tab.border#23253000
  • tab.hoverBackground#232530cc
  • tab.hoverBorder#6ab0a300
  • tab.inactiveBackground#0d0f12
  • tab.inactiveForeground#e2e7ef66
  • tab.unfocusedActiveBorder#6ab0a300
  • tab.unfocusedActiveBorderTop#6ab0a300
  • tab.unfocusedActiveForeground#e2e7ef99
  • tab.unfocusedHoverBackground#232530b3
  • tab.unfocusedHoverBorder#6ab0a300
  • tab.unfocusedInactiveForeground#e2e7ef66
  • terminal.ansiBlack#131419
  • terminal.ansiBlue#508aaa
  • terminal.ansiBrightBlack#464f61
  • terminal.ansiBrightBlue#5c9fc4
  • terminal.ansiBrightCyan#70bcd1
  • terminal.ansiBrightGreen#b3d893
  • terminal.ansiBrightMagenta#cea3c6
  • terminal.ansiBrightRed#c45c6b
  • terminal.ansiBrightWhite#f1f3f7
  • terminal.ansiBrightYellow#ffeb96
  • terminal.ansiCyan#699caf
  • terminal.ansiGreen#9ebf82
  • terminal.ansiMagenta#88528c
  • terminal.ansiRed#aa505d
  • terminal.ansiWhite#eceff4
  • terminal.ansiYellow#ead88b
  • terminal.background#0d0f12
  • terminal.foreground#e2e7ef
  • textBlockQuote.background#232530
  • textBlockQuote.border#508aaa
  • textCodeBlock.background#464f61
  • textLink.activeForeground#6ab0a3
  • textLink.foreground#6ab0a3
  • textPreformat.foreground#699caf
  • textSeparator.foreground#f1f3f7
  • titleBar.activeBackground#0d0f12
  • titleBar.activeForeground#e2e7ef
  • titleBar.border#0d0f1200
  • titleBar.inactiveBackground#0d0f12
  • titleBar.inactiveForeground#e2e7ef66
  • tree.indentGuidesStroke#464f61
  • walkThrough.embeddedEditorBackground#0d0f12
  • welcomePage.buttonBackground#2b313c
  • welcomePage.buttonHoverBackground#464f61
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable.other.readwrite, entity.name.variable#e2e7ef—
variable.other, variable.other.constant#e2e7ef—
variable.other.property#6ab0a3—
variable.other.constant.property#6ab0a3—
punctuation#f1f3f7—
punctuation.terminator#f1f3f7—
punctuation.definition.variable#f1f3f7—
punctuation.section.embedded.begin, punctuation.section.embedded.end#f1f3f7—
punctuation.section#f1f3f7—
punctuation.definition.tag#f1f3f7—
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters#f1f3f7—
variable.parameter#e2e7ef—
meta.embedded, source.groovy.embedded#e2e7ef—
emphasis—italic
strong—bold
header#000080—
comment#616e88—
punctuation.definition.comment, punctuation.end.definition.comment, punctuation.start.definition.comment#616e88—
constant.language#508aaa—
constant.numeric, entity.name.operator.custom-literal.number, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#ead88b—
constant.regexp#646695—
entity.name.tag#508aaa—
entity.name.tag.css#699caf—
entity.other.attribute-name#6ab0a3—
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#699caf—
invalid#aa505d—
markup.underline—underline
markup.bold#508aaabold
markup.heading#508aaabold
markup.italic—italic
markup.inserted#ead88b—
markup.deleted#ead88b—
markup.changed#508aaa—
punctuation.definition.quote.begin.markdown#616e88—
punctuation.definition.list.begin.markdown#699caf—
markup.inline.raw#ead88b—
punctuation.definition.tag#508aaa—
meta.preprocessor, entity.name.function.preprocessor#508aaa—
meta.preprocessor.string#ead88b—
meta.preprocessor.numeric#ead88b—
constant.language#699caf—
meta.structure.dictionary.key.python#6ab0a3—
meta.diff.header#508aaa—
storage#508aaa—
storage.type#508aaa—
storage.modifier, keyword.operator.noexcept#508aaa—
string, entity.name.operator.custom-literal.string, meta.embedded.assembly#ead88b—
string.tag#ead88b—
string.value#ead88b—
string.regexp#c88470—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#508aaa—
meta.template.expression#e2e7ef—
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#6ab0a3—
keyword#508aaa—
keyword.control#508aaa—
keyword.operator#e2e7ef—
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike#508aaa—
keyword.other.unit#ead88b—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#508aaa—
support.function.git-rebase#6ab0a3—
constant.sha.git-rebase#ead88b—
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#e2e7ef—
variable.language#508aaa—
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#6ab0a3—
meta.return-type, support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, 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#70bcd1—
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#70bcd1—
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#508aaa—
variable, meta.definition.variable.name, support.variable#6ab0a3—
meta.object-literal.key#6ab0a3—
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#ead88b—
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#ead88b—
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#c88470—
keyword.operator.or.regexp, keyword.control.anchor.regexp#6ab0a3—
keyword.operator.quantifier.regexp#699caf—
constant.character#508aaa—
constant.character.escape#699caf—
entity.name.label#9ea2aa—
token.info-token#70bcd1—
token.warn-token#c88470—
token.error-token#aa505d—
token.debug-token#88528c—