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#0a1716
  • activityBar.border#102624
  • activityBar.foreground#2e6f6b
  • activityBar.inactiveForeground#7a908e
  • activityBarBadge.background#4c2a2b
  • activityBarBadge.foreground#f7f7f7
  • badge.background#2e6f6b
  • badge.foreground#f7f7f7
  • breadcrumb.activeSelectionForeground#dbe0e0
  • breadcrumb.focusForeground#dbe0e0
  • breadcrumb.foreground#7a908e
  • button.background#2e6f6b
  • button.foreground#f7f7f7
  • button.hoverBackground#437d7a
  • button.secondaryBackground#0c1d1c
  • button.secondaryForeground#dbe0e0
  • descriptionForeground#7a908e
  • dropdown.background#0a1716
  • dropdown.border#102624
  • dropdown.foreground#dbe0e0
  • editor.background#071211
  • editor.findMatchBackground#78be2066
  • editor.findMatchHighlightBackground#78be2033
  • editor.foreground#dbe0e0
  • editor.inactiveSelectionBackground#2e6f6b26
  • editor.lineHighlightBackground#2e6f6b1a
  • editor.lineHighlightBorder#2e6f6b00
  • editor.selectionBackground#2e6f6b4d
  • editor.wordHighlightBackground#2e6f6b33
  • editorBracketMatch.background#2e6f6b40
  • editorBracketMatch.border#2e6f6b99
  • editorCursor.foreground#2e6f6b
  • editorError.foreground#dd4132
  • editorGroup.border#102624
  • editorGroupHeader.tabsBackground#0a1716
  • editorGroupHeader.tabsBorder#102624
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#dbe0e033
  • editorIndentGuide.background#dbe0e014
  • editorInfo.foreground#4c2a2b
  • editorLineNumber.activeForeground#dbe0e0
  • editorLineNumber.foreground#7a908e
  • editorRuler.foreground#dbe0e014
  • editorSuggestWidget.selectedBackground#2e6f6b40
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#dbe0e01a
  • editorWidget.background#0a1716
  • editorWidget.border#102624
  • focusBorder#2e6f6b99
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#7a908e
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#7a908e
  • input.background#0a1716
  • input.border#102624
  • input.foreground#dbe0e0
  • input.placeholderForeground#7a908e
  • inputOption.activeBorder#2e6f6b
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#4c2a2b
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#2e6f6b4d
  • list.activeSelectionForeground#dbe0e0
  • list.focusBackground#2e6f6b33
  • list.highlightForeground#2e6f6b
  • list.hoverBackground#2e6f6b26
  • list.inactiveSelectionBackground#2e6f6b26
  • minimap.background#071211
  • minimap.findMatchHighlight#78be2099
  • minimap.selectionHighlight#2e6f6b66
  • notificationLink.foreground#2e6f6b
  • notifications.background#0c1d1c
  • notifications.foreground#dbe0e0
  • panel.background#0a1716
  • panel.border#102624
  • panelTitle.activeBorder#2e6f6b
  • panelTitle.activeForeground#dbe0e0
  • panelTitle.inactiveForeground#7a908e
  • peekView.border#2e6f6b
  • peekViewEditor.background#0a1716
  • peekViewResult.background#0c1d1c
  • peekViewTitle.background#0a1716
  • progressBar.background#2e6f6b
  • scrollbar.shadow#050b0b45
  • scrollbarSlider.activeBackground#dbe0e059
  • scrollbarSlider.background#dbe0e01f
  • scrollbarSlider.hoverBackground#dbe0e040
  • selection.background#2e6f6b4d
  • sideBar.background#0c1d1c
  • sideBar.border#102624
  • sideBar.foreground#dbe0e0
  • sideBarSectionHeader.background#2e6f6b26
  • sideBarSectionHeader.foreground#dbe0e0
  • sideBarTitle.foreground#dbe0e0
  • statusBar.background#1c4340
  • statusBar.border#102624
  • statusBar.debuggingBackground#4c2a2b
  • statusBar.debuggingForeground#f7f7f7
  • statusBar.foreground#82a9a6
  • statusBar.noFolderBackground#0a1716
  • statusBarItem.hoverBackground#2e6f6b4d
  • statusBarItem.remoteBackground#2e6f6b
  • statusBarItem.remoteForeground#f7f7f7
  • tab.activeBackground#071211
  • tab.activeBorder#2e6f6b
  • tab.activeBorderTop#2e6f6b00
  • tab.activeForeground#dbe0e0
  • tab.border#102624
  • tab.inactiveBackground#0a1716
  • tab.inactiveForeground#7a908e
  • terminal.ansiBlack#071211
  • terminal.ansiBlue#1f5e76
  • terminal.ansiBrightBlack#7a908e
  • 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#dbe0e0
  • terminal.ansiYellow#efc050
  • terminal.background#0a1716
  • terminal.foreground#dbe0e0
  • terminalCursor.foreground#2e6f6b
  • textLink.activeForeground#674a4b
  • textLink.foreground#4c2a2b
  • titleBar.activeBackground#0a1716
  • titleBar.activeForeground#dbe0e0
  • titleBar.border#102624
  • titleBar.inactiveBackground#0a1716
  • titleBar.inactiveForeground#7a908e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#7a908eitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#4e8682bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#4e8682bold
storage.type, storage.modifier#4e8682bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#927d7e
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#4e8682
string.regexp#927d7e
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#78be20
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#577fc4bold
variable.other.constant, variable.other.enummember#577fc4bold
constant.character.escape#4d8581
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#00b4e1italic
entity.name.type.parameter#00b4e1italic
entity.name.function, meta.function entity.name.function#e8d4e2bold
meta.function-call entity.name.function, support.function#e8d4e2
meta.method-call entity.name.function, entity.name.function.member#e8d4e2
variable, variable.other, variable.other.readwrite#dbe0e0
variable.parameter#dbe0e0italic
variable.language, variable.language.this, variable.language.self, variable.language.super#4e8682italic
variable.other.property, variable.other.object.property, meta.object-literal.key#dbe0e0
entity.name.class, entity.name.type.class, support.class#8d7dacbold italic
entity.other.inherited-class#8d7dacitalic
entity.name.tag, punctuation.definition.tag#4e8682bold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#4d8581
punctuation, punctuation.separator, punctuation.terminator, meta.brace#7a908e
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#00b4e1italic
support.type.property-name.css, support.type.vendored.property-name.css#00b4e1
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#8d7dacbold
support.constant.property-value.css, support.constant.color.css#577fc4
keyword.other.unit.css#78be20
support.type.property-name.json#00b4e1
markup.heading, markup.heading entity.name, entity.name.section.markdown#4e8682bold
markup.bold#577fc4bold
markup.italic#00b4e1italic
markup.inline.raw, markup.raw#927d7e
markup.underline.link#e8d4e2
markup.quote#7a908eitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050