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#faf5f1
  • activityBar.border#f3e5d7
  • activityBar.foreground#cc883e
  • activityBar.inactiveForeground#ebbf91
  • activityBarBadge.background#8ca5bf
  • activityBarBadge.foreground#fcfbfa
  • badge.background#cc883e
  • badge.foreground#261a0c
  • breadcrumb.activeSelectionForeground#261a0c
  • breadcrumb.focusForeground#261a0c
  • breadcrumb.foreground#ebbf91
  • button.background#cc883e
  • button.foreground#261a0c
  • button.hoverBackground#b87a38
  • button.secondaryBackground#faf5f1
  • button.secondaryForeground#261a0c
  • descriptionForeground#ebbf91
  • dropdown.background#fdfcfa
  • dropdown.border#f3e5d7
  • dropdown.foreground#261a0c
  • editor.background#fdfcfa
  • editor.findMatchBackground#5c068c59
  • editor.findMatchHighlightBackground#5c068c26
  • editor.foreground#261a0c
  • editor.inactiveSelectionBackground#cc883e1a
  • editor.lineHighlightBackground#cc883e14
  • editor.lineHighlightBorder#cc883e00
  • editor.selectionBackground#cc883e33
  • editor.wordHighlightBackground#cc883e26
  • editorBracketMatch.background#cc883e33
  • editorBracketMatch.border#cc883e80
  • editorCursor.foreground#cc883e
  • editorError.foreground#bf1932
  • editorGroup.border#f3e5d7
  • editorGroupHeader.tabsBackground#fbf9f6
  • editorGroupHeader.tabsBorder#f3e5d7
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#261a0c2e
  • editorIndentGuide.background#261a0c14
  • editorInfo.foreground#8ca5bf
  • editorLineNumber.activeForeground#261a0c
  • editorLineNumber.foreground#ebbf91
  • editorRuler.foreground#261a0c14
  • editorSuggestWidget.selectedBackground#cc883e26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#261a0c1a
  • editorWidget.background#fdfcfa
  • editorWidget.border#f3e5d7
  • focusBorder#cc883e80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#ebbf91
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#ebbf91
  • input.background#fdfcfa
  • input.border#f3e5d7
  • input.foreground#261a0c
  • input.placeholderForeground#ebbf91
  • inputOption.activeBorder#cc883e
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#8ca5bf
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#cc883e33
  • list.activeSelectionForeground#261a0c
  • list.focusBackground#cc883e26
  • list.highlightForeground#cc883e
  • list.hoverBackground#cc883e1a
  • list.inactiveSelectionBackground#cc883e1a
  • minimap.background#fdfcfa
  • minimap.findMatchHighlight#5c068c80
  • minimap.selectionHighlight#cc883e4d
  • notificationLink.foreground#cc883e
  • notifications.background#fdfcfa
  • notifications.foreground#261a0c
  • panel.background#fbf9f6
  • panel.border#f3e5d7
  • panelTitle.activeBorder#cc883e
  • panelTitle.activeForeground#261a0c
  • panelTitle.inactiveForeground#ebbf91
  • peekView.border#cc883e
  • peekViewEditor.background#fbf9f6
  • peekViewResult.background#faf5f1
  • peekViewTitle.background#fbf9f6
  • progressBar.background#cc883e
  • scrollbar.shadow#19110814
  • scrollbarSlider.activeBackground#261a0c4d
  • scrollbarSlider.background#261a0c1a
  • scrollbarSlider.hoverBackground#261a0c33
  • selection.background#cc883e33
  • sideBar.background#fbf9f6
  • sideBar.border#f3e5d7
  • sideBar.foreground#261a0c
  • sideBarSectionHeader.background#cc883e1a
  • sideBarSectionHeader.foreground#261a0c
  • sideBarTitle.foreground#261a0c
  • statusBar.background#cc883e
  • statusBar.border#f3e5d7
  • statusBar.debuggingBackground#8ca5bf
  • statusBar.debuggingForeground#fcfbfa
  • statusBar.foreground#261a0c
  • statusBar.noFolderBackground#faf5f1
  • statusBarItem.hoverBackground#fcfbfa33
  • statusBarItem.remoteBackground#ad7435
  • statusBarItem.remoteForeground#261a0c
  • tab.activeBackground#fdfcfa
  • tab.activeBorder#cc883e
  • tab.activeBorderTop#cc883e00
  • tab.activeForeground#261a0c
  • tab.border#f3e5d7
  • tab.inactiveBackground#fbf9f6
  • tab.inactiveForeground#ebbf91
  • terminal.ansiBlack#261a0c
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#ebbf91
  • terminal.ansiBrightBlue#2c9fd9
  • terminal.ansiBrightCyan#45b5aa
  • terminal.ansiBrightGreen#88b04b
  • terminal.ansiBrightMagenta#b163a3
  • terminal.ansiBrightRed#dd4132
  • terminal.ansiBrightWhite#fcfbfa
  • terminal.ansiBrightYellow#efc050
  • terminal.ansiCyan#006e7f
  • terminal.ansiGreen#4e9a2f
  • terminal.ansiMagenta#8c3359
  • terminal.ansiRed#bf1932
  • terminal.ansiWhite#fdfcfa
  • terminal.ansiYellow#d4a017
  • terminal.background#fbf9f6
  • terminal.foreground#261a0c
  • terminalCursor.foreground#cc883e
  • textLink.activeForeground#7c92aa
  • textLink.foreground#8ca5bf
  • titleBar.activeBackground#fbf9f6
  • titleBar.activeForeground#261a0c
  • titleBar.border#f3e5d7
  • titleBar.inactiveBackground#fbf9f6
  • titleBar.inactiveForeground#ebbf91

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#ebbf91italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#9b662fbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#9b662fbold
storage.type, storage.modifier#9b662fbold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#5e6f81
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#9b662f
string.regexp#5e6f81
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#5c068c
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#9e1b2ebold
variable.other.constant, variable.other.enummember#9e1b2ebold
constant.character.escape#8f663a
entity.name.type, entity.name.type.class, entity.name.type.interface, entity.name.type.enum, entity.name.type.alias, entity.name.type.module, support.type, support.type.builtin#966155italic
entity.name.type.parameter#966155italic
entity.name.function, meta.function entity.name.function#38793abold
meta.function-call entity.name.function, support.function#38793a
meta.method-call entity.name.function, entity.name.function.member#38793a
variable, variable.other, variable.other.readwrite#261a0c
variable.parameter#261a0citalic
variable.language, variable.language.this, variable.language.self, variable.language.super#9b662fitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#261a0c
entity.name.class, entity.name.type.class, support.class#a35b96bold italic
entity.other.inherited-class#a35b96italic
entity.name.tag, punctuation.definition.tag#9b662fbold
entity.other.attribute-name#38793aitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#8f663a
punctuation, punctuation.separator, punctuation.terminator, meta.brace#ebbf91
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#966155italic
support.type.property-name.css, support.type.vendored.property-name.css#966155
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#a35b96bold
support.constant.property-value.css, support.constant.color.css#9e1b2e
keyword.other.unit.css#5c068c
support.type.property-name.json#966155
markup.heading, markup.heading entity.name, entity.name.section.markdown#9b662fbold
markup.bold#9e1b2ebold
markup.italic#966155italic
markup.inline.raw, markup.raw#5e6f81
markup.underline.link#38793a
markup.quote#ebbf91italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050