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#eaeeed
  • activityBar.border#c4d4d2
  • activityBar.foreground#00837a
  • activityBar.inactiveForeground#5ca09b
  • activityBarBadge.background#701d25
  • activityBarBadge.foreground#f7f7f7
  • badge.background#00837a
  • badge.foreground#002422
  • breadcrumb.activeSelectionForeground#002422
  • breadcrumb.focusForeground#002422
  • breadcrumb.foreground#5ca09b
  • button.background#00837a
  • button.foreground#002422
  • button.hoverBackground#00766e
  • button.secondaryBackground#eaeeed
  • button.secondaryForeground#002422
  • descriptionForeground#5ca09b
  • dropdown.background#f8f9f9
  • dropdown.border#c4d4d2
  • dropdown.foreground#002422
  • editor.background#f8f9f9
  • editor.findMatchBackground#78be2059
  • editor.findMatchHighlightBackground#78be2026
  • editor.foreground#002422
  • editor.inactiveSelectionBackground#00837a1a
  • editor.lineHighlightBackground#00837a14
  • editor.lineHighlightBorder#00837a00
  • editor.selectionBackground#00837a33
  • editor.wordHighlightBackground#00837a26
  • editorBracketMatch.background#00837a33
  • editorBracketMatch.border#00837a80
  • editorCursor.foreground#00837a
  • editorError.foreground#bf1932
  • editorGroup.border#c4d4d2
  • editorGroupHeader.tabsBackground#f1f3f3
  • editorGroupHeader.tabsBorder#c4d4d2
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#0024222e
  • editorIndentGuide.background#00242214
  • editorInfo.foreground#701d25
  • editorLineNumber.activeForeground#002422
  • editorLineNumber.foreground#5ca09b
  • editorRuler.foreground#00242214
  • editorSuggestWidget.selectedBackground#00837a26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#0024221a
  • editorWidget.background#f8f9f9
  • editorWidget.border#c4d4d2
  • focusBorder#00837a80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#5ca09b
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#5ca09b
  • input.background#f8f9f9
  • input.border#c4d4d2
  • input.foreground#002422
  • input.placeholderForeground#5ca09b
  • inputOption.activeBorder#00837a
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#701d25
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#00837a33
  • list.activeSelectionForeground#002422
  • list.focusBackground#00837a26
  • list.highlightForeground#00837a
  • list.hoverBackground#00837a1a
  • list.inactiveSelectionBackground#00837a1a
  • minimap.background#f8f9f9
  • minimap.findMatchHighlight#78be2080
  • minimap.selectionHighlight#00837a4d
  • notificationLink.foreground#00837a
  • notifications.background#f8f9f9
  • notifications.foreground#002422
  • panel.background#f1f3f3
  • panel.border#c4d4d2
  • panelTitle.activeBorder#00837a
  • panelTitle.activeForeground#002422
  • panelTitle.inactiveForeground#5ca09b
  • peekView.border#00837a
  • peekViewEditor.background#f1f3f3
  • peekViewResult.background#eaeeed
  • peekViewTitle.background#f1f3f3
  • progressBar.background#00837a
  • scrollbar.shadow#00100f14
  • scrollbarSlider.activeBackground#0024224d
  • scrollbarSlider.background#0024221a
  • scrollbarSlider.hoverBackground#00242233
  • selection.background#00837a33
  • sideBar.background#f1f3f3
  • sideBar.border#c4d4d2
  • sideBar.foreground#002422
  • sideBarSectionHeader.background#00837a1a
  • sideBarSectionHeader.foreground#002422
  • sideBarTitle.foreground#002422
  • statusBar.background#00837a
  • statusBar.border#c4d4d2
  • statusBar.debuggingBackground#701d25
  • statusBar.debuggingForeground#f7f7f7
  • statusBar.foreground#002422
  • statusBar.noFolderBackground#eaeeed
  • statusBarItem.hoverBackground#f7f7f733
  • statusBarItem.remoteBackground#006f68
  • statusBarItem.remoteForeground#002422
  • tab.activeBackground#f8f9f9
  • tab.activeBorder#00837a
  • tab.activeBorderTop#00837a00
  • tab.activeForeground#002422
  • tab.border#c4d4d2
  • tab.inactiveBackground#f1f3f3
  • tab.inactiveForeground#5ca09b
  • terminal.ansiBlack#002422
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#5ca09b
  • 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#f8f9f9
  • terminal.ansiYellow#d4a017
  • terminal.background#f1f3f3
  • terminal.foreground#002422
  • terminalCursor.foreground#00837a
  • textLink.activeForeground#631a21
  • textLink.foreground#701d25
  • titleBar.activeBackground#f1f3f3
  • titleBar.activeForeground#002422
  • titleBar.border#c4d4d2
  • titleBar.inactiveBackground#f1f3f3
  • titleBar.inactiveForeground#5ca09b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#5ca09bitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#008078bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#008078bold
storage.type, storage.modifier#008078bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#7c2029
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#008078
string.regexp#7c2029
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#4f7d15
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#4173bebold
variable.other.constant, variable.other.enummember#4173bebold
constant.character.escape#1b8079
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#007894italic
entity.name.type.parameter#007894italic
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#002422
variable.parameter#002422italic
variable.language, variable.language.this, variable.language.self, variable.language.super#008078italic
variable.other.property, variable.other.object.property, meta.object-literal.key#002422
entity.name.class, entity.name.type.class, support.class#5f4b8bbold italic
entity.other.inherited-class#5f4b8bitalic
entity.name.tag, punctuation.definition.tag#008078bold
entity.other.attribute-name#786d74italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#1b8079
punctuation, punctuation.separator, punctuation.terminator, meta.brace#5ca09b
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#007894italic
support.type.property-name.css, support.type.vendored.property-name.css#007894
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5f4b8bbold
support.constant.property-value.css, support.constant.color.css#4173be
keyword.other.unit.css#4f7d15
support.type.property-name.json#007894
markup.heading, markup.heading entity.name, entity.name.section.markdown#008078bold
markup.bold#4173bebold
markup.italic#007894italic
markup.inline.raw, markup.raw#7c2029
markup.underline.link#786d74
markup.quote#5ca09bitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050