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#1a2428
  • activityBar.border#2e4046
  • activityBar.foreground#99d6ea
  • activityBar.inactiveForeground#6e96a9
  • activityBarBadge.background#ff7b43
  • activityBarBadge.foreground#f2f4f6
  • badge.background#99d6ea
  • badge.foreground#172023
  • breadcrumb.activeSelectionForeground#d6e0e6
  • breadcrumb.focusForeground#d6e0e6
  • breadcrumb.foreground#6e96a9
  • button.background#99d6ea
  • button.foreground#172023
  • button.hoverBackground#a3daec
  • button.secondaryBackground#222f33
  • button.secondaryForeground#d6e0e6
  • descriptionForeground#6e96a9
  • dropdown.background#1a2428
  • dropdown.border#2e4046
  • dropdown.foreground#d6e0e6
  • editor.background#121a1c
  • editor.findMatchBackground#4e9a2f66
  • editor.findMatchHighlightBackground#4e9a2f33
  • editor.foreground#d6e0e6
  • editor.inactiveSelectionBackground#99d6ea26
  • editor.lineHighlightBackground#99d6ea1a
  • editor.lineHighlightBorder#99d6ea00
  • editor.selectionBackground#99d6ea4d
  • editor.wordHighlightBackground#99d6ea33
  • editorBracketMatch.background#99d6ea40
  • editorBracketMatch.border#99d6ea99
  • editorCursor.foreground#99d6ea
  • editorError.foreground#dd4132
  • editorGroup.border#2e4046
  • editorGroupHeader.tabsBackground#1a2428
  • editorGroupHeader.tabsBorder#2e4046
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#d6e0e633
  • editorIndentGuide.background#d6e0e614
  • editorInfo.foreground#ff7b43
  • editorLineNumber.activeForeground#d6e0e6
  • editorLineNumber.foreground#6e96a9
  • editorRuler.foreground#d6e0e614
  • editorSuggestWidget.selectedBackground#99d6ea40
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#d6e0e61a
  • editorWidget.background#1a2428
  • editorWidget.border#2e4046
  • focusBorder#99d6ea99
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#6e96a9
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#6e96a9
  • input.background#1a2428
  • input.border#2e4046
  • input.foreground#d6e0e6
  • input.placeholderForeground#6e96a9
  • inputOption.activeBorder#99d6ea
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#ff7b43
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#99d6ea4d
  • list.activeSelectionForeground#d6e0e6
  • list.focusBackground#99d6ea33
  • list.highlightForeground#99d6ea
  • list.hoverBackground#99d6ea26
  • list.inactiveSelectionBackground#99d6ea26
  • minimap.background#121a1c
  • minimap.findMatchHighlight#4e9a2f99
  • minimap.selectionHighlight#99d6ea66
  • notificationLink.foreground#99d6ea
  • notifications.background#222f33
  • notifications.foreground#d6e0e6
  • panel.background#1a2428
  • panel.border#2e4046
  • panelTitle.activeBorder#99d6ea
  • panelTitle.activeForeground#d6e0e6
  • panelTitle.inactiveForeground#6e96a9
  • peekView.border#99d6ea
  • peekViewEditor.background#1a2428
  • peekViewResult.background#222f33
  • peekViewTitle.background#1a2428
  • progressBar.background#99d6ea
  • scrollbar.shadow#0f151745
  • scrollbarSlider.activeBackground#d6e0e659
  • scrollbarSlider.background#d6e0e61f
  • scrollbarSlider.hoverBackground#d6e0e640
  • selection.background#99d6ea4d
  • sideBar.background#222f33
  • sideBar.border#2e4046
  • sideBar.foreground#d6e0e6
  • sideBarSectionHeader.background#99d6ea26
  • sideBarSectionHeader.foreground#d6e0e6
  • sideBarTitle.foreground#d6e0e6
  • statusBar.background#5c808c
  • statusBar.border#2e4046
  • statusBar.debuggingBackground#ff7b43
  • statusBar.debuggingForeground#f2f4f6
  • statusBar.foreground#c2e6f2
  • statusBar.noFolderBackground#1a2428
  • statusBarItem.hoverBackground#99d6ea4d
  • statusBarItem.remoteBackground#99d6ea
  • statusBarItem.remoteForeground#172023
  • tab.activeBackground#121a1c
  • tab.activeBorder#99d6ea
  • tab.activeBorderTop#99d6ea00
  • tab.activeForeground#d6e0e6
  • tab.border#2e4046
  • tab.inactiveBackground#1a2428
  • tab.inactiveForeground#6e96a9
  • terminal.ansiBlack#121a1c
  • terminal.ansiBlue#5491b6
  • terminal.ansiBrightBlack#6e96a9
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#f2f4f6
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#d6e0e6
  • terminal.ansiYellow#efc050
  • terminal.background#1a2428
  • terminal.foreground#d6e0e6
  • terminalCursor.foreground#99d6ea
  • textLink.activeForeground#ff8f5f
  • textLink.foreground#ff7b43
  • titleBar.activeBackground#1a2428
  • titleBar.activeForeground#d6e0e6
  • titleBar.border#2e4046
  • titleBar.inactiveBackground#1a2428
  • titleBar.inactiveForeground#6e96a9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#6e96a9italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#99d6eabold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#99d6eabold
storage.type, storage.modifier#99d6eabold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#ff7b43
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#99d6ea
string.regexp#ff7b43
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#4e9a2f
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#7d7eb8bold
variable.other.constant, variable.other.enummember#7d7eb8bold
constant.character.escape#a8dced
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#9bb7d4italic
entity.name.type.parameter#9bb7d4italic
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#d6e0e6
variable.parameter#d6e0e6italic
variable.language, variable.language.this, variable.language.self, variable.language.super#99d6eaitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#d6e0e6
entity.name.class, entity.name.type.class, support.class#a474bfbold italic
entity.other.inherited-class#a474bfitalic
entity.name.tag, punctuation.definition.tag#99d6eabold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#a8dced
punctuation, punctuation.separator, punctuation.terminator, meta.brace#6e96a9
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#9bb7d4italic
support.type.property-name.css, support.type.vendored.property-name.css#9bb7d4
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#a474bfbold
support.constant.property-value.css, support.constant.color.css#7d7eb8
keyword.other.unit.css#4e9a2f
support.type.property-name.json#9bb7d4
markup.heading, markup.heading entity.name, entity.name.section.markdown#99d6eabold
markup.bold#7d7eb8bold
markup.italic#9bb7d4italic
markup.inline.raw, markup.raw#ff7b43
markup.underline.link#e8d4e2
markup.quote#6e96a9italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050