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#f9f3f0
  • activityBar.border#f0dad3
  • activityBar.foreground#da291c
  • activityBar.inactiveForeground#dc8b7d
  • activityBarBadge.background#00a3b8
  • activityBarBadge.foreground#fcfbfa
  • badge.background#da291c
  • badge.foreground#fcfbfa
  • breadcrumb.activeSelectionForeground#300906
  • breadcrumb.focusForeground#300906
  • breadcrumb.foreground#dc8b7d
  • button.background#da291c
  • button.foreground#fcfbfa
  • button.hoverBackground#c42519
  • button.secondaryBackground#f9f3f0
  • button.secondaryForeground#300906
  • descriptionForeground#dc8b7d
  • dropdown.background#fdfbfa
  • dropdown.border#f0dad3
  • dropdown.foreground#300906
  • editor.background#fdfbfa
  • editor.findMatchBackground#5c068c59
  • editor.findMatchHighlightBackground#5c068c26
  • editor.foreground#300906
  • editor.inactiveSelectionBackground#da291c1a
  • editor.lineHighlightBackground#da291c14
  • editor.lineHighlightBorder#da291c00
  • editor.selectionBackground#da291c33
  • editor.wordHighlightBackground#da291c26
  • editorBracketMatch.background#da291c33
  • editorBracketMatch.border#da291c80
  • editorCursor.foreground#da291c
  • editorError.foreground#bf1932
  • editorGroup.border#f0dad3
  • editorGroupHeader.tabsBackground#fbf7f5
  • editorGroupHeader.tabsBorder#f0dad3
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#3009062e
  • editorIndentGuide.background#30090614
  • editorInfo.foreground#00a3b8
  • editorLineNumber.activeForeground#300906
  • editorLineNumber.foreground#dc8b7d
  • editorRuler.foreground#30090614
  • editorSuggestWidget.selectedBackground#da291c26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#3009061a
  • editorWidget.background#fdfbfa
  • editorWidget.border#f0dad3
  • focusBorder#da291c80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#dc8b7d
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#dc8b7d
  • input.background#fdfbfa
  • input.border#f0dad3
  • input.foreground#300906
  • input.placeholderForeground#dc8b7d
  • inputOption.activeBorder#da291c
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#00a3b8
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#da291c33
  • list.activeSelectionForeground#300906
  • list.focusBackground#da291c26
  • list.highlightForeground#da291c
  • list.hoverBackground#da291c1a
  • list.inactiveSelectionBackground#da291c1a
  • minimap.background#fdfbfa
  • minimap.findMatchHighlight#5c068c80
  • minimap.selectionHighlight#da291c4d
  • notificationLink.foreground#da291c
  • notifications.background#fdfbfa
  • notifications.foreground#300906
  • panel.background#fbf7f5
  • panel.border#f0dad3
  • panelTitle.activeBorder#da291c
  • panelTitle.activeForeground#300906
  • panelTitle.inactiveForeground#dc8b7d
  • peekView.border#da291c
  • peekViewEditor.background#fbf7f5
  • peekViewResult.background#f9f3f0
  • peekViewTitle.background#fbf7f5
  • progressBar.background#da291c
  • scrollbar.shadow#16040314
  • scrollbarSlider.activeBackground#3009064d
  • scrollbarSlider.background#3009061a
  • scrollbarSlider.hoverBackground#30090633
  • selection.background#da291c33
  • sideBar.background#fbf7f5
  • sideBar.border#f0dad3
  • sideBar.foreground#300906
  • sideBarSectionHeader.background#da291c1a
  • sideBarSectionHeader.foreground#300906
  • sideBarTitle.foreground#300906
  • statusBar.background#da291c
  • statusBar.border#f0dad3
  • statusBar.debuggingBackground#00a3b8
  • statusBar.debuggingForeground#fcfbfa
  • statusBar.foreground#fcfbfa
  • statusBar.noFolderBackground#f9f3f0
  • statusBarItem.hoverBackground#fcfbfa33
  • statusBarItem.remoteBackground#b92318
  • statusBarItem.remoteForeground#fcfbfa
  • tab.activeBackground#fdfbfa
  • tab.activeBorder#da291c
  • tab.activeBorderTop#da291c00
  • tab.activeForeground#300906
  • tab.border#f0dad3
  • tab.inactiveBackground#fbf7f5
  • tab.inactiveForeground#dc8b7d
  • terminal.ansiBlack#300906
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#dc8b7d
  • 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#fbf7f5
  • terminal.foreground#300906
  • terminalCursor.foreground#da291c
  • textLink.activeForeground#0091a3
  • textLink.foreground#00a3b8
  • titleBar.activeBackground#fbf7f5
  • titleBar.activeForeground#300906
  • titleBar.border#f0dad3
  • titleBar.inactiveBackground#fbf7f5
  • titleBar.inactiveForeground#dc8b7d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#dc8b7ditalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#da291cbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#da291cbold
storage.type, storage.modifier#da291cbold
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#da291c
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#ce4339
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#7c1c32italic
entity.name.type.parameter#7c1c32italic
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#300906
variable.parameter#300906italic
variable.language, variable.language.this, variable.language.self, variable.language.super#da291citalic
variable.other.property, variable.other.object.property, meta.object-literal.key#300906
entity.name.class, entity.name.type.class, support.class#4f7d15bold italic
entity.other.inherited-class#4f7d15italic
entity.name.tag, punctuation.definition.tag#da291cbold
entity.other.attribute-name#38793aitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#ce4339
punctuation, punctuation.separator, punctuation.terminator, meta.brace#dc8b7d
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#7c1c32italic
support.type.property-name.css, support.type.vendored.property-name.css#7c1c32
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#7c1c32
markup.heading, markup.heading entity.name, entity.name.section.markdown#da291cbold
markup.bold#5e2b4ebold
markup.italic#7c1c32italic
markup.inline.raw, markup.raw#007986
markup.underline.link#38793a
markup.quote#dc8b7ditalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050