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#adc9d2
  • activityBar.foreground#0091a3
  • activityBar.inactiveForeground#3792a6
  • activityBarBadge.background#e67567
  • activityBarBadge.foreground#f2f4f6
  • badge.background#0091a3
  • badge.foreground#00282d
  • breadcrumb.activeSelectionForeground#00282d
  • breadcrumb.focusForeground#00282d
  • breadcrumb.foreground#3792a6
  • button.background#0091a3
  • button.foreground#00282d
  • button.hoverBackground#008393
  • button.secondaryBackground#e0e8ec
  • button.secondaryForeground#00282d
  • descriptionForeground#3792a6
  • dropdown.background#f5f7f9
  • dropdown.border#adc9d2
  • dropdown.foreground#00282d
  • editor.background#f5f7f9
  • editor.findMatchBackground#5c068c59
  • editor.findMatchHighlightBackground#5c068c26
  • editor.foreground#00282d
  • editor.inactiveSelectionBackground#0091a31a
  • editor.lineHighlightBackground#0091a314
  • editor.lineHighlightBorder#0091a300
  • editor.selectionBackground#0091a333
  • editor.wordHighlightBackground#0091a326
  • editorBracketMatch.background#0091a333
  • editorBracketMatch.border#0091a380
  • editorCursor.foreground#0091a3
  • editorError.foreground#bf1932
  • editorGroup.border#adc9d2
  • editorGroupHeader.tabsBackground#eaf0f2
  • editorGroupHeader.tabsBorder#adc9d2
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#00282d2e
  • editorIndentGuide.background#00282d14
  • editorInfo.foreground#e67567
  • editorLineNumber.activeForeground#00282d
  • editorLineNumber.foreground#3792a6
  • editorRuler.foreground#00282d14
  • editorSuggestWidget.selectedBackground#0091a326
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#00282d1a
  • editorWidget.background#f5f7f9
  • editorWidget.border#adc9d2
  • focusBorder#0091a380
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#3792a6
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#3792a6
  • input.background#f5f7f9
  • input.border#adc9d2
  • input.foreground#00282d
  • input.placeholderForeground#3792a6
  • inputOption.activeBorder#0091a3
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#e67567
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#0091a333
  • list.activeSelectionForeground#00282d
  • list.focusBackground#0091a326
  • list.highlightForeground#0091a3
  • list.hoverBackground#0091a31a
  • list.inactiveSelectionBackground#0091a31a
  • minimap.background#f5f7f9
  • minimap.findMatchHighlight#5c068c80
  • minimap.selectionHighlight#0091a34d
  • notificationLink.foreground#0091a3
  • notifications.background#f5f7f9
  • notifications.foreground#00282d
  • panel.background#eaf0f2
  • panel.border#adc9d2
  • panelTitle.activeBorder#0091a3
  • panelTitle.activeForeground#00282d
  • panelTitle.inactiveForeground#3792a6
  • peekView.border#0091a3
  • peekViewEditor.background#eaf0f2
  • peekViewResult.background#e0e8ec
  • peekViewTitle.background#eaf0f2
  • progressBar.background#0091a3
  • scrollbar.shadow#00121414
  • scrollbarSlider.activeBackground#00282d4d
  • scrollbarSlider.background#00282d1a
  • scrollbarSlider.hoverBackground#00282d33
  • selection.background#0091a333
  • sideBar.background#eaf0f2
  • sideBar.border#adc9d2
  • sideBar.foreground#00282d
  • sideBarSectionHeader.background#0091a31a
  • sideBarSectionHeader.foreground#00282d
  • sideBarTitle.foreground#00282d
  • statusBar.background#0091a3
  • statusBar.border#adc9d2
  • statusBar.debuggingBackground#e67567
  • statusBar.debuggingForeground#f2f4f6
  • statusBar.foreground#00282d
  • statusBar.noFolderBackground#e0e8ec
  • statusBarItem.hoverBackground#f2f4f633
  • statusBarItem.remoteBackground#007b8b
  • statusBarItem.remoteForeground#00282d
  • tab.activeBackground#f5f7f9
  • tab.activeBorder#0091a3
  • tab.activeBorderTop#0091a300
  • tab.activeForeground#00282d
  • tab.border#adc9d2
  • tab.inactiveBackground#eaf0f2
  • tab.inactiveForeground#3792a6
  • terminal.ansiBlack#00282d
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#3792a6
  • 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#00282d
  • terminalCursor.foreground#0091a3
  • textLink.activeForeground#cc685b
  • textLink.foreground#e67567
  • titleBar.activeBackground#eaf0f2
  • titleBar.activeForeground#00282d
  • titleBar.border#adc9d2
  • titleBar.inactiveBackground#eaf0f2
  • titleBar.inactiveForeground#3792a6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#3792a6italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#007986bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#007986bold
storage.type, storage.modifier#007986bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#a8564b
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#007986
string.regexp#a8564b
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#5c068c
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#1b2a6bbold
variable.other.constant, variable.other.enummember#1b2a6bbold
constant.character.escape#177581
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#1464a0italic
entity.name.type.parameter#1464a0italic
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#00282d
variable.parameter#00282ditalic
variable.language, variable.language.this, variable.language.self, variable.language.super#007986italic
variable.other.property, variable.other.object.property, meta.object-literal.key#00282d
entity.name.class, entity.name.type.class, support.class#3d7925bold italic
entity.other.inherited-class#3d7925italic
entity.name.tag, punctuation.definition.tag#007986bold
entity.other.attribute-name#786d74italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#177581
punctuation, punctuation.separator, punctuation.terminator, meta.brace#3792a6
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#1464a0italic
support.type.property-name.css, support.type.vendored.property-name.css#1464a0
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#3d7925bold
support.constant.property-value.css, support.constant.color.css#1b2a6b
keyword.other.unit.css#5c068c
support.type.property-name.json#1464a0
markup.heading, markup.heading entity.name, entity.name.section.markdown#007986bold
markup.bold#1b2a6bbold
markup.italic#1464a0italic
markup.inline.raw, markup.raw#a8564b
markup.underline.link#786d74
markup.quote#3792a6italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050