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#faf4f1
  • activityBar.border#f3e0d8
  • activityBar.foreground#cc5643
  • activityBar.inactiveForeground#eba694
  • activityBarBadge.background#006372
  • activityBarBadge.foreground#fcfbfa
  • badge.background#cc5643
  • badge.foreground#26100d
  • breadcrumb.activeSelectionForeground#26100d
  • breadcrumb.focusForeground#26100d
  • breadcrumb.foreground#eba694
  • button.background#cc5643
  • button.foreground#26100d
  • button.hoverBackground#b84d3c
  • button.secondaryBackground#faf4f1
  • button.secondaryForeground#26100d
  • descriptionForeground#eba694
  • dropdown.background#fdfbfa
  • dropdown.border#f3e0d8
  • dropdown.foreground#26100d
  • editor.background#fdfbfa
  • editor.findMatchBackground#4e9a2f59
  • editor.findMatchHighlightBackground#4e9a2f26
  • editor.foreground#26100d
  • editor.inactiveSelectionBackground#cc56431a
  • editor.lineHighlightBackground#cc564314
  • editor.lineHighlightBorder#cc564300
  • editor.selectionBackground#cc564333
  • editor.wordHighlightBackground#cc564326
  • editorBracketMatch.background#cc564333
  • editorBracketMatch.border#cc564380
  • editorCursor.foreground#cc5643
  • editorError.foreground#bf1932
  • editorGroup.border#f3e0d8
  • editorGroupHeader.tabsBackground#fbf8f6
  • editorGroupHeader.tabsBorder#f3e0d8
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#26100d2e
  • editorIndentGuide.background#26100d14
  • editorInfo.foreground#006372
  • editorLineNumber.activeForeground#26100d
  • editorLineNumber.foreground#eba694
  • editorRuler.foreground#26100d14
  • editorSuggestWidget.selectedBackground#cc564326
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#26100d1a
  • editorWidget.background#fdfbfa
  • editorWidget.border#f3e0d8
  • focusBorder#cc564380
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#eba694
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#eba694
  • input.background#fdfbfa
  • input.border#f3e0d8
  • input.foreground#26100d
  • input.placeholderForeground#eba694
  • inputOption.activeBorder#cc5643
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#006372
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#cc564333
  • list.activeSelectionForeground#26100d
  • list.focusBackground#cc564326
  • list.highlightForeground#cc5643
  • list.hoverBackground#cc56431a
  • list.inactiveSelectionBackground#cc56431a
  • minimap.background#fdfbfa
  • minimap.findMatchHighlight#4e9a2f80
  • minimap.selectionHighlight#cc56434d
  • notificationLink.foreground#cc5643
  • notifications.background#fdfbfa
  • notifications.foreground#26100d
  • panel.background#fbf8f6
  • panel.border#f3e0d8
  • panelTitle.activeBorder#cc5643
  • panelTitle.activeForeground#26100d
  • panelTitle.inactiveForeground#eba694
  • peekView.border#cc5643
  • peekViewEditor.background#fbf8f6
  • peekViewResult.background#faf4f1
  • peekViewTitle.background#fbf8f6
  • progressBar.background#cc5643
  • scrollbar.shadow#190b0814
  • scrollbarSlider.activeBackground#26100d4d
  • scrollbarSlider.background#26100d1a
  • scrollbarSlider.hoverBackground#26100d33
  • selection.background#cc564333
  • sideBar.background#fbf8f6
  • sideBar.border#f3e0d8
  • sideBar.foreground#26100d
  • sideBarSectionHeader.background#cc56431a
  • sideBarSectionHeader.foreground#26100d
  • sideBarTitle.foreground#26100d
  • statusBar.background#cc5643
  • statusBar.border#f3e0d8
  • statusBar.debuggingBackground#006372
  • statusBar.debuggingForeground#fcfbfa
  • statusBar.foreground#26100d
  • statusBar.noFolderBackground#faf4f1
  • statusBarItem.hoverBackground#fcfbfa33
  • statusBarItem.remoteBackground#ad4939
  • statusBarItem.remoteForeground#26100d
  • tab.activeBackground#fdfbfa
  • tab.activeBorder#cc5643
  • tab.activeBorderTop#cc564300
  • tab.activeForeground#26100d
  • tab.border#f3e0d8
  • tab.inactiveBackground#fbf8f6
  • tab.inactiveForeground#eba694
  • terminal.ansiBlack#26100d
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#eba694
  • 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#fdfbfa
  • terminal.ansiYellow#d4a017
  • terminal.background#fbf8f6
  • terminal.foreground#26100d
  • terminalCursor.foreground#cc5643
  • textLink.activeForeground#005866
  • textLink.foreground#006372
  • titleBar.activeBackground#fbf8f6
  • titleBar.activeForeground#26100d
  • titleBar.border#f3e0d8
  • titleBar.inactiveBackground#fbf8f6
  • titleBar.inactiveForeground#eba694

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#eba694italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#b74c3cbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#b74c3cbold
storage.type, storage.modifier#b74c3cbold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#006e7f
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#b74c3c
string.regexp#006e7f
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#428328
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#7d7228bold
variable.other.constant, variable.other.enummember#7d7228bold
constant.character.escape#a85549
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#5c3317italic
entity.name.type.parameter#5c3317italic
entity.name.function, meta.function entity.name.function#786d74bold
meta.function-call entity.name.function, support.function#786d74
meta.method-call entity.name.function, entity.name.function.member#786d74
variable, variable.other, variable.other.readwrite#26100d
variable.parameter#26100ditalic
variable.language, variable.language.this, variable.language.self, variable.language.super#b74c3citalic
variable.other.property, variable.other.object.property, meta.object-literal.key#26100d
entity.name.class, entity.name.type.class, support.class#5c068cbold italic
entity.other.inherited-class#5c068citalic
entity.name.tag, punctuation.definition.tag#b74c3cbold
entity.other.attribute-name#786d74italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#a85549
punctuation, punctuation.separator, punctuation.terminator, meta.brace#eba694
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#5c3317italic
support.type.property-name.css, support.type.vendored.property-name.css#5c3317
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5c068cbold
support.constant.property-value.css, support.constant.color.css#7d7228
keyword.other.unit.css#428328
support.type.property-name.json#5c3317
markup.heading, markup.heading entity.name, entity.name.section.markdown#b74c3cbold
markup.bold#7d7228bold
markup.italic#5c3317italic
markup.inline.raw, markup.raw#006e7f
markup.underline.link#786d74
markup.quote#eba694italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050