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#e0e7ea
  • activityBar.border#adc2ca
  • activityBar.foreground#006e7f
  • activityBar.inactiveForeground#377687
  • activityBarBadge.background#e6604c
  • activityBarBadge.foreground#f2f4f6
  • badge.background#006e7f
  • badge.foreground#f2f4f6
  • breadcrumb.activeSelectionForeground#00181c
  • breadcrumb.focusForeground#00181c
  • breadcrumb.foreground#377687
  • button.background#006e7f
  • button.foreground#f2f4f6
  • button.hoverBackground#006372
  • button.secondaryBackground#e0e7ea
  • button.secondaryForeground#00181c
  • descriptionForeground#377687
  • dropdown.background#f5f7f8
  • dropdown.border#adc2ca
  • dropdown.foreground#00181c
  • editor.background#f5f7f8
  • editor.findMatchBackground#5c068c59
  • editor.findMatchHighlightBackground#5c068c26
  • editor.foreground#00181c
  • editor.inactiveSelectionBackground#006e7f1a
  • editor.lineHighlightBackground#006e7f14
  • editor.lineHighlightBorder#006e7f00
  • editor.selectionBackground#006e7f33
  • editor.wordHighlightBackground#006e7f26
  • editorBracketMatch.background#006e7f33
  • editorBracketMatch.border#006e7f80
  • editorCursor.foreground#006e7f
  • editorError.foreground#bf1932
  • editorGroup.border#adc2ca
  • editorGroupHeader.tabsBackground#eaeff1
  • editorGroupHeader.tabsBorder#adc2ca
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#00181c2e
  • editorIndentGuide.background#00181c14
  • editorInfo.foreground#e6604c
  • editorLineNumber.activeForeground#00181c
  • editorLineNumber.foreground#377687
  • editorRuler.foreground#00181c14
  • editorSuggestWidget.selectedBackground#006e7f26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#00181c1a
  • editorWidget.background#f5f7f8
  • editorWidget.border#adc2ca
  • focusBorder#006e7f80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#377687
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#377687
  • input.background#f5f7f8
  • input.border#adc2ca
  • input.foreground#00181c
  • input.placeholderForeground#377687
  • inputOption.activeBorder#006e7f
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#e6604c
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#006e7f33
  • list.activeSelectionForeground#00181c
  • list.focusBackground#006e7f26
  • list.highlightForeground#006e7f
  • list.hoverBackground#006e7f1a
  • list.inactiveSelectionBackground#006e7f1a
  • minimap.background#f5f7f8
  • minimap.findMatchHighlight#5c068c80
  • minimap.selectionHighlight#006e7f4d
  • notificationLink.foreground#006e7f
  • notifications.background#f5f7f8
  • notifications.foreground#00181c
  • panel.background#eaeff1
  • panel.border#adc2ca
  • panelTitle.activeBorder#006e7f
  • panelTitle.activeForeground#00181c
  • panelTitle.inactiveForeground#377687
  • peekView.border#006e7f
  • peekViewEditor.background#eaeff1
  • peekViewResult.background#e0e7ea
  • peekViewTitle.background#eaeff1
  • progressBar.background#006e7f
  • scrollbar.shadow#000b0d14
  • scrollbarSlider.activeBackground#00181c4d
  • scrollbarSlider.background#00181c1a
  • scrollbarSlider.hoverBackground#00181c33
  • selection.background#006e7f33
  • sideBar.background#eaeff1
  • sideBar.border#adc2ca
  • sideBar.foreground#00181c
  • sideBarSectionHeader.background#006e7f1a
  • sideBarSectionHeader.foreground#00181c
  • sideBarTitle.foreground#00181c
  • statusBar.background#006e7f
  • statusBar.border#adc2ca
  • statusBar.debuggingBackground#e6604c
  • statusBar.debuggingForeground#f2f4f6
  • statusBar.foreground#f2f4f6
  • statusBar.noFolderBackground#e0e7ea
  • statusBarItem.hoverBackground#f2f4f633
  • statusBarItem.remoteBackground#005e6c
  • statusBarItem.remoteForeground#f2f4f6
  • tab.activeBackground#f5f7f8
  • tab.activeBorder#006e7f
  • tab.activeBorderTop#006e7f00
  • tab.activeForeground#00181c
  • tab.border#adc2ca
  • tab.inactiveBackground#eaeff1
  • tab.inactiveForeground#377687
  • terminal.ansiBlack#00181c
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#377687
  • 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#f5f7f8
  • terminal.ansiYellow#d4a017
  • terminal.background#eaeff1
  • terminal.foreground#00181c
  • terminalCursor.foreground#006e7f
  • textLink.activeForeground#cc5643
  • textLink.foreground#e6604c
  • titleBar.activeBackground#eaeff1
  • titleBar.activeForeground#00181c
  • titleBar.border#adc2ca
  • titleBar.inactiveBackground#eaeff1
  • titleBar.inactiveForeground#377687

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#377687italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#006e7fbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#006e7fbold
storage.type, storage.modifier#006e7fbold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#b74c3c
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#006e7f
string.regexp#b74c3c
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#237986
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#00181c
variable.parameter#00181citalic
variable.language, variable.language.this, variable.language.self, variable.language.super#006e7fitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#00181c
entity.name.class, entity.name.type.class, support.class#3d7925bold italic
entity.other.inherited-class#3d7925italic
entity.name.tag, punctuation.definition.tag#006e7fbold
entity.other.attribute-name#786d74italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#237986
punctuation, punctuation.separator, punctuation.terminator, meta.brace#377687
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#006e7fbold
markup.bold#1b2a6bbold
markup.italic#1464a0italic
markup.inline.raw, markup.raw#b74c3c
markup.underline.link#786d74
markup.quote#377687italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050