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#f7f3f1
  • activityBar.border#e7dbd5
  • activityBar.foreground#7a3b2e
  • activityBar.inactiveForeground#b69384
  • activityBarBadge.background#00a2cb
  • activityBarBadge.foreground#fcfbfa
  • badge.background#7a3b2e
  • badge.foreground#fcfbfa
  • breadcrumb.activeSelectionForeground#1b0d0a
  • breadcrumb.focusForeground#1b0d0a
  • breadcrumb.foreground#b69384
  • button.background#7a3b2e
  • button.foreground#fcfbfa
  • button.hoverBackground#6e3529
  • button.secondaryBackground#f7f3f1
  • button.secondaryForeground#1b0d0a
  • descriptionForeground#b69384
  • dropdown.background#fcfbfa
  • dropdown.border#e7dbd5
  • dropdown.foreground#1b0d0a
  • editor.background#fcfbfa
  • editor.findMatchBackground#6667ab59
  • editor.findMatchHighlightBackground#6667ab26
  • editor.foreground#1b0d0a
  • editor.inactiveSelectionBackground#7a3b2e1a
  • editor.lineHighlightBackground#7a3b2e14
  • editor.lineHighlightBorder#7a3b2e00
  • editor.selectionBackground#7a3b2e33
  • editor.wordHighlightBackground#7a3b2e26
  • editorBracketMatch.background#7a3b2e33
  • editorBracketMatch.border#7a3b2e80
  • editorCursor.foreground#7a3b2e
  • editorError.foreground#bf1932
  • editorGroup.border#e7dbd5
  • editorGroupHeader.tabsBackground#faf7f6
  • editorGroupHeader.tabsBorder#e7dbd5
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#1b0d0a2e
  • editorIndentGuide.background#1b0d0a14
  • editorInfo.foreground#00a2cb
  • editorLineNumber.activeForeground#1b0d0a
  • editorLineNumber.foreground#b69384
  • editorRuler.foreground#1b0d0a14
  • editorSuggestWidget.selectedBackground#7a3b2e26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#1b0d0a1a
  • editorWidget.background#fcfbfa
  • editorWidget.border#e7dbd5
  • focusBorder#7a3b2e80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#b69384
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#b69384
  • input.background#fcfbfa
  • input.border#e7dbd5
  • input.foreground#1b0d0a
  • input.placeholderForeground#b69384
  • inputOption.activeBorder#7a3b2e
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#00a2cb
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#7a3b2e33
  • list.activeSelectionForeground#1b0d0a
  • list.focusBackground#7a3b2e26
  • list.highlightForeground#7a3b2e
  • list.hoverBackground#7a3b2e1a
  • list.inactiveSelectionBackground#7a3b2e1a
  • minimap.background#fcfbfa
  • minimap.findMatchHighlight#6667ab80
  • minimap.selectionHighlight#7a3b2e4d
  • notificationLink.foreground#7a3b2e
  • notifications.background#fcfbfa
  • notifications.foreground#1b0d0a
  • panel.background#faf7f6
  • panel.border#e7dbd5
  • panelTitle.activeBorder#7a3b2e
  • panelTitle.activeForeground#1b0d0a
  • panelTitle.inactiveForeground#b69384
  • peekView.border#7a3b2e
  • peekViewEditor.background#faf7f6
  • peekViewResult.background#f7f3f1
  • peekViewTitle.background#faf7f6
  • progressBar.background#7a3b2e
  • scrollbar.shadow#0c060514
  • scrollbarSlider.activeBackground#1b0d0a4d
  • scrollbarSlider.background#1b0d0a1a
  • scrollbarSlider.hoverBackground#1b0d0a33
  • selection.background#7a3b2e33
  • sideBar.background#faf7f6
  • sideBar.border#e7dbd5
  • sideBar.foreground#1b0d0a
  • sideBarSectionHeader.background#7a3b2e1a
  • sideBarSectionHeader.foreground#1b0d0a
  • sideBarTitle.foreground#1b0d0a
  • statusBar.background#7a3b2e
  • statusBar.border#e7dbd5
  • statusBar.debuggingBackground#00a2cb
  • statusBar.debuggingForeground#fcfbfa
  • statusBar.foreground#fcfbfa
  • statusBar.noFolderBackground#f7f3f1
  • statusBarItem.hoverBackground#fcfbfa33
  • statusBarItem.remoteBackground#683227
  • statusBarItem.remoteForeground#fcfbfa
  • tab.activeBackground#fcfbfa
  • tab.activeBorder#7a3b2e
  • tab.activeBorderTop#7a3b2e00
  • tab.activeForeground#1b0d0a
  • tab.border#e7dbd5
  • tab.inactiveBackground#faf7f6
  • tab.inactiveForeground#b69384
  • terminal.ansiBlack#1b0d0a
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#b69384
  • 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#fcfbfa
  • terminal.ansiYellow#d4a017
  • terminal.background#faf7f6
  • terminal.foreground#1b0d0a
  • terminalCursor.foreground#7a3b2e
  • textLink.activeForeground#0090b4
  • textLink.foreground#00a2cb
  • titleBar.activeBackground#faf7f6
  • titleBar.activeForeground#1b0d0a
  • titleBar.border#e7dbd5
  • titleBar.inactiveBackground#faf7f6
  • titleBar.inactiveForeground#b69384

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#b69384italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#7a3b2ebold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#7a3b2ebold
storage.type, storage.modifier#7a3b2ebold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#007894
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#7a3b2e
string.regexp#007894
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#6667ab
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#c72f7cbold
variable.other.constant, variable.other.enummember#c72f7cbold
constant.character.escape#8e584d
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#7c2029italic
entity.name.type.parameter#7c2029italic
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#1b0d0a
variable.parameter#1b0d0aitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#7a3b2eitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#1b0d0a
entity.name.class, entity.name.type.class, support.class#5c068cbold italic
entity.other.inherited-class#5c068citalic
entity.name.tag, punctuation.definition.tag#7a3b2ebold
entity.other.attribute-name#38793aitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#8e584d
punctuation, punctuation.separator, punctuation.terminator, meta.brace#b69384
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#7c2029italic
support.type.property-name.css, support.type.vendored.property-name.css#7c2029
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5c068cbold
support.constant.property-value.css, support.constant.color.css#c72f7c
keyword.other.unit.css#6667ab
support.type.property-name.json#7c2029
markup.heading, markup.heading entity.name, entity.name.section.markdown#7a3b2ebold
markup.bold#c72f7cbold
markup.italic#7c2029italic
markup.inline.raw, markup.raw#007894
markup.underline.link#38793a
markup.quote#b69384italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050