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#0e2624
  • activityBar.border#173e3a
  • activityBar.foreground#45b5aa
  • activityBar.inactiveForeground#81a5a1
  • activityBarBadge.background#7c2029
  • activityBarBadge.foreground#f7f7f7
  • badge.background#45b5aa
  • badge.foreground#0a1b1a
  • breadcrumb.activeSelectionForeground#dde6e4
  • breadcrumb.focusForeground#dde6e4
  • breadcrumb.foreground#81a5a1
  • button.background#45b5aa
  • button.foreground#0a1b1a
  • button.hoverBackground#58bcb3
  • button.secondaryBackground#122f2c
  • button.secondaryForeground#dde6e4
  • descriptionForeground#81a5a1
  • dropdown.background#0e2624
  • dropdown.border#173e3a
  • dropdown.foreground#dde6e4
  • editor.background#0b1d1b
  • editor.findMatchBackground#78be2066
  • editor.findMatchHighlightBackground#78be2033
  • editor.foreground#dde6e4
  • editor.inactiveSelectionBackground#45b5aa26
  • editor.lineHighlightBackground#45b5aa1a
  • editor.lineHighlightBorder#45b5aa00
  • editor.selectionBackground#45b5aa4d
  • editor.wordHighlightBackground#45b5aa33
  • editorBracketMatch.background#45b5aa40
  • editorBracketMatch.border#45b5aa99
  • editorCursor.foreground#45b5aa
  • editorError.foreground#dd4132
  • editorGroup.border#173e3a
  • editorGroupHeader.tabsBackground#0e2624
  • editorGroupHeader.tabsBorder#173e3a
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#dde6e433
  • editorIndentGuide.background#dde6e414
  • editorInfo.foreground#7c2029
  • editorLineNumber.activeForeground#dde6e4
  • editorLineNumber.foreground#81a5a1
  • editorRuler.foreground#dde6e414
  • editorSuggestWidget.selectedBackground#45b5aa40
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#dde6e41a
  • editorWidget.background#0e2624
  • editorWidget.border#173e3a
  • focusBorder#45b5aa99
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#81a5a1
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#81a5a1
  • input.background#0e2624
  • input.border#173e3a
  • input.foreground#dde6e4
  • input.placeholderForeground#81a5a1
  • inputOption.activeBorder#45b5aa
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#7c2029
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#45b5aa4d
  • list.activeSelectionForeground#dde6e4
  • list.focusBackground#45b5aa33
  • list.highlightForeground#45b5aa
  • list.hoverBackground#45b5aa26
  • list.inactiveSelectionBackground#45b5aa26
  • minimap.background#0b1d1b
  • minimap.findMatchHighlight#78be2099
  • minimap.selectionHighlight#45b5aa66
  • notificationLink.foreground#45b5aa
  • notifications.background#122f2c
  • notifications.foreground#dde6e4
  • panel.background#0e2624
  • panel.border#173e3a
  • panelTitle.activeBorder#45b5aa
  • panelTitle.activeForeground#dde6e4
  • panelTitle.inactiveForeground#81a5a1
  • peekView.border#45b5aa
  • peekViewEditor.background#0e2624
  • peekViewResult.background#122f2c
  • peekViewTitle.background#0e2624
  • progressBar.background#45b5aa
  • scrollbar.shadow#07121145
  • scrollbarSlider.activeBackground#dde6e459
  • scrollbarSlider.background#dde6e41f
  • scrollbarSlider.hoverBackground#dde6e440
  • selection.background#45b5aa4d
  • sideBar.background#122f2c
  • sideBar.border#173e3a
  • sideBar.foreground#dde6e4
  • sideBarSectionHeader.background#45b5aa26
  • sideBarSectionHeader.foreground#dde6e4
  • sideBarTitle.foreground#dde6e4
  • statusBar.background#296d66
  • statusBar.border#173e3a
  • statusBar.debuggingBackground#7c2029
  • statusBar.debuggingForeground#f7f7f7
  • statusBar.foreground#8fd3cc
  • statusBar.noFolderBackground#0e2624
  • statusBarItem.hoverBackground#45b5aa4d
  • statusBarItem.remoteBackground#45b5aa
  • statusBarItem.remoteForeground#0a1b1a
  • tab.activeBackground#0b1d1b
  • tab.activeBorder#45b5aa
  • tab.activeBorderTop#45b5aa00
  • tab.activeForeground#dde6e4
  • tab.border#173e3a
  • tab.inactiveBackground#0e2624
  • tab.inactiveForeground#81a5a1
  • terminal.ansiBlack#0b1d1b
  • terminal.ansiBlue#2a8196
  • terminal.ansiBrightBlack#81a5a1
  • 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#dde6e4
  • terminal.ansiYellow#efc050
  • terminal.background#0e2624
  • terminal.foreground#dde6e4
  • terminalCursor.foreground#45b5aa
  • textLink.activeForeground#904149
  • textLink.foreground#7c2029
  • titleBar.activeBackground#0e2624
  • titleBar.activeForeground#dde6e4
  • titleBar.border#173e3a
  • titleBar.inactiveBackground#0e2624
  • titleBar.inactiveForeground#81a5a1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#81a5a1italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#45b5aabold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#45b5aabold
storage.type, storage.modifier#45b5aabold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#b0787c
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#45b5aa
string.regexp#b0787c
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#78be20
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#6586b3bold
variable.other.constant, variable.other.enummember#6586b3bold
constant.character.escape#61c0b7
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#dde6e4
variable.parameter#dde6e4italic
variable.language, variable.language.this, variable.language.self, variable.language.super#45b5aaitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#dde6e4
entity.name.class, entity.name.type.class, support.class#8d7dacbold italic
entity.other.inherited-class#8d7dacitalic
entity.name.tag, punctuation.definition.tag#45b5aabold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#61c0b7
punctuation, punctuation.separator, punctuation.terminator, meta.brace#81a5a1
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#6586b3
keyword.other.unit.css#78be20
support.type.property-name.json#00b4e1
markup.heading, markup.heading entity.name, entity.name.section.markdown#45b5aabold
markup.bold#6586b3bold
markup.italic#00b4e1italic
markup.inline.raw, markup.raw#b0787c
markup.underline.link#e8d4e2
markup.quote#81a5a1italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050