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#172320
  • activityBar.border#283e39
  • activityBar.foreground#86d0bf
  • activityBar.inactiveForeground#94ada7
  • activityBarBadge.background#7c1c32
  • activityBarBadge.foreground#f7f7f7
  • badge.background#86d0bf
  • badge.foreground#141f1d
  • breadcrumb.activeSelectionForeground#e1e7e6
  • breadcrumb.focusForeground#e1e7e6
  • breadcrumb.foreground#94ada7
  • button.background#86d0bf
  • button.foreground#141f1d
  • button.hoverBackground#92d5c5
  • button.secondaryBackground#1d2e2a
  • button.secondaryForeground#e1e7e6
  • descriptionForeground#94ada7
  • dropdown.background#172320
  • dropdown.border#283e39
  • dropdown.foreground#e1e7e6
  • editor.background#101917
  • editor.findMatchBackground#5f4b8b66
  • editor.findMatchHighlightBackground#5f4b8b33
  • editor.foreground#e1e7e6
  • editor.inactiveSelectionBackground#86d0bf26
  • editor.lineHighlightBackground#86d0bf1a
  • editor.lineHighlightBorder#86d0bf00
  • editor.selectionBackground#86d0bf4d
  • editor.wordHighlightBackground#86d0bf33
  • editorBracketMatch.background#86d0bf40
  • editorBracketMatch.border#86d0bf99
  • editorCursor.foreground#86d0bf
  • editorError.foreground#dd4132
  • editorGroup.border#283e39
  • editorGroupHeader.tabsBackground#172320
  • editorGroupHeader.tabsBorder#283e39
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#e1e7e633
  • editorIndentGuide.background#e1e7e614
  • editorInfo.foreground#7c1c32
  • editorLineNumber.activeForeground#e1e7e6
  • editorLineNumber.foreground#94ada7
  • editorRuler.foreground#e1e7e614
  • editorSuggestWidget.selectedBackground#86d0bf40
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#e1e7e61a
  • editorWidget.background#172320
  • editorWidget.border#283e39
  • focusBorder#86d0bf99
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#94ada7
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#94ada7
  • input.background#172320
  • input.border#283e39
  • input.foreground#e1e7e6
  • input.placeholderForeground#94ada7
  • inputOption.activeBorder#86d0bf
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#7c1c32
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#86d0bf4d
  • list.activeSelectionForeground#e1e7e6
  • list.focusBackground#86d0bf33
  • list.highlightForeground#86d0bf
  • list.hoverBackground#86d0bf26
  • list.inactiveSelectionBackground#86d0bf26
  • minimap.background#101917
  • minimap.findMatchHighlight#5f4b8b99
  • minimap.selectionHighlight#86d0bf66
  • notificationLink.foreground#86d0bf
  • notifications.background#1d2e2a
  • notifications.foreground#e1e7e6
  • panel.background#172320
  • panel.border#283e39
  • panelTitle.activeBorder#86d0bf
  • panelTitle.activeForeground#e1e7e6
  • panelTitle.inactiveForeground#94ada7
  • peekView.border#86d0bf
  • peekViewEditor.background#172320
  • peekViewResult.background#1d2e2a
  • peekViewTitle.background#172320
  • progressBar.background#86d0bf
  • scrollbar.shadow#0d151345
  • scrollbarSlider.activeBackground#e1e7e659
  • scrollbarSlider.background#e1e7e61f
  • scrollbarSlider.hoverBackground#e1e7e640
  • selection.background#86d0bf4d
  • sideBar.background#1d2e2a
  • sideBar.border#283e39
  • sideBar.foreground#e1e7e6
  • sideBarSectionHeader.background#86d0bf26
  • sideBarSectionHeader.foreground#e1e7e6
  • sideBarTitle.foreground#e1e7e6
  • statusBar.background#507d73
  • statusBar.border#283e39
  • statusBar.debuggingBackground#7c1c32
  • statusBar.debuggingForeground#f7f7f7
  • statusBar.foreground#b6e3d9
  • statusBar.noFolderBackground#172320
  • statusBarItem.hoverBackground#86d0bf4d
  • statusBarItem.remoteBackground#86d0bf
  • statusBarItem.remoteForeground#141f1d
  • tab.activeBackground#101917
  • tab.activeBorder#86d0bf
  • tab.activeBorderTop#86d0bf00
  • tab.activeForeground#e1e7e6
  • tab.border#283e39
  • tab.inactiveBackground#172320
  • tab.inactiveForeground#94ada7
  • terminal.ansiBlack#101917
  • terminal.ansiBlue#4b8ea0
  • terminal.ansiBrightBlack#94ada7
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#f7f7f7
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#e1e7e6
  • terminal.ansiYellow#efc050
  • terminal.background#172320
  • terminal.foreground#e1e7e6
  • terminalCursor.foreground#86d0bf
  • textLink.activeForeground#903e51
  • textLink.foreground#7c1c32
  • titleBar.activeBackground#172320
  • titleBar.activeForeground#e1e7e6
  • titleBar.border#283e39
  • titleBar.inactiveBackground#172320
  • titleBar.inactiveForeground#94ada7

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#94ada7italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#86d0bfbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#86d0bfbold
storage.type, storage.modifier#86d0bfbold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#b07583
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#86d0bf
string.regexp#b07583
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#8d7dac
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#6188acbold
variable.other.constant, variable.other.enummember#6188acbold
constant.character.escape#98d7c9
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#00b5ccitalic
entity.name.type.parameter#00b5ccitalic
entity.name.function, meta.function entity.name.function#decdbebold
meta.function-call entity.name.function, support.function#decdbe
meta.method-call entity.name.function, entity.name.function.member#decdbe
variable, variable.other, variable.other.readwrite#e1e7e6
variable.parameter#e1e7e6italic
variable.language, variable.language.this, variable.language.self, variable.language.super#86d0bfitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#e1e7e6
entity.name.class, entity.name.type.class, support.class#88b04bbold italic
entity.other.inherited-class#88b04bitalic
entity.name.tag, punctuation.definition.tag#86d0bfbold
entity.other.attribute-name#decdbeitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#98d7c9
punctuation, punctuation.separator, punctuation.terminator, meta.brace#94ada7
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#00b5ccitalic
support.type.property-name.css, support.type.vendored.property-name.css#00b5cc
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#88b04bbold
support.constant.property-value.css, support.constant.color.css#6188ac
keyword.other.unit.css#8d7dac
support.type.property-name.json#00b5cc
markup.heading, markup.heading entity.name, entity.name.section.markdown#86d0bfbold
markup.bold#6188acbold
markup.italic#00b5ccitalic
markup.inline.raw, markup.raw#b07583
markup.underline.link#decdbe
markup.quote#94ada7italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050