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#f8f3f1
  • activityBar.border#ebdbd5
  • activityBar.foreground#a0342b
  • activityBar.inactiveForeground#c59083
  • activityBarBadge.background#00a3b8
  • activityBarBadge.foreground#fcfbfa
  • badge.background#a0342b
  • badge.foreground#fcfbfa
  • breadcrumb.activeSelectionForeground#230b09
  • breadcrumb.focusForeground#230b09
  • breadcrumb.foreground#c59083
  • button.background#a0342b
  • button.foreground#fcfbfa
  • button.hoverBackground#902f27
  • button.secondaryBackground#f8f3f1
  • button.secondaryForeground#230b09
  • descriptionForeground#c59083
  • dropdown.background#fdfbfa
  • dropdown.border#ebdbd5
  • dropdown.foreground#230b09
  • editor.background#fdfbfa
  • editor.findMatchBackground#5c068c59
  • editor.findMatchHighlightBackground#5c068c26
  • editor.foreground#230b09
  • editor.inactiveSelectionBackground#a0342b1a
  • editor.lineHighlightBackground#a0342b14
  • editor.lineHighlightBorder#a0342b00
  • editor.selectionBackground#a0342b33
  • editor.wordHighlightBackground#a0342b26
  • editorBracketMatch.background#a0342b33
  • editorBracketMatch.border#a0342b80
  • editorCursor.foreground#a0342b
  • editorError.foreground#bf1932
  • editorGroup.border#ebdbd5
  • editorGroupHeader.tabsBackground#faf7f5
  • editorGroupHeader.tabsBorder#ebdbd5
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#230b092e
  • editorIndentGuide.background#230b0914
  • editorInfo.foreground#00a3b8
  • editorLineNumber.activeForeground#230b09
  • editorLineNumber.foreground#c59083
  • editorRuler.foreground#230b0914
  • editorSuggestWidget.selectedBackground#a0342b26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#230b091a
  • editorWidget.background#fdfbfa
  • editorWidget.border#ebdbd5
  • focusBorder#a0342b80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#c59083
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#c59083
  • input.background#fdfbfa
  • input.border#ebdbd5
  • input.foreground#230b09
  • input.placeholderForeground#c59083
  • inputOption.activeBorder#a0342b
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#00a3b8
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#a0342b33
  • list.activeSelectionForeground#230b09
  • list.focusBackground#a0342b26
  • list.highlightForeground#a0342b
  • list.hoverBackground#a0342b1a
  • list.inactiveSelectionBackground#a0342b1a
  • minimap.background#fdfbfa
  • minimap.findMatchHighlight#5c068c80
  • minimap.selectionHighlight#a0342b4d
  • notificationLink.foreground#a0342b
  • notifications.background#fdfbfa
  • notifications.foreground#230b09
  • panel.background#faf7f5
  • panel.border#ebdbd5
  • panelTitle.activeBorder#a0342b
  • panelTitle.activeForeground#230b09
  • panelTitle.inactiveForeground#c59083
  • peekView.border#a0342b
  • peekViewEditor.background#faf7f5
  • peekViewResult.background#f8f3f1
  • peekViewTitle.background#faf7f5
  • progressBar.background#a0342b
  • scrollbar.shadow#10050414
  • scrollbarSlider.activeBackground#230b094d
  • scrollbarSlider.background#230b091a
  • scrollbarSlider.hoverBackground#230b0933
  • selection.background#a0342b33
  • sideBar.background#faf7f5
  • sideBar.border#ebdbd5
  • sideBar.foreground#230b09
  • sideBarSectionHeader.background#a0342b1a
  • sideBarSectionHeader.foreground#230b09
  • sideBarTitle.foreground#230b09
  • statusBar.background#a0342b
  • statusBar.border#ebdbd5
  • statusBar.debuggingBackground#00a3b8
  • statusBar.debuggingForeground#fcfbfa
  • statusBar.foreground#fcfbfa
  • statusBar.noFolderBackground#f8f3f1
  • statusBarItem.hoverBackground#fcfbfa33
  • statusBarItem.remoteBackground#882c25
  • statusBarItem.remoteForeground#fcfbfa
  • tab.activeBackground#fdfbfa
  • tab.activeBorder#a0342b
  • tab.activeBorderTop#a0342b00
  • tab.activeForeground#230b09
  • tab.border#ebdbd5
  • tab.inactiveBackground#faf7f5
  • tab.inactiveForeground#c59083
  • terminal.ansiBlack#230b09
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#c59083
  • 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#faf7f5
  • terminal.foreground#230b09
  • terminalCursor.foreground#a0342b
  • textLink.activeForeground#0091a3
  • textLink.foreground#00a3b8
  • titleBar.activeBackground#faf7f5
  • titleBar.activeForeground#230b09
  • titleBar.border#ebdbd5
  • titleBar.inactiveBackground#faf7f5
  • titleBar.inactiveForeground#c59083

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#c59083italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#a0342bbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#a0342bbold
storage.type, storage.modifier#a0342bbold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#007986
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#a0342b
string.regexp#007986
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#5c068c
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#5e2b4ebold
variable.other.constant, variable.other.enummember#5e2b4ebold
constant.character.escape#ae524b
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#9e1b32italic
entity.name.type.parameter#9e1b32italic
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#230b09
variable.parameter#230b09italic
variable.language, variable.language.this, variable.language.self, variable.language.super#a0342bitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#230b09
entity.name.class, entity.name.type.class, support.class#4f7d15bold italic
entity.other.inherited-class#4f7d15italic
entity.name.tag, punctuation.definition.tag#a0342bbold
entity.other.attribute-name#38793aitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#ae524b
punctuation, punctuation.separator, punctuation.terminator, meta.brace#c59083
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#9e1b32italic
support.type.property-name.css, support.type.vendored.property-name.css#9e1b32
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#4f7d15bold
support.constant.property-value.css, support.constant.color.css#5e2b4e
keyword.other.unit.css#5c068c
support.type.property-name.json#9e1b32
markup.heading, markup.heading entity.name, entity.name.section.markdown#a0342bbold
markup.bold#5e2b4ebold
markup.italic#9e1b32italic
markup.inline.raw, markup.raw#007986
markup.underline.link#38793a
markup.quote#c59083italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050