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.activeBorder#C15F3C
  • activityBar.background#16140f
  • activityBar.border#2b2621
  • activityBar.foreground#e8e6e3
  • activityBar.inactiveForeground#7a7469
  • activityBarBadge.background#C15F3C
  • activityBarBadge.foreground#ffffff
  • badge.background#5a5449
  • badge.foreground#f8f8f8
  • button.background#C15F3C
  • button.border#ffffff12
  • button.foreground#ffffff
  • button.hoverBackground#a94d2f
  • button.secondaryBackground#2d2820
  • button.secondaryForeground#e8e6e3
  • button.secondaryHoverBackground#3a342a
  • chat.editedFileForeground#e2c08d
  • chat.slashCommandBackground#C15F3C66
  • chat.slashCommandForeground#d97b5a
  • checkbox.background#2d2820
  • checkbox.border#3a342a
  • checkbox.foreground#e8e6e3
  • debugToolBar.background#16140f
  • descriptionForeground#9a9287
  • dropdown.background#2d2820
  • dropdown.border#3a342a
  • dropdown.foreground#e8e6e3
  • dropdown.listBackground#1a1816
  • editor.background#1a1816
  • editor.findMatchBackground#C15F3C80
  • editor.findMatchHighlightBackground#C15F3C40
  • editor.foreground#e8e6e3
  • editor.inactiveSelectionBackground#C15F3C20
  • editor.selectionBackground#C15F3C40
  • editor.selectionHighlightBackground#C15F3C26
  • editorCursor.foreground#C15F3C
  • editorGroup.border#2b262117
  • editorGroupHeader.tabsBackground#16140f
  • editorGroupHeader.tabsBorder#2b2621
  • editorGutter.addedBackground#2ea043
  • editorGutter.deletedBackground#f85149
  • editorGutter.modifiedBackground#C15F3C
  • editorIndentGuide.activeBackground1#6e6960
  • editorIndentGuide.background1#3a342a
  • editorLineNumber.activeForeground#B1ADA1
  • editorLineNumber.foreground#6e6960
  • editorOverviewRuler.border#16140f
  • editorWidget.background#1f1c18
  • errorForeground#f85149
  • focusBorder#C15F3C
  • foreground#e8e6e3
  • icon.foreground#e8e6e3
  • input.background#2d2820
  • input.border#3a342a
  • input.foreground#e8e6e3
  • input.placeholderForeground#8f8878
  • inputOption.activeBackground#C15F3C82
  • inputOption.activeBorder#C15F3C
  • inputOption.activeForeground#ffffff
  • keybindingLabel.foreground#e8e6e3
  • list.activeSelectionBackground#C15F3C
  • list.activeSelectionForeground#ffffff
  • list.activeSelectionIconForeground#ffffff
  • list.dropBackground#3a342a
  • list.focusOutline#C15F3C
  • list.highlightForeground#C15F3C
  • list.hoverBackground#2a2620
  • list.inactiveSelectionBackground#3a342a
  • menu.background#1a1816
  • menu.border#3a342a
  • menu.foreground#e8e6e3
  • menu.selectionBackground#C15F3C
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#3a342a
  • notificationCenter.border#2d2820
  • notificationCenterHeader.background#1a1816
  • notificationCenterHeader.foreground#e8e6e3
  • notifications.background#1a1816
  • notifications.border#2b2621
  • notifications.foreground#e8e6e3
  • panel.background#16140f
  • panel.border#2b2621
  • panelInput.border#2b2621
  • panelTitle.activeBorder#C15F3C
  • panelTitle.activeForeground#e8e6e3
  • panelTitle.inactiveForeground#8f8878
  • peekViewEditor.background#1a1816
  • peekViewEditor.matchHighlightBackground#C15F3C66
  • peekViewResult.background#1a1816
  • peekViewResult.matchHighlightBackground#C15F3C66
  • pickerGroup.border#3a342a
  • ports.iconRunningProcessForeground#2ea043
  • progressBar.background#C15F3C
  • quickInput.background#1f1c18
  • quickInput.foreground#e8e6e3
  • quickInputList.focusBackground#C15F3C
  • quickInputList.focusForeground#ffffff
  • settings.dropdownBackground#2d2820
  • settings.dropdownBorder#3a342a
  • settings.headerForeground#ffffff
  • settings.modifiedItemIndicator#C15F3C66
  • sideBar.background#16140f
  • sideBar.border#2b2621
  • sideBar.foreground#e8e6e3
  • sideBarSectionHeader.background#16140f
  • sideBarSectionHeader.border#2b2621
  • sideBarSectionHeader.foreground#e8e6e3
  • sideBarTitle.foreground#e8e6e3
  • statusBar.background#16140f
  • statusBar.border#2b2621
  • statusBar.debuggingBackground#C15F3C
  • statusBar.debuggingForeground#ffffff
  • statusBar.focusBorder#C15F3C
  • statusBar.foreground#e8e6e3
  • statusBar.noFolderBackground#1a1816
  • statusBarItem.focusBorder#C15F3C
  • statusBarItem.hoverBackground#F4F3EE33
  • statusBarItem.hoverForeground#ffffff
  • statusBarItem.prominentBackground#6e696066
  • statusBarItem.remoteBackground#C15F3C
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#1a1816
  • tab.activeBorder#1a1816
  • tab.activeBorderTop#C15F3C
  • tab.activeForeground#e8e6e3
  • tab.border#2b2621
  • tab.hoverBackground#1a1816
  • tab.inactiveBackground#16140f
  • tab.inactiveForeground#8f8878
  • tab.lastPinnedBorder#B1ADA133
  • tab.unfocusedActiveBorder#1a1816
  • tab.unfocusedActiveBorderTop#2b2621
  • tab.unfocusedHoverBackground#1a1816
  • terminal.border#2b2621
  • terminal.foreground#e8e6e3
  • terminal.inactiveSelectionBackground#3a342a
  • terminal.tab.activeBorder#C15F3C
  • textBlockQuote.background#2b2621
  • textBlockQuote.border#5a5449
  • textCodeBlock.background#2b2621
  • textLink.activeForeground#d97b5a
  • textLink.foreground#C15F3C
  • textPreformat.background#3a342a
  • textPreformat.foreground#d0cdc9
  • textSeparator.foreground#2b2621
  • titleBar.activeBackground#16140f
  • titleBar.activeForeground#e8e6e3
  • titleBar.border#2b2621
  • titleBar.inactiveBackground#1a1816
  • titleBar.inactiveForeground#8f8878
  • welcomePage.progress.background#2d2820
  • welcomePage.progress.foreground#C15F3C
  • welcomePage.tileBackground#2b2621
  • welcomePage.tileHoverBackground#2d2820
  • widget.border#2d2820
  • widget.shadow#0000005c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#d4cfc8
emphasisitalic
strongbold
header#C15F3C
comment#7a7469italic
constant.language#C15F3C
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#b5a890
constant.regexp#8b7d6b
entity.name.tag#C15F3C
entity.name.tag.css, entity.name.tag.less#d4a574
entity.other.attribute-name#B1ADA1
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#d4a574
invalid#f85149
markup.underlineunderline
markup.bold#C15F3Cbold
markup.heading#C15F3Cbold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#b5a890
markup.deleted#ce9178
markup.changed#C15F3C
punctuation.definition.quote.begin.markdown#7a7469
punctuation.definition.list.begin.markdown#d97b5a
markup.inline.raw#ce9178
punctuation.definition.tag#8f8878
meta.preprocessor, entity.name.function.preprocessor#C15F3C
meta.preprocessor.string#ce9178
meta.preprocessor.numeric#b5a890
meta.structure.dictionary.key.python#B1ADA1
meta.diff.header#C15F3C
storage#C15F3C
storage.type#C15F3C
storage.modifier, keyword.operator.noexcept#C15F3C
string, meta.embedded.assembly#ce9178
string.tag#ce9178
string.value#ce9178
string.regexp#d16969
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#C15F3C
meta.template.expression#d4cfc8
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded#B1ADA1
keyword#C15F3C
keyword.control#C15F3C
keyword.operator#d4cfc8
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#C15F3C
keyword.other.unit#b5a890
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#C15F3C
support.function.git-rebase#B1ADA1
constant.sha.git-rebase#b5a890
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4cfc8
variable.language#C15F3C
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#dab892
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#9fb3a6
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class, punctuation.separator.namespace.ruby#9fb3a6
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator#c88a91
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#B1ADA1
variable.other.constant, variable.other.enummember#a39888
meta.object-literal.key#B1ADA1
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#ce9178
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#ce9178
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#dab892
keyword.operator.quantifier.regexp#d4a574
constant.character, constant.other.option#C15F3C
constant.character.escape#d4a574
entity.name.label#c8c4bc
token.info-token#d97b5a
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6