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#191d24
  • activityBar.border#2c323f
  • activityBar.foreground#92a8d1
  • activityBar.inactiveForeground#626d7c
  • activityBarBadge.background#c5ac7d
  • activityBarBadge.foreground#f1f1f2
  • badge.background#92a8d1
  • badge.foreground#16191f
  • breadcrumb.activeSelectionForeground#d2d5d9
  • breadcrumb.focusForeground#d2d5d9
  • breadcrumb.foreground#626d7c
  • button.background#92a8d1
  • button.foreground#16191f
  • button.hoverBackground#9db1d6
  • button.secondaryBackground#20252e
  • button.secondaryForeground#d2d5d9
  • descriptionForeground#626d7c
  • dropdown.background#191d24
  • dropdown.border#2c323f
  • dropdown.foreground#d2d5d9
  • editor.background#121419
  • editor.findMatchBackground#76ff7b66
  • editor.findMatchHighlightBackground#76ff7b33
  • editor.foreground#d2d5d9
  • editor.inactiveSelectionBackground#92a8d126
  • editor.lineHighlightBackground#92a8d11a
  • editor.lineHighlightBorder#92a8d100
  • editor.selectionBackground#92a8d14d
  • editor.wordHighlightBackground#92a8d133
  • editorBracketMatch.background#92a8d140
  • editorBracketMatch.border#92a8d199
  • editorCursor.foreground#92a8d1
  • editorError.foreground#dd4132
  • editorGroup.border#2c323f
  • editorGroupHeader.tabsBackground#191d24
  • editorGroupHeader.tabsBorder#2c323f
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#d2d5d933
  • editorIndentGuide.background#d2d5d914
  • editorInfo.foreground#c5ac7d
  • editorLineNumber.activeForeground#d2d5d9
  • editorLineNumber.foreground#626d7c
  • editorRuler.foreground#d2d5d914
  • editorSuggestWidget.selectedBackground#92a8d140
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#d2d5d91a
  • editorWidget.background#191d24
  • editorWidget.border#2c323f
  • focusBorder#92a8d199
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#626d7c
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#626d7c
  • input.background#191d24
  • input.border#2c323f
  • input.foreground#d2d5d9
  • input.placeholderForeground#626d7c
  • inputOption.activeBorder#92a8d1
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#c5ac7d
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#92a8d14d
  • list.activeSelectionForeground#d2d5d9
  • list.focusBackground#92a8d133
  • list.highlightForeground#92a8d1
  • list.hoverBackground#92a8d126
  • list.inactiveSelectionBackground#92a8d126
  • minimap.background#121419
  • minimap.findMatchHighlight#76ff7b99
  • minimap.selectionHighlight#92a8d166
  • notificationLink.foreground#92a8d1
  • notifications.background#20252e
  • notifications.foreground#d2d5d9
  • panel.background#191d24
  • panel.border#2c323f
  • panelTitle.activeBorder#92a8d1
  • panelTitle.activeForeground#d2d5d9
  • panelTitle.inactiveForeground#626d7c
  • peekView.border#92a8d1
  • peekViewEditor.background#191d24
  • peekViewResult.background#20252e
  • peekViewTitle.background#191d24
  • progressBar.background#92a8d1
  • scrollbar.shadow#0f111545
  • scrollbarSlider.activeBackground#d2d5d959
  • scrollbarSlider.background#d2d5d91f
  • scrollbarSlider.hoverBackground#d2d5d940
  • selection.background#92a8d14d
  • sideBar.background#20252e
  • sideBar.border#2c323f
  • sideBar.foreground#d2d5d9
  • sideBarSectionHeader.background#92a8d126
  • sideBarSectionHeader.foreground#d2d5d9
  • sideBarTitle.foreground#d2d5d9
  • statusBar.background#58657d
  • statusBar.border#2c323f
  • statusBar.debuggingBackground#c5ac7d
  • statusBar.debuggingForeground#f1f1f2
  • statusBar.foreground#becbe3
  • statusBar.noFolderBackground#191d24
  • statusBarItem.hoverBackground#92a8d14d
  • statusBarItem.remoteBackground#92a8d1
  • statusBarItem.remoteForeground#16191f
  • tab.activeBackground#121419
  • tab.activeBorder#92a8d1
  • tab.activeBorderTop#92a8d100
  • tab.activeForeground#d2d5d9
  • tab.border#2c323f
  • tab.inactiveBackground#191d24
  • tab.inactiveForeground#626d7c
  • terminal.ansiBlack#121419
  • terminal.ansiBlue#517aa9
  • terminal.ansiBrightBlack#626d7c
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#f1f1f2
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#d2d5d9
  • terminal.ansiYellow#efc050
  • terminal.background#191d24
  • terminal.foreground#d2d5d9
  • terminalCursor.foreground#92a8d1
  • textLink.activeForeground#ceb891
  • textLink.foreground#c5ac7d
  • titleBar.activeBackground#191d24
  • titleBar.activeForeground#d2d5d9
  • titleBar.border#2c323f
  • titleBar.inactiveBackground#191d24
  • titleBar.inactiveForeground#626d7c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#626d7citalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#92a8d1bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#92a8d1bold
storage.type, storage.modifier#92a8d1bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#c5ac7d
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#92a8d1
string.regexp#c5ac7d
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#76ff7b
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#53b0aebold
variable.other.constant, variable.other.enummember#53b0aebold
constant.character.escape#a2b5d8
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#688696italic
entity.name.type.parameter#688696italic
entity.name.function, meta.function entity.name.function#f7cac9bold
meta.function-call entity.name.function, support.function#f7cac9
meta.method-call entity.name.function, entity.name.function.member#f7cac9
variable, variable.other, variable.other.readwrite#d2d5d9
variable.parameter#d2d5d9italic
variable.language, variable.language.this, variable.language.self, variable.language.super#92a8d1italic
variable.other.property, variable.other.object.property, meta.object-literal.key#d2d5d9
entity.name.class, entity.name.type.class, support.class#b163a3bold italic
entity.other.inherited-class#b163a3italic
entity.name.tag, punctuation.definition.tag#92a8d1bold
entity.other.attribute-name#f7cac9italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#a2b5d8
punctuation, punctuation.separator, punctuation.terminator, meta.brace#626d7c
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#688696italic
support.type.property-name.css, support.type.vendored.property-name.css#688696
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#b163a3bold
support.constant.property-value.css, support.constant.color.css#53b0ae
keyword.other.unit.css#76ff7b
support.type.property-name.json#688696
markup.heading, markup.heading entity.name, entity.name.section.markdown#92a8d1bold
markup.bold#53b0aebold
markup.italic#688696italic
markup.inline.raw, markup.raw#c5ac7d
markup.underline.link#f7cac9
markup.quote#626d7citalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050