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#e1e7ea
  • activityBar.border#b5c4cc
  • activityBar.foreground#5b7b8d
  • activityBar.inactiveForeground#5b7b8d
  • activityBarBadge.background#e6ab89
  • activityBarBadge.foreground#f2f4f6
  • badge.background#5b7b8d
  • badge.foreground#141b1f
  • breadcrumb.activeSelectionForeground#141b1f
  • breadcrumb.focusForeground#141b1f
  • breadcrumb.foreground#5b7b8d
  • button.background#5b7b8d
  • button.foreground#141b1f
  • button.hoverBackground#526f7f
  • button.secondaryBackground#e1e7ea
  • button.secondaryForeground#141b1f
  • descriptionForeground#5b7b8d
  • dropdown.background#f5f7f8
  • dropdown.border#b5c4cc
  • dropdown.foreground#141b1f
  • editor.background#f5f7f8
  • editor.findMatchBackground#4e9a2f59
  • editor.findMatchHighlightBackground#4e9a2f26
  • editor.foreground#141b1f
  • editor.inactiveSelectionBackground#5b7b8d1a
  • editor.lineHighlightBackground#5b7b8d14
  • editor.lineHighlightBorder#5b7b8d00
  • editor.selectionBackground#5b7b8d33
  • editor.wordHighlightBackground#5b7b8d26
  • editorBracketMatch.background#5b7b8d33
  • editorBracketMatch.border#5b7b8d80
  • editorCursor.foreground#5b7b8d
  • editorError.foreground#bf1932
  • editorGroup.border#b5c4cc
  • editorGroupHeader.tabsBackground#ebeff1
  • editorGroupHeader.tabsBorder#b5c4cc
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#141b1f2e
  • editorIndentGuide.background#141b1f14
  • editorInfo.foreground#e6ab89
  • editorLineNumber.activeForeground#141b1f
  • editorLineNumber.foreground#5b7b8d
  • editorRuler.foreground#141b1f14
  • editorSuggestWidget.selectedBackground#5b7b8d26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#141b1f1a
  • editorWidget.background#f5f7f8
  • editorWidget.border#b5c4cc
  • focusBorder#5b7b8d80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#5b7b8d
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#5b7b8d
  • input.background#f5f7f8
  • input.border#b5c4cc
  • input.foreground#141b1f
  • input.placeholderForeground#5b7b8d
  • inputOption.activeBorder#5b7b8d
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#e6ab89
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#5b7b8d33
  • list.activeSelectionForeground#141b1f
  • list.focusBackground#5b7b8d26
  • list.highlightForeground#5b7b8d
  • list.hoverBackground#5b7b8d1a
  • list.inactiveSelectionBackground#5b7b8d1a
  • minimap.background#f5f7f8
  • minimap.findMatchHighlight#4e9a2f80
  • minimap.selectionHighlight#5b7b8d4d
  • notificationLink.foreground#5b7b8d
  • notifications.background#f5f7f8
  • notifications.foreground#141b1f
  • panel.background#ebeff1
  • panel.border#b5c4cc
  • panelTitle.activeBorder#5b7b8d
  • panelTitle.activeForeground#141b1f
  • panelTitle.inactiveForeground#5b7b8d
  • peekView.border#5b7b8d
  • peekViewEditor.background#ebeff1
  • peekViewResult.background#e1e7ea
  • peekViewTitle.background#ebeff1
  • progressBar.background#5b7b8d
  • scrollbar.shadow#090c0e14
  • scrollbarSlider.activeBackground#141b1f4d
  • scrollbarSlider.background#141b1f1a
  • scrollbarSlider.hoverBackground#141b1f33
  • selection.background#5b7b8d33
  • sideBar.background#ebeff1
  • sideBar.border#b5c4cc
  • sideBar.foreground#141b1f
  • sideBarSectionHeader.background#5b7b8d1a
  • sideBarSectionHeader.foreground#141b1f
  • sideBarTitle.foreground#141b1f
  • statusBar.background#5b7b8d
  • statusBar.border#b5c4cc
  • statusBar.debuggingBackground#e6ab89
  • statusBar.debuggingForeground#f2f4f6
  • statusBar.foreground#141b1f
  • statusBar.noFolderBackground#e1e7ea
  • statusBarItem.hoverBackground#f2f4f633
  • statusBarItem.remoteBackground#4d6978
  • statusBarItem.remoteForeground#141b1f
  • tab.activeBackground#f5f7f8
  • tab.activeBorder#5b7b8d
  • tab.activeBorderTop#5b7b8d00
  • tab.activeForeground#141b1f
  • tab.border#b5c4cc
  • tab.inactiveBackground#ebeff1
  • tab.inactiveForeground#5b7b8d
  • terminal.ansiBlack#141b1f
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#5b7b8d
  • terminal.ansiBrightBlue#2c9fd9
  • terminal.ansiBrightCyan#45b5aa
  • terminal.ansiBrightGreen#88b04b
  • terminal.ansiBrightMagenta#b163a3
  • terminal.ansiBrightRed#dd4132
  • terminal.ansiBrightWhite#f2f4f6
  • terminal.ansiBrightYellow#efc050
  • terminal.ansiCyan#006e7f
  • terminal.ansiGreen#4e9a2f
  • terminal.ansiMagenta#8c3359
  • terminal.ansiRed#bf1932
  • terminal.ansiWhite#f5f7f8
  • terminal.ansiYellow#d4a017
  • terminal.background#ebeff1
  • terminal.foreground#141b1f
  • terminalCursor.foreground#5b7b8d
  • textLink.activeForeground#cc987a
  • textLink.foreground#e6ab89
  • titleBar.activeBackground#ebeff1
  • titleBar.activeForeground#141b1f
  • titleBar.border#b5c4cc
  • titleBar.inactiveBackground#ebeff1
  • titleBar.inactiveForeground#5b7b8d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#5b7b8ditalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#547182bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#547182bold
storage.type, storage.modifier#547182bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#84624e
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#547182
string.regexp#84624e
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#3d7925
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#5f4b8bbold
variable.other.constant, variable.other.enummember#5f4b8bbold
constant.character.escape#5a6f7a
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#003da5italic
entity.name.type.parameter#003da5italic
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#141b1f
variable.parameter#141b1fitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#547182italic
variable.other.property, variable.other.object.property, meta.object-literal.key#141b1f
entity.name.class, entity.name.type.class, support.class#9e4fa5bold italic
entity.other.inherited-class#9e4fa5italic
entity.name.tag, punctuation.definition.tag#547182bold
entity.other.attribute-name#786d74italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#5a6f7a
punctuation, punctuation.separator, punctuation.terminator, meta.brace#5b7b8d
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#003da5italic
support.type.property-name.css, support.type.vendored.property-name.css#003da5
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#9e4fa5bold
support.constant.property-value.css, support.constant.color.css#5f4b8b
keyword.other.unit.css#3d7925
support.type.property-name.json#003da5
markup.heading, markup.heading entity.name, entity.name.section.markdown#547182bold
markup.bold#5f4b8bbold
markup.italic#003da5italic
markup.inline.raw, markup.raw#84624e
markup.underline.link#786d74
markup.quote#5b7b8ditalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050