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#eaeded
  • activityBar.border#c4d2cf
  • activityBar.foreground#009473
  • activityBar.inactiveForeground#5c9a8c
  • activityBarBadge.background#70192d
  • activityBarBadge.foreground#f7f7f7
  • badge.background#009473
  • badge.foreground#002119
  • breadcrumb.activeSelectionForeground#002119
  • breadcrumb.focusForeground#002119
  • breadcrumb.foreground#5c9a8c
  • button.background#009473
  • button.foreground#002119
  • button.hoverBackground#008568
  • button.secondaryBackground#eaeded
  • button.secondaryForeground#002119
  • descriptionForeground#5c9a8c
  • dropdown.background#f8f9f9
  • dropdown.border#c4d2cf
  • dropdown.foreground#002119
  • editor.background#f8f9f9
  • editor.findMatchBackground#5f4b8b59
  • editor.findMatchHighlightBackground#5f4b8b26
  • editor.foreground#002119
  • editor.inactiveSelectionBackground#0094731a
  • editor.lineHighlightBackground#00947314
  • editor.lineHighlightBorder#00947300
  • editor.selectionBackground#00947333
  • editor.wordHighlightBackground#00947326
  • editorBracketMatch.background#00947333
  • editorBracketMatch.border#00947380
  • editorCursor.foreground#009473
  • editorError.foreground#bf1932
  • editorGroup.border#c4d2cf
  • editorGroupHeader.tabsBackground#f1f3f3
  • editorGroupHeader.tabsBorder#c4d2cf
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#0021192e
  • editorIndentGuide.background#00211914
  • editorInfo.foreground#70192d
  • editorLineNumber.activeForeground#002119
  • editorLineNumber.foreground#5c9a8c
  • editorRuler.foreground#00211914
  • editorSuggestWidget.selectedBackground#00947326
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#0021191a
  • editorWidget.background#f8f9f9
  • editorWidget.border#c4d2cf
  • focusBorder#00947380
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#5c9a8c
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#5c9a8c
  • input.background#f8f9f9
  • input.border#c4d2cf
  • input.foreground#002119
  • input.placeholderForeground#5c9a8c
  • inputOption.activeBorder#009473
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#70192d
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#00947333
  • list.activeSelectionForeground#002119
  • list.focusBackground#00947326
  • list.highlightForeground#009473
  • list.hoverBackground#0094731a
  • list.inactiveSelectionBackground#0094731a
  • minimap.background#f8f9f9
  • minimap.findMatchHighlight#5f4b8b80
  • minimap.selectionHighlight#0094734d
  • notificationLink.foreground#009473
  • notifications.background#f8f9f9
  • notifications.foreground#002119
  • panel.background#f1f3f3
  • panel.border#c4d2cf
  • panelTitle.activeBorder#009473
  • panelTitle.activeForeground#002119
  • panelTitle.inactiveForeground#5c9a8c
  • peekView.border#009473
  • peekViewEditor.background#f1f3f3
  • peekViewResult.background#eaeded
  • peekViewTitle.background#f1f3f3
  • progressBar.background#009473
  • scrollbar.shadow#000f0b14
  • scrollbarSlider.activeBackground#0021194d
  • scrollbarSlider.background#0021191a
  • scrollbarSlider.hoverBackground#00211933
  • selection.background#00947333
  • sideBar.background#f1f3f3
  • sideBar.border#c4d2cf
  • sideBar.foreground#002119
  • sideBarSectionHeader.background#0094731a
  • sideBarSectionHeader.foreground#002119
  • sideBarTitle.foreground#002119
  • statusBar.background#009473
  • statusBar.border#c4d2cf
  • statusBar.debuggingBackground#70192d
  • statusBar.debuggingForeground#f7f7f7
  • statusBar.foreground#002119
  • statusBar.noFolderBackground#eaeded
  • statusBarItem.hoverBackground#f7f7f733
  • statusBarItem.remoteBackground#007e62
  • statusBarItem.remoteForeground#002119
  • tab.activeBackground#f8f9f9
  • tab.activeBorder#009473
  • tab.activeBorderTop#00947300
  • tab.activeForeground#002119
  • tab.border#c4d2cf
  • tab.inactiveBackground#f1f3f3
  • tab.inactiveForeground#5c9a8c
  • terminal.ansiBlack#002119
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#5c9a8c
  • 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#002119
  • terminalCursor.foreground#009473
  • textLink.activeForeground#631628
  • textLink.foreground#70192d
  • titleBar.activeBackground#f1f3f3
  • titleBar.activeForeground#002119
  • titleBar.border#c4d2cf
  • titleBar.inactiveBackground#f1f3f3
  • titleBar.inactiveForeground#5c9a8c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#5c9a8citalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#007d62bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#007d62bold
storage.type, storage.modifier#007d62bold
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#007d62
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#1d806a
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#002119
variable.parameter#002119italic
variable.language, variable.language.this, variable.language.self, variable.language.super#007d62italic
variable.other.property, variable.other.object.property, meta.object-literal.key#002119
entity.name.class, entity.name.type.class, support.class#4f7d15bold italic
entity.other.inherited-class#4f7d15italic
entity.name.tag, punctuation.definition.tag#007d62bold
entity.other.attribute-name#716962italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#1d806a
punctuation, punctuation.separator, punctuation.terminator, meta.brace#5c9a8c
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#4f7d15bold
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#007d62bold
markup.bold#0f4c81bold
markup.italic#007986italic
markup.inline.raw, markup.raw#7c1c32
markup.underline.link#716962
markup.quote#5c9a8citalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050