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#e0e8ec
  • activityBar.border#adc9d3
  • activityBar.foreground#0090b4
  • activityBar.inactiveForeground#3792af
  • activityBarBadge.background#de907d
  • activityBarBadge.foreground#f2f4f6
  • badge.background#0090b4
  • badge.foreground#002831
  • breadcrumb.activeSelectionForeground#002831
  • breadcrumb.focusForeground#002831
  • breadcrumb.foreground#3792af
  • button.background#0090b4
  • button.foreground#002831
  • button.hoverBackground#0082a2
  • button.secondaryBackground#e0e8ec
  • button.secondaryForeground#002831
  • descriptionForeground#3792af
  • dropdown.background#f5f7f9
  • dropdown.border#adc9d3
  • dropdown.foreground#002831
  • editor.background#f5f7f9
  • editor.findMatchBackground#4e9a2f59
  • editor.findMatchHighlightBackground#4e9a2f26
  • editor.foreground#002831
  • editor.inactiveSelectionBackground#0090b41a
  • editor.lineHighlightBackground#0090b414
  • editor.lineHighlightBorder#0090b400
  • editor.selectionBackground#0090b433
  • editor.wordHighlightBackground#0090b426
  • editorBracketMatch.background#0090b433
  • editorBracketMatch.border#0090b480
  • editorCursor.foreground#0090b4
  • editorError.foreground#bf1932
  • editorGroup.border#adc9d3
  • editorGroupHeader.tabsBackground#eaf0f2
  • editorGroupHeader.tabsBorder#adc9d3
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#0028312e
  • editorIndentGuide.background#00283114
  • editorInfo.foreground#de907d
  • editorLineNumber.activeForeground#002831
  • editorLineNumber.foreground#3792af
  • editorRuler.foreground#00283114
  • editorSuggestWidget.selectedBackground#0090b426
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#0028311a
  • editorWidget.background#f5f7f9
  • editorWidget.border#adc9d3
  • focusBorder#0090b480
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#3792af
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#3792af
  • input.background#f5f7f9
  • input.border#adc9d3
  • input.foreground#002831
  • input.placeholderForeground#3792af
  • inputOption.activeBorder#0090b4
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#de907d
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#0090b433
  • list.activeSelectionForeground#002831
  • list.focusBackground#0090b426
  • list.highlightForeground#0090b4
  • list.hoverBackground#0090b41a
  • list.inactiveSelectionBackground#0090b41a
  • minimap.background#f5f7f9
  • minimap.findMatchHighlight#4e9a2f80
  • minimap.selectionHighlight#0090b44d
  • notificationLink.foreground#0090b4
  • notifications.background#f5f7f9
  • notifications.foreground#002831
  • panel.background#eaf0f2
  • panel.border#adc9d3
  • panelTitle.activeBorder#0090b4
  • panelTitle.activeForeground#002831
  • panelTitle.inactiveForeground#3792af
  • peekView.border#0090b4
  • peekViewEditor.background#eaf0f2
  • peekViewResult.background#e0e8ec
  • peekViewTitle.background#eaf0f2
  • progressBar.background#0090b4
  • scrollbar.shadow#00121614
  • scrollbarSlider.activeBackground#0028314d
  • scrollbarSlider.background#0028311a
  • scrollbarSlider.hoverBackground#00283133
  • selection.background#0090b433
  • sideBar.background#eaf0f2
  • sideBar.border#adc9d3
  • sideBar.foreground#002831
  • sideBarSectionHeader.background#0090b41a
  • sideBarSectionHeader.foreground#002831
  • sideBarTitle.foreground#002831
  • statusBar.background#0090b4
  • statusBar.border#adc9d3
  • statusBar.debuggingBackground#de907d
  • statusBar.debuggingForeground#f2f4f6
  • statusBar.foreground#002831
  • statusBar.noFolderBackground#e0e8ec
  • statusBarItem.hoverBackground#f2f4f633
  • statusBarItem.remoteBackground#007a99
  • statusBarItem.remoteForeground#002831
  • tab.activeBackground#f5f7f9
  • tab.activeBorder#0090b4
  • tab.activeBorderTop#0090b400
  • tab.activeForeground#002831
  • tab.border#adc9d3
  • tab.inactiveBackground#eaf0f2
  • tab.inactiveForeground#3792af
  • terminal.ansiBlack#002831
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#3792af
  • 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#f5f7f9
  • terminal.ansiYellow#d4a017
  • terminal.background#eaf0f2
  • terminal.foreground#002831
  • terminalCursor.foreground#0090b4
  • textLink.activeForeground#c6806f
  • textLink.foreground#de907d
  • titleBar.activeBackground#eaf0f2
  • titleBar.activeForeground#002831
  • titleBar.border#adc9d3
  • titleBar.inactiveBackground#eaf0f2
  • titleBar.inactiveForeground#3792af

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#3792afitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#007894bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#007894bold
storage.type, storage.modifier#007894bold
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#007894
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#17748c
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#2e6f6bitalic
entity.name.type.parameter#2e6f6bitalic
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#002831
variable.parameter#002831italic
variable.language, variable.language.this, variable.language.self, variable.language.super#007894italic
variable.other.property, variable.other.object.property, meta.object-literal.key#002831
entity.name.class, entity.name.type.class, support.class#5c068cbold italic
entity.other.inherited-class#5c068citalic
entity.name.tag, punctuation.definition.tag#007894bold
entity.other.attribute-name#786d74italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#17748c
punctuation, punctuation.separator, punctuation.terminator, meta.brace#3792af
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#2e6f6bitalic
support.type.property-name.css, support.type.vendored.property-name.css#2e6f6b
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#2e6f6b
markup.heading, markup.heading entity.name, entity.name.section.markdown#007894bold
markup.bold#6667abbold
markup.italic#2e6f6bitalic
markup.inline.raw, markup.raw#966155
markup.underline.link#786d74
markup.quote#3792afitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050