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#152126
  • activityBar.border#253b44
  • activityBar.foreground#7bc4e2
  • activityBar.inactiveForeground#6591a7
  • activityBarBadge.background#ff7b43
  • activityBarBadge.foreground#f2f4f6
  • badge.background#7bc4e2
  • badge.foreground#121d22
  • breadcrumb.activeSelectionForeground#d3dfe5
  • breadcrumb.focusForeground#d3dfe5
  • breadcrumb.foreground#6591a7
  • button.background#7bc4e2
  • button.foreground#121d22
  • button.hoverBackground#88cae5
  • button.secondaryBackground#1b2b32
  • button.secondaryForeground#d3dfe5
  • descriptionForeground#6591a7
  • dropdown.background#152126
  • dropdown.border#253b44
  • dropdown.foreground#d3dfe5
  • editor.background#0f181b
  • editor.findMatchBackground#4e9a2f66
  • editor.findMatchHighlightBackground#4e9a2f33
  • editor.foreground#d3dfe5
  • editor.inactiveSelectionBackground#7bc4e226
  • editor.lineHighlightBackground#7bc4e21a
  • editor.lineHighlightBorder#7bc4e200
  • editor.selectionBackground#7bc4e24d
  • editor.wordHighlightBackground#7bc4e233
  • editorBracketMatch.background#7bc4e240
  • editorBracketMatch.border#7bc4e299
  • editorCursor.foreground#7bc4e2
  • editorError.foreground#dd4132
  • editorGroup.border#253b44
  • editorGroupHeader.tabsBackground#152126
  • editorGroupHeader.tabsBorder#253b44
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#d3dfe533
  • editorIndentGuide.background#d3dfe514
  • editorInfo.foreground#ff7b43
  • editorLineNumber.activeForeground#d3dfe5
  • editorLineNumber.foreground#6591a7
  • editorRuler.foreground#d3dfe514
  • editorSuggestWidget.selectedBackground#7bc4e240
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#d3dfe51a
  • editorWidget.background#152126
  • editorWidget.border#253b44
  • focusBorder#7bc4e299
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#6591a7
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#6591a7
  • input.background#152126
  • input.border#253b44
  • input.foreground#d3dfe5
  • input.placeholderForeground#6591a7
  • inputOption.activeBorder#7bc4e2
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#ff7b43
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#7bc4e24d
  • list.activeSelectionForeground#d3dfe5
  • list.focusBackground#7bc4e233
  • list.highlightForeground#7bc4e2
  • list.hoverBackground#7bc4e226
  • list.inactiveSelectionBackground#7bc4e226
  • minimap.background#0f181b
  • minimap.findMatchHighlight#4e9a2f99
  • minimap.selectionHighlight#7bc4e266
  • notificationLink.foreground#7bc4e2
  • notifications.background#1b2b32
  • notifications.foreground#d3dfe5
  • panel.background#152126
  • panel.border#253b44
  • panelTitle.activeBorder#7bc4e2
  • panelTitle.activeForeground#d3dfe5
  • panelTitle.inactiveForeground#6591a7
  • peekView.border#7bc4e2
  • peekViewEditor.background#152126
  • peekViewResult.background#1b2b32
  • peekViewTitle.background#152126
  • progressBar.background#7bc4e2
  • scrollbar.shadow#0c141745
  • scrollbarSlider.activeBackground#d3dfe559
  • scrollbarSlider.background#d3dfe51f
  • scrollbarSlider.hoverBackground#d3dfe540
  • selection.background#7bc4e24d
  • sideBar.background#1b2b32
  • sideBar.border#253b44
  • sideBar.foreground#d3dfe5
  • sideBarSectionHeader.background#7bc4e226
  • sideBarSectionHeader.foreground#d3dfe5
  • sideBarTitle.foreground#d3dfe5
  • statusBar.background#4a7688
  • statusBar.border#253b44
  • statusBar.debuggingBackground#ff7b43
  • statusBar.debuggingForeground#f2f4f6
  • statusBar.foreground#b0dcee
  • statusBar.noFolderBackground#152126
  • statusBarItem.hoverBackground#7bc4e24d
  • statusBarItem.remoteBackground#7bc4e2
  • statusBarItem.remoteForeground#121d22
  • tab.activeBackground#0f181b
  • tab.activeBorder#7bc4e2
  • tab.activeBorderTop#7bc4e200
  • tab.activeForeground#d3dfe5
  • tab.border#253b44
  • tab.inactiveBackground#152126
  • tab.inactiveForeground#6591a7
  • terminal.ansiBlack#0f181b
  • terminal.ansiBlue#4588b2
  • terminal.ansiBrightBlack#6591a7
  • 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#d3dfe5
  • terminal.ansiYellow#efc050
  • terminal.background#152126
  • terminal.foreground#d3dfe5
  • terminalCursor.foreground#7bc4e2
  • textLink.activeForeground#ff8f5f
  • textLink.foreground#ff7b43
  • titleBar.activeBackground#152126
  • titleBar.activeForeground#d3dfe5
  • titleBar.border#253b44
  • titleBar.inactiveBackground#152126
  • titleBar.inactiveForeground#6591a7

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#6591a7italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#7bc4e2bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#7bc4e2bold
storage.type, storage.modifier#7bc4e2bold
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#7bc4e2
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#8fcde6
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#6586b3italic
entity.name.type.parameter#6586b3italic
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#d3dfe5
variable.parameter#d3dfe5italic
variable.language, variable.language.this, variable.language.self, variable.language.super#7bc4e2italic
variable.other.property, variable.other.object.property, meta.object-literal.key#d3dfe5
entity.name.class, entity.name.type.class, support.class#a474bfbold italic
entity.other.inherited-class#a474bfitalic
entity.name.tag, punctuation.definition.tag#7bc4e2bold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#8fcde6
punctuation, punctuation.separator, punctuation.terminator, meta.brace#6591a7
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#6586b3italic
support.type.property-name.css, support.type.vendored.property-name.css#6586b3
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#6586b3
markup.heading, markup.heading entity.name, entity.name.section.markdown#7bc4e2bold
markup.bold#7d7eb8bold
markup.italic#6586b3italic
markup.inline.raw, markup.raw#ff7b43
markup.underline.link#e8d4e2
markup.quote#6591a7italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050