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#eceeee
  • activityBar.border#d0d8d6
  • activityBar.foreground#6ba699
  • activityBar.inactiveForeground#92b2ab
  • activityBarBadge.background#70192d
  • activityBarBadge.foreground#f7f7f7
  • badge.background#6ba699
  • badge.foreground#141f1d
  • breadcrumb.activeSelectionForeground#141f1d
  • breadcrumb.focusForeground#141f1d
  • breadcrumb.foreground#92b2ab
  • button.background#6ba699
  • button.foreground#141f1d
  • button.hoverBackground#60958a
  • button.secondaryBackground#eceeee
  • button.secondaryForeground#141f1d
  • descriptionForeground#92b2ab
  • dropdown.background#f9f9f9
  • dropdown.border#d0d8d6
  • dropdown.foreground#141f1d
  • editor.background#f9f9f9
  • editor.findMatchBackground#5f4b8b59
  • editor.findMatchHighlightBackground#5f4b8b26
  • editor.foreground#141f1d
  • editor.inactiveSelectionBackground#6ba6991a
  • editor.lineHighlightBackground#6ba69914
  • editor.lineHighlightBorder#6ba69900
  • editor.selectionBackground#6ba69933
  • editor.wordHighlightBackground#6ba69926
  • editorBracketMatch.background#6ba69933
  • editorBracketMatch.border#6ba69980
  • editorCursor.foreground#6ba699
  • editorError.foreground#bf1932
  • editorGroup.border#d0d8d6
  • editorGroupHeader.tabsBackground#f3f4f4
  • editorGroupHeader.tabsBorder#d0d8d6
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#141f1d2e
  • editorIndentGuide.background#141f1d14
  • editorInfo.foreground#70192d
  • editorLineNumber.activeForeground#141f1d
  • editorLineNumber.foreground#92b2ab
  • editorRuler.foreground#141f1d14
  • editorSuggestWidget.selectedBackground#6ba69926
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#141f1d1a
  • editorWidget.background#f9f9f9
  • editorWidget.border#d0d8d6
  • focusBorder#6ba69980
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#92b2ab
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#92b2ab
  • input.background#f9f9f9
  • input.border#d0d8d6
  • input.foreground#141f1d
  • input.placeholderForeground#92b2ab
  • inputOption.activeBorder#6ba699
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#70192d
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#6ba69933
  • list.activeSelectionForeground#141f1d
  • list.focusBackground#6ba69926
  • list.highlightForeground#6ba699
  • list.hoverBackground#6ba6991a
  • list.inactiveSelectionBackground#6ba6991a
  • minimap.background#f9f9f9
  • minimap.findMatchHighlight#5f4b8b80
  • minimap.selectionHighlight#6ba6994d
  • notificationLink.foreground#6ba699
  • notifications.background#f9f9f9
  • notifications.foreground#141f1d
  • panel.background#f3f4f4
  • panel.border#d0d8d6
  • panelTitle.activeBorder#6ba699
  • panelTitle.activeForeground#141f1d
  • panelTitle.inactiveForeground#92b2ab
  • peekView.border#6ba699
  • peekViewEditor.background#f3f4f4
  • peekViewResult.background#eceeee
  • peekViewTitle.background#f3f4f4
  • progressBar.background#6ba699
  • scrollbar.shadow#0d151314
  • scrollbarSlider.activeBackground#141f1d4d
  • scrollbarSlider.background#141f1d1a
  • scrollbarSlider.hoverBackground#141f1d33
  • selection.background#6ba69933
  • sideBar.background#f3f4f4
  • sideBar.border#d0d8d6
  • sideBar.foreground#141f1d
  • sideBarSectionHeader.background#6ba6991a
  • sideBarSectionHeader.foreground#141f1d
  • sideBarTitle.foreground#141f1d
  • statusBar.background#6ba699
  • statusBar.border#d0d8d6
  • statusBar.debuggingBackground#70192d
  • statusBar.debuggingForeground#f7f7f7
  • statusBar.foreground#141f1d
  • statusBar.noFolderBackground#eceeee
  • statusBarItem.hoverBackground#f7f7f733
  • statusBarItem.remoteBackground#5b8d82
  • statusBarItem.remoteForeground#141f1d
  • tab.activeBackground#f9f9f9
  • tab.activeBorder#6ba699
  • tab.activeBorderTop#6ba69900
  • tab.activeForeground#141f1d
  • tab.border#d0d8d6
  • tab.inactiveBackground#f3f4f4
  • tab.inactiveForeground#92b2ab
  • terminal.ansiBlack#141f1d
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#92b2ab
  • terminal.ansiBrightBlue#2c9fd9
  • terminal.ansiBrightCyan#45b5aa
  • terminal.ansiBrightGreen#88b04b
  • terminal.ansiBrightMagenta#b163a3
  • terminal.ansiBrightRed#dd4132
  • terminal.ansiBrightWhite#f7f7f7
  • terminal.ansiBrightYellow#efc050
  • terminal.ansiCyan#006e7f
  • terminal.ansiGreen#4e9a2f
  • terminal.ansiMagenta#8c3359
  • terminal.ansiRed#bf1932
  • terminal.ansiWhite#f9f9f9
  • terminal.ansiYellow#d4a017
  • terminal.background#f3f4f4
  • terminal.foreground#141f1d
  • terminalCursor.foreground#6ba699
  • textLink.activeForeground#631628
  • textLink.foreground#70192d
  • titleBar.activeBackground#f3f4f4
  • titleBar.activeForeground#141f1d
  • titleBar.border#d0d8d6
  • titleBar.inactiveBackground#f3f4f4
  • titleBar.inactiveForeground#92b2ab

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#92b2abitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#4b746bbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#4b746bbold
storage.type, storage.modifier#4b746bbold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#7c1c32
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#4b746b
string.regexp#7c1c32
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#5f4b8b
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#0f4c81bold
variable.other.constant, variable.other.enummember#0f4c81bold
constant.character.escape#55796f
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#007986italic
entity.name.type.parameter#007986italic
entity.name.function, meta.function entity.name.function#716962bold
meta.function-call entity.name.function, support.function#716962
meta.method-call entity.name.function, entity.name.function.member#716962
variable, variable.other, variable.other.readwrite#141f1d
variable.parameter#141f1ditalic
variable.language, variable.language.this, variable.language.self, variable.language.super#4b746bitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#141f1d
entity.name.class, entity.name.type.class, support.class#5a7431bold italic
entity.other.inherited-class#5a7431italic
entity.name.tag, punctuation.definition.tag#4b746bbold
entity.other.attribute-name#716962italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#55796f
punctuation, punctuation.separator, punctuation.terminator, meta.brace#92b2ab
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#007986italic
support.type.property-name.css, support.type.vendored.property-name.css#007986
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5a7431bold
support.constant.property-value.css, support.constant.color.css#0f4c81
keyword.other.unit.css#5f4b8b
support.type.property-name.json#007986
markup.heading, markup.heading entity.name, entity.name.section.markdown#4b746bbold
markup.bold#0f4c81bold
markup.italic#007986italic
markup.inline.raw, markup.raw#7c1c32
markup.underline.link#716962
markup.quote#92b2abitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050