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#e1e8ec
  • activityBar.border#b1c7d2
  • activityBar.foreground#237fae
  • activityBar.inactiveForeground#4889ab
  • activityBarBadge.background#e54800
  • activityBarBadge.foreground#f2f4f6
  • badge.background#237fae
  • badge.foreground#071821
  • breadcrumb.activeSelectionForeground#071821
  • breadcrumb.focusForeground#071821
  • breadcrumb.foreground#4889ab
  • button.background#237fae
  • button.foreground#071821
  • button.hoverBackground#20729d
  • button.secondaryBackground#e1e8ec
  • button.secondaryForeground#071821
  • descriptionForeground#4889ab
  • dropdown.background#f5f7f9
  • dropdown.border#b1c7d2
  • dropdown.foreground#071821
  • editor.background#f5f7f9
  • editor.findMatchBackground#4e9a2f59
  • editor.findMatchHighlightBackground#4e9a2f26
  • editor.foreground#071821
  • editor.inactiveSelectionBackground#237fae1a
  • editor.lineHighlightBackground#237fae14
  • editor.lineHighlightBorder#237fae00
  • editor.selectionBackground#237fae33
  • editor.wordHighlightBackground#237fae26
  • editorBracketMatch.background#237fae33
  • editorBracketMatch.border#237fae80
  • editorCursor.foreground#237fae
  • editorError.foreground#bf1932
  • editorGroup.border#b1c7d2
  • editorGroupHeader.tabsBackground#ebf0f2
  • editorGroupHeader.tabsBorder#b1c7d2
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#0718212e
  • editorIndentGuide.background#07182114
  • editorInfo.foreground#e54800
  • editorLineNumber.activeForeground#071821
  • editorLineNumber.foreground#4889ab
  • editorRuler.foreground#07182114
  • editorSuggestWidget.selectedBackground#237fae26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#0718211a
  • editorWidget.background#f5f7f9
  • editorWidget.border#b1c7d2
  • focusBorder#237fae80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#4889ab
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#4889ab
  • input.background#f5f7f9
  • input.border#b1c7d2
  • input.foreground#071821
  • input.placeholderForeground#4889ab
  • inputOption.activeBorder#237fae
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#e54800
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#237fae33
  • list.activeSelectionForeground#071821
  • list.focusBackground#237fae26
  • list.highlightForeground#237fae
  • list.hoverBackground#237fae1a
  • list.inactiveSelectionBackground#237fae1a
  • minimap.background#f5f7f9
  • minimap.findMatchHighlight#4e9a2f80
  • minimap.selectionHighlight#237fae4d
  • notificationLink.foreground#237fae
  • notifications.background#f5f7f9
  • notifications.foreground#071821
  • panel.background#ebf0f2
  • panel.border#b1c7d2
  • panelTitle.activeBorder#237fae
  • panelTitle.activeForeground#071821
  • panelTitle.inactiveForeground#4889ab
  • peekView.border#237fae
  • peekViewEditor.background#ebf0f2
  • peekViewResult.background#e1e8ec
  • peekViewTitle.background#ebf0f2
  • progressBar.background#237fae
  • scrollbar.shadow#04101614
  • scrollbarSlider.activeBackground#0718214d
  • scrollbarSlider.background#0718211a
  • scrollbarSlider.hoverBackground#07182133
  • selection.background#237fae33
  • sideBar.background#ebf0f2
  • sideBar.border#b1c7d2
  • sideBar.foreground#071821
  • sideBarSectionHeader.background#237fae1a
  • sideBarSectionHeader.foreground#071821
  • sideBarTitle.foreground#071821
  • statusBar.background#237fae
  • statusBar.border#b1c7d2
  • statusBar.debuggingBackground#e54800
  • statusBar.debuggingForeground#f2f4f6
  • statusBar.foreground#071821
  • statusBar.noFolderBackground#e1e8ec
  • statusBarItem.hoverBackground#f2f4f633
  • statusBarItem.remoteBackground#1e6c94
  • statusBarItem.remoteForeground#071821
  • tab.activeBackground#f5f7f9
  • tab.activeBorder#237fae
  • tab.activeBorderTop#237fae00
  • tab.activeForeground#071821
  • tab.border#b1c7d2
  • tab.inactiveBackground#ebf0f2
  • tab.inactiveForeground#4889ab
  • terminal.ansiBlack#071821
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#4889ab
  • 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#ebf0f2
  • terminal.foreground#071821
  • terminalCursor.foreground#237fae
  • textLink.activeForeground#cb4000
  • textLink.foreground#e54800
  • titleBar.activeBackground#ebf0f2
  • titleBar.activeForeground#071821
  • titleBar.border#b1c7d2
  • titleBar.inactiveBackground#ebf0f2
  • titleBar.inactiveForeground#4889ab

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#4889abitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#1f719bbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#1f719bbold
storage.type, storage.modifier#1f719bbold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#c63f00
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#1f719b
string.regexp#c63f00
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#3d7925
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#007f2ebold
variable.other.constant, variable.other.enummember#007f2ebold
constant.character.escape#327193
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#4a6fa5italic
entity.name.type.parameter#4a6fa5italic
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#071821
variable.parameter#071821italic
variable.language, variable.language.this, variable.language.self, variable.language.super#1f719bitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#071821
entity.name.class, entity.name.type.class, support.class#9e4fa5bold italic
entity.other.inherited-class#9e4fa5italic
entity.name.tag, punctuation.definition.tag#1f719bbold
entity.other.attribute-name#786d74italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#327193
punctuation, punctuation.separator, punctuation.terminator, meta.brace#4889ab
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#4a6fa5italic
support.type.property-name.css, support.type.vendored.property-name.css#4a6fa5
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#9e4fa5bold
support.constant.property-value.css, support.constant.color.css#007f2e
keyword.other.unit.css#3d7925
support.type.property-name.json#4a6fa5
markup.heading, markup.heading entity.name, entity.name.section.markdown#1f719bbold
markup.bold#007f2ebold
markup.italic#4a6fa5italic
markup.inline.raw, markup.raw#c63f00
markup.underline.link#786d74
markup.quote#4889abitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050