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#faf3f1
  • activityBar.border#f2dcd6
  • activityBar.foreground#f9423a
  • activityBar.inactiveForeground#e99589
  • activityBarBadge.background#4b9e9d
  • activityBarBadge.foreground#fcfbfa
  • badge.background#f9423a
  • badge.foreground#250a09
  • breadcrumb.activeSelectionForeground#250a09
  • breadcrumb.focusForeground#250a09
  • breadcrumb.foreground#e99589
  • button.background#f9423a
  • button.foreground#250a09
  • button.hoverBackground#e03b34
  • button.secondaryBackground#faf3f1
  • button.secondaryForeground#250a09
  • descriptionForeground#e99589
  • dropdown.background#fdfbfa
  • dropdown.border#f2dcd6
  • dropdown.foreground#250a09
  • editor.background#fdfbfa
  • editor.findMatchBackground#5c068c59
  • editor.findMatchHighlightBackground#5c068c26
  • editor.foreground#250a09
  • editor.inactiveSelectionBackground#f9423a1a
  • editor.lineHighlightBackground#f9423a14
  • editor.lineHighlightBorder#f9423a00
  • editor.selectionBackground#f9423a33
  • editor.wordHighlightBackground#f9423a26
  • editorBracketMatch.background#f9423a33
  • editorBracketMatch.border#f9423a80
  • editorCursor.foreground#f9423a
  • editorError.foreground#bf1932
  • editorGroup.border#f2dcd6
  • editorGroupHeader.tabsBackground#fbf7f6
  • editorGroupHeader.tabsBorder#f2dcd6
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#250a092e
  • editorIndentGuide.background#250a0914
  • editorInfo.foreground#4b9e9d
  • editorLineNumber.activeForeground#250a09
  • editorLineNumber.foreground#e99589
  • editorRuler.foreground#250a0914
  • editorSuggestWidget.selectedBackground#f9423a26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#250a091a
  • editorWidget.background#fdfbfa
  • editorWidget.border#f2dcd6
  • focusBorder#f9423a80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#e99589
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#e99589
  • input.background#fdfbfa
  • input.border#f2dcd6
  • input.foreground#250a09
  • input.placeholderForeground#e99589
  • inputOption.activeBorder#f9423a
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#4b9e9d
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#f9423a33
  • list.activeSelectionForeground#250a09
  • list.focusBackground#f9423a26
  • list.highlightForeground#f9423a
  • list.hoverBackground#f9423a1a
  • list.inactiveSelectionBackground#f9423a1a
  • minimap.background#fdfbfa
  • minimap.findMatchHighlight#5c068c80
  • minimap.selectionHighlight#f9423a4d
  • notificationLink.foreground#f9423a
  • notifications.background#fdfbfa
  • notifications.foreground#250a09
  • panel.background#fbf7f6
  • panel.border#f2dcd6
  • panelTitle.activeBorder#f9423a
  • panelTitle.activeForeground#250a09
  • panelTitle.inactiveForeground#e99589
  • peekView.border#f9423a
  • peekViewEditor.background#fbf7f6
  • peekViewResult.background#faf3f1
  • peekViewTitle.background#fbf7f6
  • progressBar.background#f9423a
  • scrollbar.shadow#19070614
  • scrollbarSlider.activeBackground#250a094d
  • scrollbarSlider.background#250a091a
  • scrollbarSlider.hoverBackground#250a0933
  • selection.background#f9423a33
  • sideBar.background#fbf7f6
  • sideBar.border#f2dcd6
  • sideBar.foreground#250a09
  • sideBarSectionHeader.background#f9423a1a
  • sideBarSectionHeader.foreground#250a09
  • sideBarTitle.foreground#250a09
  • statusBar.background#f9423a
  • statusBar.border#f2dcd6
  • statusBar.debuggingBackground#4b9e9d
  • statusBar.debuggingForeground#fcfbfa
  • statusBar.foreground#250a09
  • statusBar.noFolderBackground#faf3f1
  • statusBarItem.hoverBackground#fcfbfa33
  • statusBarItem.remoteBackground#d43831
  • statusBarItem.remoteForeground#250a09
  • tab.activeBackground#fdfbfa
  • tab.activeBorder#f9423a
  • tab.activeBorderTop#f9423a00
  • tab.activeForeground#250a09
  • tab.border#f2dcd6
  • tab.inactiveBackground#fbf7f6
  • tab.inactiveForeground#e99589
  • terminal.ansiBlack#250a09
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#e99589
  • 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#fbf7f6
  • terminal.foreground#250a09
  • terminalCursor.foreground#f9423a
  • textLink.activeForeground#428d8b
  • textLink.foreground#4b9e9d
  • titleBar.activeBackground#fbf7f6
  • titleBar.activeForeground#250a09
  • titleBar.border#f2dcd6
  • titleBar.inactiveBackground#fbf7f6
  • titleBar.inactiveForeground#e99589

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#e99589italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#d33831bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#d33831bold
storage.type, storage.modifier#d33831bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#3b7e7c
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#d33831
string.regexp#3b7e7c
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#5c068c
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#796c48bold
variable.other.constant, variable.other.enummember#796c48bold
constant.character.escape#c34945
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#b75830italic
entity.name.type.parameter#b75830italic
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#250a09
variable.parameter#250a09italic
variable.language, variable.language.this, variable.language.self, variable.language.super#d33831italic
variable.other.property, variable.other.object.property, meta.object-literal.key#250a09
entity.name.class, entity.name.type.class, support.class#5a7431bold italic
entity.other.inherited-class#5a7431italic
entity.name.tag, punctuation.definition.tag#d33831bold
entity.other.attribute-name#786d74italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#c34945
punctuation, punctuation.separator, punctuation.terminator, meta.brace#e99589
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#b75830italic
support.type.property-name.css, support.type.vendored.property-name.css#b75830
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5a7431bold
support.constant.property-value.css, support.constant.color.css#796c48
keyword.other.unit.css#5c068c
support.type.property-name.json#b75830
markup.heading, markup.heading entity.name, entity.name.section.markdown#d33831bold
markup.bold#796c48bold
markup.italic#b75830italic
markup.inline.raw, markup.raw#3b7e7c
markup.underline.link#786d74
markup.quote#e99589italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050