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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#3a342a
emphasisitalic
strongbold
header#C15F3C
comment#9a9287italic
constant.language#C15F3C
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#8b7d6b
constant.regexp#6e6960
entity.name.tag#C15F3C
entity.name.tag.css, entity.name.tag.less#a94d2f
entity.other.attribute-name#7a7469
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#a94d2f
invalid#f85149
markup.underlineunderline
markup.bold#C15F3Cbold
markup.heading#C15F3Cbold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#8b7d6b
markup.deleted#ce9178
markup.changed#C15F3C
punctuation.definition.quote.begin.markdown#9a9287
punctuation.definition.list.begin.markdown#C15F3C
markup.inline.raw#ce9178
punctuation.definition.tag#7a7469
meta.preprocessor, entity.name.function.preprocessor#C15F3C
meta.preprocessor.string#ce9178
meta.preprocessor.numeric#8b7d6b
meta.structure.dictionary.key.python#7a7469
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#3a342a
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded#7a7469
keyword#C15F3C
keyword.control#C15F3C
keyword.operator#3a342a
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#8b7d6b
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#C15F3C
support.function.git-rebase#7a7469
constant.sha.git-rebase#8b7d6b
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#3a342a
variable.language#C15F3C
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#8b7d6b
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#5a7d6a
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#5a7d6a
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator#a65c66
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#7a7469
variable.other.constant, variable.other.enummember#6e6960
meta.object-literal.key#7a7469
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#8b7d6b
keyword.operator.quantifier.regexp#a94d2f
constant.character, constant.other.option#C15F3C
constant.character.escape#a94d2f
entity.name.label#3a342a
token.info-token#C15F3C
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6