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.

  • actionBar.toggledBackground#383a49
  • activityBar.activeBorder#800070
  • activityBar.background#23211e
  • activityBar.border#2b292700
  • activityBar.foreground#D7D7D7
  • activityBar.inactiveForeground#868686
  • activityBarBadge.background#007ACC
  • activityBarBadge.foreground#FFFFFF
  • badge.background#616161
  • badge.foreground#F8F8F8
  • breadcrumb.foreground#9A9896
  • button.background#800070
  • button.border#FFFFFF12
  • button.foreground#FFFFFF
  • button.hoverBackground#215e34
  • button.secondaryBackground#313131
  • button.secondaryForeground#CbC4Be
  • button.secondaryHoverBackground#3C3C3C
  • chat.slashCommandBackground#34414B
  • chat.slashCommandForeground#70E09A
  • checkbox.background#313131
  • checkbox.border#6B6B6B
  • commandCenter.activeBackground#FFFFFF0F
  • commandCenter.activeForeground#CbC4Be
  • commandCenter.background#252320
  • commandCenter.border#2b2a29
  • commandCenter.foreground#cbc4Be
  • debugToolBar.background#23211e
  • descriptionForeground#9B9A98
  • diffEditor.insertedLineBackground#347d3926
  • diffEditor.insertedTextBackground#57ab5a4d
  • diffEditor.removedLineBackground#c93c3726
  • diffEditor.removedTextBackground#f470674d
  • dropdown.background#313131
  • dropdown.border#3C3C3C
  • dropdown.foreground#CbC4Be
  • dropdown.listBackground#2f2c29
  • editor.background#1E1E1E
  • editor.findMatchBackground#9E6A03
  • editor.foreground#D4cac0
  • editor.inactiveSelectionBackground#3A3D41
  • editor.lineHighlightBackground#363330
  • editor.selectionHighlightBackground#ADD6FF26
  • editorGroup.border#FFFFFF17
  • editorGroupHeader.tabsBackground#23211e
  • editorGroupHeader.tabsBorder#2b292700
  • editorGutter.addedBackground#29863a
  • editorGutter.background#2f2c29
  • editorGutter.deletedBackground#F85149
  • editorIndentGuide.activeBackground1#707070
  • editorIndentGuide.background1#404040
  • editorLineNumber.activeForeground#CbC4Be
  • editorLineNumber.foreground#787674
  • editorOverviewRuler.border#010409
  • editorWidget.background#202020
  • errorForeground#F85149
  • focusBorder#800070
  • foreground#CbC4Be
  • icon.foreground#CbC4Be
  • input.background#313131
  • input.border#3C3C3C
  • input.foreground#CbC4Be
  • input.placeholderForeground#A6A6A6
  • inputOption.activeBackground#9332CD82
  • inputOption.activeBorder#9332CD
  • keybindingLabel.foreground#CbC4Be
  • list.activeSelectionIconForeground#FFF
  • list.dropBackground#383B3D
  • menu.background#252526
  • menu.border#454545
  • menu.foreground#CCCCCC
  • menu.selectionBackground#800070
  • menu.selectionForeground#CbC4Be
  • menu.separatorBackground#454545
  • menubar.selectionBackground#262524
  • menubar.selectionForeground#CbC4Be
  • notificationCenterHeader.background#2f2c29
  • notificationCenterHeader.foreground#CbC4Be
  • notifications.background#2f2c29
  • notifications.border#2b292700
  • notifications.foreground#CbC4Be
  • panel.background#23211e
  • panel.border#2b2927
  • panelInput.border#2b292700
  • panelTitle.activeBorder#800070
  • panelTitle.activeForeground#CbC4Be
  • panelTitle.inactiveForeground#9B9A98
  • peekViewEditor.background#2f2c29
  • peekViewEditor.matchHighlightBackground#BB800966
  • peekViewResult.background#2f2c29
  • peekViewResult.matchHighlightBackground#BB800966
  • pickerGroup.border#3C3C3C
  • ports.iconRunningProcessForeground#369432
  • progressBar.background#800070
  • quickInput.background#22201e
  • quickInput.foreground#CCCbCa
  • quickInputList.focusBackground#7D159126
  • quickInputList.focusForeground#CbC4Be
  • quickInputList.focusIconForeground#CbC4Be
  • settings.dropdownBackground#313131
  • settings.dropdownBorder#3C3C3C
  • settings.headerForeground#FFFFFF
  • settings.modifiedItemIndicator#BB800966
  • sideBar.background#23211e
  • sideBar.border#2b2b28
  • sideBar.foreground#CbC4Be
  • sideBarSectionHeader.background#0000
  • sideBarSectionHeader.border#ccc3
  • sideBarSectionHeader.foreground#CbC4Be
  • sideBarTitle.foreground#BBBBBB
  • statusBar.background#23211e
  • statusBar.border#2b2927
  • statusBar.debuggingBackground#800070
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.focusBorder#800070
  • statusBar.foreground#CbC4Be
  • statusBar.noFolderBackground#2f2c29
  • statusBarItem.focusBorder#800070
  • statusBarItem.prominentBackground#6E768166
  • statusBarItem.remoteBackground#16825D
  • statusBarItem.remoteForeground#FFF
  • tab.activeBackground#2f2c29
  • tab.activeBorder#2f2c29
  • tab.activeBorderTop#800070
  • tab.activeForeground#FFFFFF
  • tab.border#2b292700
  • tab.hoverBackground#2f2c29
  • tab.inactiveBackground#23211e
  • tab.inactiveForeground#9B9A98
  • tab.lastPinnedBorder#ccc3
  • tab.selectedBackground#222222
  • tab.selectedBorderTop#93dd98
  • tab.selectedForeground#ffffffa0
  • tab.unfocusedActiveBorder#2f2c29
  • tab.unfocusedActiveBorderTop#2b292700
  • tab.unfocusedHoverBackground#2f2c29
  • terminal.foreground#CbC4Be
  • terminal.inactiveSelectionBackground#3A3D41
  • terminal.tab.activeBorder#800070
  • textBlockQuote.background#2b292700
  • textBlockQuote.border#616161
  • textCodeBlock.background#2b292700
  • textLink.activeForeground#32c03b
  • textLink.foreground#53c25a
  • textPreformat.background#3C3C3C
  • textPreformat.foreground#D0D0D0
  • textSeparator.foreground#21262D
  • titleBar.activeBackground#23211e
  • titleBar.activeForeground#cbc4Be
  • titleBar.border#2b292700
  • titleBar.inactiveBackground#2f2c29
  • titleBar.inactiveForeground#9B9A98
  • welcomePage.progress.foreground#800070
  • welcomePage.tileBackground#2b292700
  • widget.border#303031

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#dede90—
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#f0b915—
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#eab515underline
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator#c586c0—
variable#dad6c8—
support.variable#dad6c8—
variable.parameter, meta.parameter.type.variable, meta.definition.variable.name, entity.name.variable, constant.other.placeholder, string.constant.other.placeholder#fb5d4b—
variable.other.constant, variable.other.enummember#62e769—
meta.object-literal.key, variable.other.property, meta.object.member#90eaa2—
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#eba589—
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#eba589—
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#d16969—
keyword.operator.or.regexp, keyword.control.anchor.regexp#DCDCAA—
keyword.operator.quantifier.regexp#d7ba7d—
constant.character, constant.other.option#56cf6c—
constant.character.escape#d7ba7d—
entity.name.label#C8C8C8—
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#dede90—
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#f0b915—
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#eab515underline
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator#c586c0—
variable#dad6c8—
support.variable#dad6c8—
variable.parameter, meta.parameter.type.variable, meta.definition.variable.name, entity.name.variable, constant.other.placeholder, string.constant.other.placeholder#fb5d4b—
variable.other.constant, variable.other.enummember#62e769—
meta.object-literal.key, variable.other.property, meta.object.member#90eaa2—
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#eba589—
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#eba589—
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#d16969—
keyword.operator.or.regexp, keyword.control.anchor.regexp#DCDCAA—
keyword.operator.quantifier.regexp#d7ba7d—
constant.character, constant.other.option#56cf6c—
constant.character.escape#d7ba7d—
entity.name.label#C8C8C8—
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#D4cac0—
emphasis—italic
strong—bold
header#35bb50bold
comment#7aa965—
constant.language#ff997a—
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#b5cea8—
constant.regexp#6a956a—
entity.name.tag#35bb50—
entity.name.tag.css, entity.name.tag.less#d7ba7d—
entity.other.attribute-name#9aebb8—
entity.other.attribute-name.class.css, source.css entity.other.attribute-name.class, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.parent.less, source.css entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#d7ba7d—
invalid#f44747—
markup.underline—underline
markup.bold#35bb50bold
markup.heading#35bb50bold
markup.italic—italic
markup.strikethrough—strikethrough
markup.inserted#b5cea8—
markup.deleted#eba589—
markup.changed#35bb50—
punctuation.definition.quote.begin.markdown#5a6b99—
punctuation.definition.list.begin.markdown#67e67b—
markup.inline.raw#eba589—
punctuation.definition.tag#808080—
meta.preprocessor, entity.name.function.preprocessor#35bb50—
meta.preprocessor.string#eba589—
meta.preprocessor.numeric#b5cea8—
meta.structure.dictionary.key.python#9aebb8—
meta.diff.header#35bb50—
keyword.control, keyword.control.async, keyword.control.export, keyword.control.import, keyword.control.flow, keyword.control.conditional, keyword.control.loop#C586c0—
storage, storage.type, storage.modifier, keyword.declaration, keyword.other.declaration#e09d57—
string, meta.embedded.assembly#eba589—
string.tag#eba589—
string.value#eba589—
string.regexp#d16969—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#35bb50—
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded#9aebb8—
keyword.operator#d4cac0—
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#C586c0—
keyword.other.unit#b5cea8—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#C586c0—
support.function.git-rebase#9aebb8—
constant.sha.git-rebase#b5cea8—
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4cac0—
variable.language#e09d57—