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#e3e9ec
  • activityBar.border#bdccd3
  • activityBar.foreground#8dacb4
  • activityBar.inactiveForeground#7da0af
  • activityBarBadge.background#de907d
  • activityBarBadge.foreground#f2f4f6
  • badge.background#8dacb4
  • badge.foreground#1a2022
  • breadcrumb.activeSelectionForeground#1a2022
  • breadcrumb.focusForeground#1a2022
  • breadcrumb.foreground#7da0af
  • button.background#8dacb4
  • button.foreground#1a2022
  • button.hoverBackground#7f9ba2
  • button.secondaryBackground#e3e9ec
  • button.secondaryForeground#1a2022
  • descriptionForeground#7da0af
  • dropdown.background#f6f8f9
  • dropdown.border#bdccd3
  • dropdown.foreground#1a2022
  • editor.background#f6f8f9
  • editor.findMatchBackground#4e9a2f59
  • editor.findMatchHighlightBackground#4e9a2f26
  • editor.foreground#1a2022
  • editor.inactiveSelectionBackground#8dacb41a
  • editor.lineHighlightBackground#8dacb414
  • editor.lineHighlightBorder#8dacb400
  • editor.selectionBackground#8dacb433
  • editor.wordHighlightBackground#8dacb426
  • editorBracketMatch.background#8dacb433
  • editorBracketMatch.border#8dacb480
  • editorCursor.foreground#8dacb4
  • editorError.foreground#bf1932
  • editorGroup.border#bdccd3
  • editorGroupHeader.tabsBackground#ecf0f2
  • editorGroupHeader.tabsBorder#bdccd3
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#1a20222e
  • editorIndentGuide.background#1a202214
  • editorInfo.foreground#de907d
  • editorLineNumber.activeForeground#1a2022
  • editorLineNumber.foreground#7da0af
  • editorRuler.foreground#1a202214
  • editorSuggestWidget.selectedBackground#8dacb426
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#1a20221a
  • editorWidget.background#f6f8f9
  • editorWidget.border#bdccd3
  • focusBorder#8dacb480
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#7da0af
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#7da0af
  • input.background#f6f8f9
  • input.border#bdccd3
  • input.foreground#1a2022
  • input.placeholderForeground#7da0af
  • inputOption.activeBorder#8dacb4
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#de907d
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#8dacb433
  • list.activeSelectionForeground#1a2022
  • list.focusBackground#8dacb426
  • list.highlightForeground#8dacb4
  • list.hoverBackground#8dacb41a
  • list.inactiveSelectionBackground#8dacb41a
  • minimap.background#f6f8f9
  • minimap.findMatchHighlight#4e9a2f80
  • minimap.selectionHighlight#8dacb44d
  • notificationLink.foreground#8dacb4
  • notifications.background#f6f8f9
  • notifications.foreground#1a2022
  • panel.background#ecf0f2
  • panel.border#bdccd3
  • panelTitle.activeBorder#8dacb4
  • panelTitle.activeForeground#1a2022
  • panelTitle.inactiveForeground#7da0af
  • peekView.border#8dacb4
  • peekViewEditor.background#ecf0f2
  • peekViewResult.background#e3e9ec
  • peekViewTitle.background#ecf0f2
  • progressBar.background#8dacb4
  • scrollbar.shadow#12151614
  • scrollbarSlider.activeBackground#1a20224d
  • scrollbarSlider.background#1a20221a
  • scrollbarSlider.hoverBackground#1a202233
  • selection.background#8dacb433
  • sideBar.background#ecf0f2
  • sideBar.border#bdccd3
  • sideBar.foreground#1a2022
  • sideBarSectionHeader.background#8dacb41a
  • sideBarSectionHeader.foreground#1a2022
  • sideBarTitle.foreground#1a2022
  • statusBar.background#8dacb4
  • statusBar.border#bdccd3
  • statusBar.debuggingBackground#de907d
  • statusBar.debuggingForeground#f2f4f6
  • statusBar.foreground#1a2022
  • statusBar.noFolderBackground#e3e9ec
  • statusBarItem.hoverBackground#f2f4f633
  • statusBarItem.remoteBackground#789299
  • statusBarItem.remoteForeground#1a2022
  • tab.activeBackground#f6f8f9
  • tab.activeBorder#8dacb4
  • tab.activeBorderTop#8dacb400
  • tab.activeForeground#1a2022
  • tab.border#bdccd3
  • tab.inactiveBackground#ecf0f2
  • tab.inactiveForeground#7da0af
  • terminal.ansiBlack#1a2022
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#7da0af
  • 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#f6f8f9
  • terminal.ansiYellow#d4a017
  • terminal.background#ecf0f2
  • terminal.foreground#1a2022
  • terminalCursor.foreground#8dacb4
  • textLink.activeForeground#c6806f
  • textLink.foreground#de907d
  • titleBar.activeBackground#ecf0f2
  • titleBar.activeForeground#1a2022
  • titleBar.border#bdccd3
  • titleBar.inactiveBackground#ecf0f2
  • titleBar.inactiveForeground#7da0af

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#7da0afitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#5a6f73bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#5a6f73bold
storage.type, storage.modifier#5a6f73bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#966155
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#5a6f73
string.regexp#966155
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#3d7925
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#6667abbold
variable.other.constant, variable.other.enummember#6667abbold
constant.character.escape#607077
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#0f4c81italic
entity.name.type.parameter#0f4c81italic
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#1a2022
variable.parameter#1a2022italic
variable.language, variable.language.this, variable.language.self, variable.language.super#5a6f73italic
variable.other.property, variable.other.object.property, meta.object-literal.key#1a2022
entity.name.class, entity.name.type.class, support.class#5c068cbold italic
entity.other.inherited-class#5c068citalic
entity.name.tag, punctuation.definition.tag#5a6f73bold
entity.other.attribute-name#786d74italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#607077
punctuation, punctuation.separator, punctuation.terminator, meta.brace#7da0af
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#0f4c81italic
support.type.property-name.css, support.type.vendored.property-name.css#0f4c81
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5c068cbold
support.constant.property-value.css, support.constant.color.css#6667ab
keyword.other.unit.css#3d7925
support.type.property-name.json#0f4c81
markup.heading, markup.heading entity.name, entity.name.section.markdown#5a6f73bold
markup.bold#6667abbold
markup.italic#0f4c81italic
markup.inline.raw, markup.raw#966155
markup.underline.link#786d74
markup.quote#7da0afitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050