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#c16e6e
  • activityBarBadge.foreground#0d0f12
  • badge.background#c16e6e
  • 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#c16e6e66
  • editor.findMatchHighlightBackground#c16e6e33
  • editor.findRangeHighlightBackground#c16e6e33
  • 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#c16e6e
  • 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#c16e6e
  • 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#c16e6e66
  • editorOverviewRuler.incomingContentForeground#232530
  • editorOverviewRuler.infoForeground#508aaa
  • editorOverviewRuler.modifiedForeground#ead88b
  • editorOverviewRuler.rangeHighlightForeground#c16e6e66
  • editorOverviewRuler.selectionHighlightForeground#c16e6e66
  • editorOverviewRuler.warningForeground#ead88b
  • editorOverviewRuler.wordHighlightForeground#c16e6e66
  • editorOverviewRuler.wordHighlightStrongForeground#c16e6e66
  • editorRuler.foreground#2b313c
  • editorSuggestWidget.background#0d0f12
  • editorSuggestWidget.border#232530
  • editorSuggestWidget.foreground#e2e7ef
  • editorSuggestWidget.highlightForeground#c16e6e
  • 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#c16e6e
  • list.activeSelectionForeground#0d0f12
  • list.dropBackground#c16e6e99
  • list.errorForeground#aa505d
  • list.focusBackground#c16e6e99
  • list.focusForeground#e2e7ef
  • list.highlightForeground#c16e6e
  • 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#c16e6e
  • notificationCenter.border#23253000
  • notificationCenterHeader.background#0d0f12
  • notificationCenterHeader.foreground#c16e6e
  • notificationLink.foreground#c16e6e
  • notifications.background#232530
  • notifications.border#0d0f12
  • notifications.foreground#e2e7ef
  • notificationToast.border#23253000
  • panel.background#0d0f12
  • panel.border#232530
  • panelTitle.activeBorder#c16e6e00
  • panelTitle.activeForeground#c16e6e
  • panelTitle.inactiveForeground#e2e7ef
  • peekView.border#464f61
  • peekViewEditor.background#0d0f12
  • peekViewEditor.matchHighlightBackground#c16e6e4d
  • peekViewEditorGutter.background#0d0f12
  • peekViewResult.background#0d0f12
  • peekViewResult.fileForeground#c16e6e
  • peekViewResult.lineForeground#e2e7ef66
  • peekViewResult.matchHighlightBackground#c16e6ecc
  • peekViewResult.selectionBackground#2b313c
  • peekViewResult.selectionForeground#e2e7ef
  • peekViewTitle.background#232530
  • peekViewTitleDescription.foreground#e2e7ef
  • peekViewTitleLabel.foreground#c16e6e
  • pickerGroup.border#232530
  • pickerGroup.foreground#c16e6e
  • progressBar.background#c16e6e
  • scrollbar.shadow#00000066
  • scrollbarSlider.activeBackground#2b313caa
  • scrollbarSlider.background#2b313c99
  • scrollbarSlider.hoverBackground#2b313caa
  • selection.background#c16e6e99
  • 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#c16e6e00
  • tab.activeBorderTop#c16e6e00
  • tab.activeForeground#e2e7ef
  • tab.border#23253000
  • tab.hoverBackground#232530cc
  • tab.hoverBorder#c16e6e00
  • tab.inactiveBackground#0d0f12
  • tab.inactiveForeground#e2e7ef66
  • tab.unfocusedActiveBorder#c16e6e00
  • tab.unfocusedActiveBorderTop#c16e6e00
  • tab.unfocusedActiveForeground#e2e7ef99
  • tab.unfocusedHoverBackground#232530b3
  • tab.unfocusedHoverBorder#c16e6e00
  • 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#c16e6e
  • textLink.foreground#c16e6e
  • 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#c16e6e
variable.other.constant.property#c16e6e
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
emphasisitalic
strongbold
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#c16e6e
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.underlineunderline
markup.bold#508aaabold
markup.heading#508aaabold
markup.italicitalic
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#c16e6e
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#c16e6e
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#c16e6e
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#c16e6e
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#c16e6e
meta.object-literal.key#c16e6e
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#c16e6e
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

Shiki preview

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

Loading...