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#e8eaeb
  • activityBar.border#c0c8ce
  • activityBar.foreground#1464a0
  • activityBar.inactiveForeground#5b7d96
  • activityBarBadge.background#e66000
  • activityBarBadge.foreground#f6f6f6
  • badge.background#1464a0
  • badge.foreground#f6f6f6
  • breadcrumb.activeSelectionForeground#041623
  • breadcrumb.focusForeground#041623
  • breadcrumb.foreground#5b7d96
  • button.background#1464a0
  • button.foreground#f6f6f6
  • button.hoverBackground#125a90
  • button.secondaryBackground#e8eaeb
  • button.secondaryForeground#041623
  • descriptionForeground#5b7d96
  • dropdown.background#f7f8f8
  • dropdown.border#c0c8ce
  • dropdown.foreground#041623
  • editor.background#f7f8f8
  • editor.findMatchBackground#9e4fa559
  • editor.findMatchHighlightBackground#9e4fa526
  • editor.foreground#041623
  • editor.inactiveSelectionBackground#1464a01a
  • editor.lineHighlightBackground#1464a014
  • editor.lineHighlightBorder#1464a000
  • editor.selectionBackground#1464a033
  • editor.wordHighlightBackground#1464a026
  • editorBracketMatch.background#1464a033
  • editorBracketMatch.border#1464a080
  • editorCursor.foreground#1464a0
  • editorError.foreground#bf1932
  • editorGroup.border#c0c8ce
  • editorGroupHeader.tabsBackground#f0f1f2
  • editorGroupHeader.tabsBorder#c0c8ce
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#0416232e
  • editorIndentGuide.background#04162314
  • editorInfo.foreground#e66000
  • editorLineNumber.activeForeground#041623
  • editorLineNumber.foreground#5b7d96
  • editorRuler.foreground#04162314
  • editorSuggestWidget.selectedBackground#1464a026
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#0416231a
  • editorWidget.background#f7f8f8
  • editorWidget.border#c0c8ce
  • focusBorder#1464a080
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#5b7d96
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#5b7d96
  • input.background#f7f8f8
  • input.border#c0c8ce
  • input.foreground#041623
  • input.placeholderForeground#5b7d96
  • inputOption.activeBorder#1464a0
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#e66000
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#1464a033
  • list.activeSelectionForeground#041623
  • list.focusBackground#1464a026
  • list.highlightForeground#1464a0
  • list.hoverBackground#1464a01a
  • list.inactiveSelectionBackground#1464a01a
  • minimap.background#f7f8f8
  • minimap.findMatchHighlight#9e4fa580
  • minimap.selectionHighlight#1464a04d
  • notificationLink.foreground#1464a0
  • notifications.background#f7f8f8
  • notifications.foreground#041623
  • panel.background#f0f1f2
  • panel.border#c0c8ce
  • panelTitle.activeBorder#1464a0
  • panelTitle.activeForeground#041623
  • panelTitle.inactiveForeground#5b7d96
  • peekView.border#1464a0
  • peekViewEditor.background#f0f1f2
  • peekViewResult.background#e8eaeb
  • peekViewTitle.background#f0f1f2
  • progressBar.background#1464a0
  • scrollbar.shadow#020a1014
  • scrollbarSlider.activeBackground#0416234d
  • scrollbarSlider.background#0416231a
  • scrollbarSlider.hoverBackground#04162333
  • selection.background#1464a033
  • sideBar.background#f0f1f2
  • sideBar.border#c0c8ce
  • sideBar.foreground#041623
  • sideBarSectionHeader.background#1464a01a
  • sideBarSectionHeader.foreground#041623
  • sideBarTitle.foreground#041623
  • statusBar.background#1464a0
  • statusBar.border#c0c8ce
  • statusBar.debuggingBackground#e66000
  • statusBar.debuggingForeground#f6f6f6
  • statusBar.foreground#f6f6f6
  • statusBar.noFolderBackground#e8eaeb
  • statusBarItem.hoverBackground#f6f6f633
  • statusBarItem.remoteBackground#115588
  • statusBarItem.remoteForeground#f6f6f6
  • tab.activeBackground#f7f8f8
  • tab.activeBorder#1464a0
  • tab.activeBorderTop#1464a000
  • tab.activeForeground#041623
  • tab.border#c0c8ce
  • tab.inactiveBackground#f0f1f2
  • tab.inactiveForeground#5b7d96
  • terminal.ansiBlack#041623
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#5b7d96
  • terminal.ansiBrightBlue#2c9fd9
  • terminal.ansiBrightCyan#45b5aa
  • terminal.ansiBrightGreen#88b04b
  • terminal.ansiBrightMagenta#b163a3
  • terminal.ansiBrightRed#dd4132
  • terminal.ansiBrightWhite#f6f6f6
  • terminal.ansiBrightYellow#efc050
  • terminal.ansiCyan#006e7f
  • terminal.ansiGreen#4e9a2f
  • terminal.ansiMagenta#8c3359
  • terminal.ansiRed#bf1932
  • terminal.ansiWhite#f7f8f8
  • terminal.ansiYellow#d4a017
  • terminal.background#f0f1f2
  • terminal.foreground#041623
  • terminalCursor.foreground#1464a0
  • textLink.activeForeground#cc5600
  • textLink.foreground#e66000
  • titleBar.activeBackground#f0f1f2
  • titleBar.activeForeground#041623
  • titleBar.border#c0c8ce
  • titleBar.inactiveBackground#f0f1f2
  • titleBar.inactiveForeground#5b7d96

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#5b7d96italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#1464a0bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#1464a0bold
storage.type, storage.modifier#1464a0bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#b74c00
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#1464a0
string.regexp#b74c00
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#9e4fa5
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#5f4b8bbold
variable.other.constant, variable.other.enummember#5f4b8bbold
constant.character.escape#3371a0
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#006e7fitalic
entity.name.type.parameter#006e7fitalic
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#041623
variable.parameter#041623italic
variable.language, variable.language.this, variable.language.self, variable.language.super#1464a0italic
variable.other.property, variable.other.object.property, meta.object-literal.key#041623
entity.name.class, entity.name.type.class, support.class#38793abold italic
entity.other.inherited-class#38793aitalic
entity.name.tag, punctuation.definition.tag#1464a0bold
entity.other.attribute-name#786d74italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#3371a0
punctuation, punctuation.separator, punctuation.terminator, meta.brace#5b7d96
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#006e7fitalic
support.type.property-name.css, support.type.vendored.property-name.css#006e7f
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#38793abold
support.constant.property-value.css, support.constant.color.css#5f4b8b
keyword.other.unit.css#9e4fa5
support.type.property-name.json#006e7f
markup.heading, markup.heading entity.name, entity.name.section.markdown#1464a0bold
markup.bold#5f4b8bbold
markup.italic#006e7fitalic
markup.inline.raw, markup.raw#b74c00
markup.underline.link#786d74
markup.quote#5b7d96italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050