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#f9f4f1
  • activityBar.border#f1ded6
  • activityBar.foreground#e2583e
  • activityBar.inactiveForeground#e09e8b
  • activityBarBadge.background#006372
  • activityBarBadge.foreground#fcfbfa
  • badge.background#e2583e
  • badge.foreground#220d09
  • breadcrumb.activeSelectionForeground#220d09
  • breadcrumb.focusForeground#220d09
  • breadcrumb.foreground#e09e8b
  • button.background#e2583e
  • button.foreground#220d09
  • button.hoverBackground#cb4f38
  • button.secondaryBackground#f9f4f1
  • button.secondaryForeground#220d09
  • descriptionForeground#e09e8b
  • dropdown.background#fdfbfa
  • dropdown.border#f1ded6
  • dropdown.foreground#220d09
  • editor.background#fdfbfa
  • editor.findMatchBackground#6667ab59
  • editor.findMatchHighlightBackground#6667ab26
  • editor.foreground#220d09
  • editor.inactiveSelectionBackground#e2583e1a
  • editor.lineHighlightBackground#e2583e14
  • editor.lineHighlightBorder#e2583e00
  • editor.selectionBackground#e2583e33
  • editor.wordHighlightBackground#e2583e26
  • editorBracketMatch.background#e2583e33
  • editorBracketMatch.border#e2583e80
  • editorCursor.foreground#e2583e
  • editorError.foreground#bf1932
  • editorGroup.border#f1ded6
  • editorGroupHeader.tabsBackground#fbf8f6
  • editorGroupHeader.tabsBorder#f1ded6
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#220d092e
  • editorIndentGuide.background#220d0914
  • editorInfo.foreground#006372
  • editorLineNumber.activeForeground#220d09
  • editorLineNumber.foreground#e09e8b
  • editorRuler.foreground#220d0914
  • editorSuggestWidget.selectedBackground#e2583e26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#220d091a
  • editorWidget.background#fdfbfa
  • editorWidget.border#f1ded6
  • focusBorder#e2583e80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#e09e8b
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#e09e8b
  • input.background#fdfbfa
  • input.border#f1ded6
  • input.foreground#220d09
  • input.placeholderForeground#e09e8b
  • inputOption.activeBorder#e2583e
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#006372
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#e2583e33
  • list.activeSelectionForeground#220d09
  • list.focusBackground#e2583e26
  • list.highlightForeground#e2583e
  • list.hoverBackground#e2583e1a
  • list.inactiveSelectionBackground#e2583e1a
  • minimap.background#fdfbfa
  • minimap.findMatchHighlight#6667ab80
  • minimap.selectionHighlight#e2583e4d
  • notificationLink.foreground#e2583e
  • notifications.background#fdfbfa
  • notifications.foreground#220d09
  • panel.background#fbf8f6
  • panel.border#f1ded6
  • panelTitle.activeBorder#e2583e
  • panelTitle.activeForeground#220d09
  • panelTitle.inactiveForeground#e09e8b
  • peekView.border#e2583e
  • peekViewEditor.background#fbf8f6
  • peekViewResult.background#f9f4f1
  • peekViewTitle.background#fbf8f6
  • progressBar.background#e2583e
  • scrollbar.shadow#17090614
  • scrollbarSlider.activeBackground#220d094d
  • scrollbarSlider.background#220d091a
  • scrollbarSlider.hoverBackground#220d0933
  • selection.background#e2583e33
  • sideBar.background#fbf8f6
  • sideBar.border#f1ded6
  • sideBar.foreground#220d09
  • sideBarSectionHeader.background#e2583e1a
  • sideBarSectionHeader.foreground#220d09
  • sideBarTitle.foreground#220d09
  • statusBar.background#e2583e
  • statusBar.border#f1ded6
  • statusBar.debuggingBackground#006372
  • statusBar.debuggingForeground#fcfbfa
  • statusBar.foreground#220d09
  • statusBar.noFolderBackground#f9f4f1
  • statusBarItem.hoverBackground#fcfbfa33
  • statusBarItem.remoteBackground#c04b35
  • statusBarItem.remoteForeground#220d09
  • tab.activeBackground#fdfbfa
  • tab.activeBorder#e2583e
  • tab.activeBorderTop#e2583e00
  • tab.activeForeground#220d09
  • tab.border#f1ded6
  • tab.inactiveBackground#fbf8f6
  • tab.inactiveForeground#e09e8b
  • terminal.ansiBlack#220d09
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#e09e8b
  • 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#220d09
  • terminalCursor.foreground#e2583e
  • textLink.activeForeground#005866
  • textLink.foreground#006372
  • titleBar.activeBackground#fbf8f6
  • titleBar.activeForeground#220d09
  • titleBar.border#f1ded6
  • titleBar.inactiveBackground#fbf8f6
  • titleBar.inactiveForeground#e09e8b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#e09e8bitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#bf4b34bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#bf4b34bold
storage.type, storage.modifier#bf4b34bold
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#bf4b34
string.regexp#006e7f
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#b35847
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#220d09
variable.parameter#220d09italic
variable.language, variable.language.this, variable.language.self, variable.language.super#bf4b34italic
variable.other.property, variable.other.object.property, meta.object-literal.key#220d09
entity.name.class, entity.name.type.class, support.class#5c068cbold italic
entity.other.inherited-class#5c068citalic
entity.name.tag, punctuation.definition.tag#bf4b34bold
entity.other.attribute-name#38793aitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#b35847
punctuation, punctuation.separator, punctuation.terminator, meta.brace#e09e8b
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#bf4b34bold
markup.bold#c72f7cbold
markup.italic#7c2029italic
markup.inline.raw, markup.raw#006e7f
markup.underline.link#38793a
markup.quote#e09e8bitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050