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#e07e3d
  • activityBar.background#F9F5F0
  • activityBar.border#E8D4C040
  • activityBar.foreground#2D2D2D
  • activityBar.inactiveForeground#8B8178
  • activityBarBadge.background#E8B4A2
  • activityBarBadge.foreground#2D2D2D
  • badge.background#e07e3d
  • badge.foreground#fcfcf0
  • button.background#e07e3d
  • button.foreground#fcfcf0
  • button.hoverBackground#8f6c49
  • button.secondaryBackground#8f6c49
  • button.secondaryForeground#fcfcf0
  • button.secondaryHoverBackground#4a3432
  • checkbox.background#fcfcf0
  • checkbox.border#8f6c49
  • checkbox.foreground#e07e3d
  • debugTokenExpression.boolean#e07e3d
  • debugTokenExpression.error#e07e3d
  • debugTokenExpression.name#4a3432
  • debugTokenExpression.number#e07e3d
  • debugTokenExpression.string#e07e3d
  • debugTokenExpression.value#8f6c49
  • debugToolBar.background#ebe5d5
  • debugToolBar.border#8f6c49
  • debugView.stateLabelBackground#8f6c4930
  • debugView.stateLabelForeground#4a3432
  • debugView.valueChangedHighlight#e07e3d
  • descriptionForeground#8f6c49
  • diffEditor.border#8f6c49
  • diffEditor.insertedLineBackground#8f6c4910
  • diffEditor.insertedTextBackground#8f6c4920
  • diffEditor.removedLineBackground#e07e3d10
  • diffEditor.removedTextBackground#e07e3d20
  • dropdown.background#fcfcf0
  • dropdown.border#8f6c49
  • dropdown.foreground#4a3432
  • dropdown.listBackground#fcfcf0
  • editor.background#F9F5F0
  • editor.findMatchBackground#e07e3d40
  • editor.findMatchBorder#e07e3d
  • editor.findMatchHighlightBackground#8f6c4940
  • editor.findMatchHighlightBorder#8f6c4960
  • editor.findRangeHighlightBackground#8f6c4920
  • editor.focusedStackFrameHighlightBackground#e07e3d30
  • editor.foreground#2D2D2D
  • editor.hoverHighlightBackground#8f6c4920
  • editor.inactiveSelectionBackground#8f6c4930
  • editor.lineHighlightBackground#F5E6D350
  • editor.lineHighlightBorder#E8D4C020
  • editor.rangeHighlightBackground#8f6c4920
  • editor.rangeHighlightBorder#8f6c4940
  • editor.selectionBackground#E8D4C080
  • editor.selectionForeground#4a3432
  • editor.selectionHighlightBackground#E8D4C040
  • editor.selectionHighlightBorder#8f6c4960
  • editor.stackFrameHighlightBackground#8f6c4930
  • editor.wordHighlightBackground#E8D4C030
  • editor.wordHighlightBorder#8f6c4940
  • editor.wordHighlightStrongBackground#E8D4C050
  • editor.wordHighlightStrongBorder#8f6c4960
  • editorBracketMatch.background#8f6c4930
  • editorBracketMatch.border#8f6c4960
  • editorCodeLens.foreground#8f6c49
  • editorCursor.foreground#4a3432
  • editorError.border#e07e3d80
  • editorError.foreground#e07e3d
  • editorGutter.addedBackground#8f6c4980
  • editorGutter.background#fcfcf0
  • editorGutter.deletedBackground#e07e3d80
  • editorGutter.modifiedBackground#e07e3d80
  • editorHint.border#8f6c4980
  • editorHint.foreground#8f6c49
  • editorIndentGuide.activeBackground1#8f6c4940
  • editorIndentGuide.background1#8f6c4920
  • editorInfo.border#4a343280
  • editorInfo.foreground#4a3432
  • editorLineNumber.activeForeground#4a3432
  • editorLineNumber.foreground#8f6c49
  • editorLink.activeForeground#e07e3d
  • editorOverviewRuler.addedForeground#8f6c4980
  • editorOverviewRuler.border#8f6c4940
  • editorOverviewRuler.deletedForeground#e07e3d80
  • editorOverviewRuler.errorForeground#e07e3d
  • editorOverviewRuler.findMatchForeground#e07e3d
  • editorOverviewRuler.infoForeground#4a3432
  • editorOverviewRuler.modifiedForeground#e07e3d80
  • editorOverviewRuler.rangeHighlightForeground#8f6c49
  • editorOverviewRuler.selectionHighlightForeground#8f6c49
  • editorOverviewRuler.warningForeground#8f6c49
  • editorOverviewRuler.wordHighlightForeground#8f6c49
  • editorOverviewRuler.wordHighlightStrongForeground#8f6c49
  • editorRuler.foreground#8f6c4940
  • editorWarning.border#8f6c4980
  • editorWarning.foreground#8f6c49
  • editorWhitespace.foreground#8f6c4940
  • errorForeground#e07e3d
  • extensionButton.prominentBackground#e07e3d
  • extensionButton.prominentForeground#fcfcf0
  • extensionButton.prominentHoverBackground#8f6c49
  • focusBorder#e07e3d
  • foreground#2D2D2D
  • gitDecoration.addedResourceForeground#8f6c49
  • gitDecoration.conflictingResourceForeground#e07e3d
  • gitDecoration.deletedResourceForeground#e07e3d
  • gitDecoration.ignoredResourceForeground#8f6c4960
  • gitDecoration.modifiedResourceForeground#e07e3d
  • gitDecoration.submoduleResourceForeground#4a3432
  • gitDecoration.untrackedResourceForeground#8f6c49
  • icon.foreground#4a3432
  • input.background#fcfcf0
  • input.border#8f6c49
  • input.foreground#4a3432
  • input.placeholderForeground#8f6c49
  • inputOption.activeBackground#e07e3d20
  • inputOption.activeBorder#e07e3d
  • inputOption.activeForeground#4a3432
  • inputValidation.errorBackground#e07e3d20
  • inputValidation.errorBorder#e07e3d
  • inputValidation.errorForeground#4a3432
  • inputValidation.infoBackground#8f6c4920
  • inputValidation.infoBorder#8f6c49
  • inputValidation.infoForeground#4a3432
  • inputValidation.warningBackground#e07e3d20
  • inputValidation.warningBorder#e07e3d
  • inputValidation.warningForeground#4a3432
  • list.activeSelectionBackground#8f6c4930
  • list.activeSelectionForeground#4a3432
  • list.activeSelectionIconForeground#4a3432
  • list.dropBackground#8f6c4920
  • list.errorForeground#e07e3d
  • list.filterMatchBackground#8f6c4930
  • list.focusBackground#8f6c4930
  • list.focusForeground#4a3432
  • list.highlightForeground#e07e3d
  • list.hoverBackground#8f6c4920
  • list.hoverForeground#4a3432
  • list.inactiveSelectionBackground#8f6c4920
  • list.inactiveSelectionForeground#4a3432
  • list.invalidItemForeground#e07e3d80
  • list.warningForeground#8f6c49
  • notificationCenter.border#8f6c49
  • notificationCenterHeader.background#ebe5d5
  • notificationCenterHeader.foreground#4a3432
  • notificationLink.foreground#e07e3d
  • notifications.background#F5E6D3
  • notifications.border#E8D4C040
  • notifications.foreground#4a3432
  • notificationToast.border#8f6c49
  • panel.background#fcfcf0
  • panel.border#8f6c49
  • panelTitle.activeBorder#e07e3d
  • panelTitle.activeForeground#4a3432
  • panelTitle.inactiveForeground#8f6c49
  • problemsErrorIcon.foreground#e07e3d
  • problemsInfoIcon.foreground#4a3432
  • problemsWarningIcon.foreground#8f6c49
  • progressBar.background#e07e3d
  • scrollbar.shadow#4a343220
  • scrollbarSlider.activeBackground#8f6c49cc
  • scrollbarSlider.background#8f6c4966
  • scrollbarSlider.hoverBackground#8f6c49aa
  • selection.background#8f6c4940
  • sideBar.background#F9F5F0
  • sideBar.border#E8D4C040
  • sideBar.foreground#2D2D2D
  • sideBarSectionHeader.background#F5E6D3
  • sideBarSectionHeader.border#E8D4C040
  • sideBarSectionHeader.foreground#2D2D2D
  • sideBarTitle.foreground#2D2D2D
  • statusBar.background#E8B4A2
  • statusBar.border#D98E7E40
  • statusBar.debuggingBackground#D98E7E
  • statusBar.debuggingBorder#D98E7E40
  • statusBar.debuggingForeground#fcfcf0
  • statusBar.foreground#2D2D2D
  • statusBar.noFolderBackground#E8D4C0
  • statusBar.noFolderBorder#D98E7E40
  • statusBar.noFolderForeground#fcfcf0
  • statusBarItem.activeBackground#8f6c4940
  • statusBarItem.hoverBackground#8f6c4920
  • statusBarItem.prominentBackground#e07e3d
  • statusBarItem.prominentHoverBackground#8f6c49
  • statusBarItem.remoteBackground#4a3432
  • statusBarItem.remoteForeground#fcfcf0
  • terminal.ansiBlack#2D2D2D
  • terminal.ansiBlue#8B8178
  • terminal.ansiBrightBlack#5C5C5C
  • terminal.ansiBrightBlue#A89984
  • terminal.ansiBrightCyan#C5B8A8
  • terminal.ansiBrightGreen#C5B8A8
  • terminal.ansiBrightMagenta#D4BEB2
  • terminal.ansiBrightRed#E8B4A2
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#F5E6D3
  • terminal.ansiCyan#B4A497
  • terminal.ansiGreen#A89984
  • terminal.ansiMagenta#C49B8A
  • terminal.ansiRed#D98E7E
  • terminal.ansiWhite#F9F5F0
  • terminal.ansiYellow#E8B4A2
  • terminal.background#F9F5F0
  • terminal.foreground#2D2D2D
  • terminal.selectionBackground#8f6c4930
  • terminalCursor.background#fcfcf0
  • terminalCursor.foreground#4a3432
  • textBlockQuote.background#ebe5d5
  • textBlockQuote.border#8f6c49
  • textCodeBlock.background#ebe5d5
  • textLink.activeForeground#8f6c49
  • textLink.foreground#e07e3d
  • textPreformat.foreground#e07e3d
  • textSeparator.foreground#8f6c49
  • titleBar.activeBackground#F9F5F0
  • titleBar.activeForeground#2D2D2D
  • titleBar.border#E8D4C040
  • titleBar.inactiveBackground#F9F5F0
  • titleBar.inactiveForeground#8B8178
  • widget.shadow#4a343220

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8f6c49italic
variable, string constant.other.placeholder#4a3432—
constant.other.color#fcfcf0—
invalid, invalid.illegal#e07e3d—
keyword, storage.type, storage.modifier#e07e3d—
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#8f6c49—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#e07e3d—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#4a3432—
meta.block variable.other#e07e3d—
support.other.variable, string.other.link#e07e3d—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#8f6c49—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#e07e3d—
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#4a3432—
support.type#8f6c49—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#8f6c49—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#e07e3d—
variable.language#e07e3ditalic
entity.name.method.js#8f6c49italic
meta.class-method.js entity.name.function.js, variable.function.constructor#8f6c49—
entity.other.attribute-name#e07e3d—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#4a3432italic
entity.other.attribute-name.class#4a3432—
source.sass keyword.control#8f6c49—
markup.inserted#8f6c49—
markup.deleted#e07e3d—
markup.changed#e07e3d—
string.regexp#8f6c49—
constant.character.escape#8f6c49—
*url*, *link*, *uri*—underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#8f6c49italic
source.js constant.other.object.key.js string.unquoted.label.js#e07e3ditalic
source.json meta.structure.dictionary.json support.type.property-name.json#4a3432—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8f6c49—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#e07e3d—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#4a3432—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8f6c49—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#e07e3d—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#4a3432—
text.plain#4a3432—