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#353535
  • activityBar.dropBackground#75757526
  • activityBar.foreground#e2e2e2
  • activityBar.inactiveForeground#535763
  • activityBarBadge.background#ffca38
  • activityBarBadge.foreground#292929
  • badge.background#ffca38
  • badge.foreground#252525
  • diffEditor.insertedTextBackground#bad76119
  • diffEditor.insertedTextBorder#00000000
  • diffEditor.removedTextBackground#ff657a19
  • diffEditor.removedTextBorder#00000000
  • editor.background#2b2b2b
  • editor.inactiveSelectionBackground#e2e2e20c
  • editor.selectionBackground#e2e2e226
  • editorGroup.border#2b2b2b
  • editorGroup.dropBackground#75757526
  • editorGroup.emptyBackground#2b2b2b
  • editorGroup.focusedEmptyBorder#2b2b2b
  • editorGroupHeader.noTabsBackground#2b2b2b
  • editorGroupHeader.tabsBackground#2b2b2b
  • editorGroupHeader.tabsBorder#2b2b2b
  • editorGutter.addedBackground#bad761
  • editorGutter.background#2b2b2b
  • editorGutter.deletedBackground#ff657a
  • editorGutter.modifiedBackground#ffca38
  • editorLineNumber.activeForeground#eaeaea
  • editorLineNumber.foreground#b7b7b7
  • editorOverviewRuler.addedForeground#bad761
  • editorOverviewRuler.border#282a3a
  • editorOverviewRuler.currentContentForeground#3a3d4b
  • editorOverviewRuler.deletedForeground#ff657a
  • editorOverviewRuler.errorForeground#ff657a
  • editorOverviewRuler.findMatchForeground#eaf2f126
  • editorOverviewRuler.incomingContentForeground#3a3d4b
  • editorOverviewRuler.infoForeground#9cd1bb
  • editorOverviewRuler.modifiedForeground#ff9b5e
  • editorOverviewRuler.rangeHighlightForeground#eaf2f126
  • editorOverviewRuler.selectionHighlightForeground#eaf2f126
  • editorOverviewRuler.warningForeground#ff9b5e
  • editorOverviewRuler.wordHighlightForeground#eaf2f126
  • editorOverviewRuler.wordHighlightStrongForeground#eaf2f126
  • editorPane.background#2b2b2b
  • errorForeground#ff657a
  • focusBorder#696d77
  • gitDecoration.conflictingResourceForeground#ff9b5e
  • gitDecoration.deletedResourceForeground#ff657a
  • gitDecoration.ignoredResourceForeground#535763
  • gitDecoration.modifiedResourceForeground#bad761
  • gitDecoration.untrackedResourceForeground#ff9b5e
  • list.activeSelectionBackground#353535
  • list.activeSelectionForeground#ffca38
  • list.dropBackground#75757526
  • list.errorForeground#ff657a
  • list.focusBackground#2f2f2f
  • list.focusForeground#ffca38
  • list.highlightForeground#ffca38
  • list.hoverBackground#353535
  • list.hoverForeground#ffca38
  • list.inactiveFocusBackground#2f2f2f
  • list.inactiveSelectionBackground#353535
  • list.inactiveSelectionForeground#ffca38
  • list.invalidItemForeground#ff657a
  • list.warningForeground#ff9b5e
  • listFilterWidget.background#2f2f2f
  • listFilterWidget.noMatchesOutline#ff657a
  • listFilterWidget.outline#2f2f2f
  • pickerGroup.border#282a3a
  • pickerGroup.foreground#808080
  • scrollbar.shadow#252525
  • sideBar.background#2f2f2f
  • sideBar.dropBackground#75757526
  • sideBarSectionHeader.background#353535
  • sideBarSectionHeader.foreground#b7b7b7
  • sideBarTitle.foreground#e2e2e2
  • statusBar.background#252525
  • statusBar.foreground#e2e2e2
  • terminal.ansiBlack#3a3d4b
  • terminal.ansiBlue#ff9b5e
  • terminal.ansiBrightBlack#696d77
  • terminal.ansiBrightBlue#ff9b5e
  • terminal.ansiBrightCyan#9cd1bb
  • terminal.ansiBrightGreen#bad761
  • terminal.ansiBrightMagenta#c39ac9
  • terminal.ansiBrightRed#ff657a
  • terminal.ansiBrightWhite#eaf2f1
  • terminal.ansiBrightYellow#ffd76d
  • terminal.ansiCyan#9cd1bb
  • terminal.ansiGreen#bad761
  • terminal.ansiMagenta#c39ac9
  • terminal.ansiRed#ff657a
  • terminal.ansiWhite#eaf2f1
  • terminal.ansiYellow#ffd76d
  • terminal.selectionBackground#e2e2e226
  • terminalCursor.background#00000000
  • terminalCursor.foreground#b7b7b7
  • titleBar.activeBackground#2f2f2f
  • titleBar.activeForeground#b3b3b3
  • titleBar.border#222
  • titleBar.inactiveBackground#2f2f2f
  • titleBar.inactiveForeground#b3b3b3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword.control.as#b7b7b7
keyword.control.at-rule.import#b7b7b7
keyword.control.conditional#b7b7b7
keyword.control.default#b7b7b7
keyword.control.export#b7b7b7
keyword.control.flow#b7b7b7
keyword.control.from#b7b7b7
keyword.control.import#b7b7b7
keyword.control.loop#b7b7b7
keyword.operator.assignment#b7b7b7
keyword.operator.expression.is#b7b7b7
keyword.operator.new#b7b7b7
keyword.operator.type.annotation.ts#b7b7b7
markup.quote.markdown#b7b7b7
meta.type.function.ts#b7b7b7
meta.type.parameters.ts#b7b7b7
meta.var.expr#b7b7b7
punctuation.terminator.rule#b7b7b7
punctuation.terminator.statement#b7b7b7
storage.type.class#b7b7b7
storage.type.function#b7b7b7
storage.type.interface#b7b7b7
storage.type.type#b7b7b7
constant.language#eb96f8
constant.numeric#eb96f8
string.quoted#eb96f8
string.regexp#eb96f8
string.template#eb96f8
comment#ff7588
keyword.other.debugger#ff7588
keyword.other.important#ff7588
variable.other.jsdoc#ff7588
entity.name.function#68d99d
entity.name.tag#68d99d
entity.name.type#68d99d
entity.name.type.alias#68d99d
entity.name.type.class#68d99d
entity.name.type.interface#68d99d
entity.name.type.module#68d99d
meta.function-call#68d99d
new.expr#68d99d
support.class.component#68d99d
support.function#68d99d
cast.expr.ts#e2e2e2
constant.language.import-export-all#e2e2e2
entity.name.function.tagged-template#e2e2e2
keyword.operator.arithmetic#e2e2e2
keyword.operator.comparison#e2e2e2
keyword.operator.expression#e2e2e2
keyword.operator.increment#e2e2e2
keyword.operator.list#e2e2e2
keyword.operator.logical#e2e2e2
keyword.operator.pipe#e2e2e2
keyword.operator.relational#e2e2e2
keyword.operator.spread#e2e2e2
keyword.operator.ternary#e2e2e2
meta.array.literal#e2e2e2
meta.arrow#e2e2e2
meta.brace.round#e2e2e2
meta.definition.variable#e2e2e2
meta.function-call.arguments#e2e2e2
meta.function.expression#e2e2e2
meta.object-literal.key#e2e2e2
meta.object.type#e2e2e2
meta.objectliteral#e2e2e2
meta.parameters#e2e2e2
meta.return.type#e2e2e2
meta.return.type.arrow#e2e2e2
meta.template.expression#e2e2e2
meta.type.annotation#e2e2e2
punctuation.accessor#e2e2e2
punctuation.separator.comma#e2e2e2
source.python#e2e2e2
support.class#e2e2e2
support.constant#e2e2e2
support.type.primitive.ts#e2e2e2
support.type.property-name.css#e2e2e2
support.variable#e2e2e2
text.html.markdown#e2e2e2
variable.language.arguments#e2e2e2
variable.language.this#e2e2e2
variable.object.property#e2e2e2
variable.other.constant#e2e2e2
variable.other.constant.property#e2e2e2
variable.other.object#e2e2e2
variable.other.property#e2e2e2
variable.other.readwrite#e2e2e2