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#1a1f24
  • activityBar.border#2f3740
  • activityBar.foreground#9bb7d4
  • activityBar.inactiveForeground#65717d
  • activityBarBadge.background#ffaa4d
  • activityBarBadge.foreground#f1f1f2
  • badge.background#9bb7d4
  • badge.foreground#171b20
  • breadcrumb.activeSelectionForeground#d3d6d9
  • breadcrumb.focusForeground#d3d6d9
  • breadcrumb.foreground#65717d
  • button.background#9bb7d4
  • button.foreground#171b20
  • button.hoverBackground#a5bed8
  • button.secondaryBackground#22282f
  • button.secondaryForeground#d3d6d9
  • descriptionForeground#65717d
  • dropdown.background#1a1f24
  • dropdown.border#2f3740
  • dropdown.foreground#d3d6d9
  • editor.background#131619
  • editor.findMatchBackground#76ff7b66
  • editor.findMatchHighlightBackground#76ff7b33
  • editor.foreground#d3d6d9
  • editor.inactiveSelectionBackground#9bb7d426
  • editor.lineHighlightBackground#9bb7d41a
  • editor.lineHighlightBorder#9bb7d400
  • editor.selectionBackground#9bb7d44d
  • editor.wordHighlightBackground#9bb7d433
  • editorBracketMatch.background#9bb7d440
  • editorBracketMatch.border#9bb7d499
  • editorCursor.foreground#9bb7d4
  • editorError.foreground#dd4132
  • editorGroup.border#2f3740
  • editorGroupHeader.tabsBackground#1a1f24
  • editorGroupHeader.tabsBorder#2f3740
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#d3d6d933
  • editorIndentGuide.background#d3d6d914
  • editorInfo.foreground#ffaa4d
  • editorLineNumber.activeForeground#d3d6d9
  • editorLineNumber.foreground#65717d
  • editorRuler.foreground#d3d6d914
  • editorSuggestWidget.selectedBackground#9bb7d440
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#d3d6d91a
  • editorWidget.background#1a1f24
  • editorWidget.border#2f3740
  • focusBorder#9bb7d499
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#65717d
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#65717d
  • input.background#1a1f24
  • input.border#2f3740
  • input.foreground#d3d6d9
  • input.placeholderForeground#65717d
  • inputOption.activeBorder#9bb7d4
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#ffaa4d
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#9bb7d44d
  • list.activeSelectionForeground#d3d6d9
  • list.focusBackground#9bb7d433
  • list.highlightForeground#9bb7d4
  • list.hoverBackground#9bb7d426
  • list.inactiveSelectionBackground#9bb7d426
  • minimap.background#131619
  • minimap.findMatchHighlight#76ff7b99
  • minimap.selectionHighlight#9bb7d466
  • notificationLink.foreground#9bb7d4
  • notifications.background#22282f
  • notifications.foreground#d3d6d9
  • panel.background#1a1f24
  • panel.border#2f3740
  • panelTitle.activeBorder#9bb7d4
  • panelTitle.activeForeground#d3d6d9
  • panelTitle.inactiveForeground#65717d
  • peekView.border#9bb7d4
  • peekViewEditor.background#1a1f24
  • peekViewResult.background#22282f
  • peekViewTitle.background#1a1f24
  • progressBar.background#9bb7d4
  • scrollbar.shadow#0f121545
  • scrollbarSlider.activeBackground#d3d6d959
  • scrollbarSlider.background#d3d6d91f
  • scrollbarSlider.hoverBackground#d3d6d940
  • selection.background#9bb7d44d
  • sideBar.background#22282f
  • sideBar.border#2f3740
  • sideBar.foreground#d3d6d9
  • sideBarSectionHeader.background#9bb7d426
  • sideBarSectionHeader.foreground#d3d6d9
  • sideBarTitle.foreground#d3d6d9
  • statusBar.background#5d6e7f
  • statusBar.border#2f3740
  • statusBar.debuggingBackground#ffaa4d
  • statusBar.debuggingForeground#f1f1f2
  • statusBar.foreground#c3d4e5
  • statusBar.noFolderBackground#1a1f24
  • statusBarItem.hoverBackground#9bb7d44d
  • statusBarItem.remoteBackground#9bb7d4
  • statusBarItem.remoteForeground#171b20
  • tab.activeBackground#131619
  • tab.activeBorder#9bb7d4
  • tab.activeBorderTop#9bb7d400
  • tab.activeForeground#d3d6d9
  • tab.border#2f3740
  • tab.inactiveBackground#1a1f24
  • tab.inactiveForeground#65717d
  • terminal.ansiBlack#131619
  • terminal.ansiBlue#5582ab
  • terminal.ansiBrightBlack#65717d
  • 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#d3d6d9
  • terminal.ansiYellow#efc050
  • terminal.background#1a1f24
  • terminal.foreground#d3d6d9
  • terminalCursor.foreground#9bb7d4
  • textLink.activeForeground#ffb768
  • textLink.foreground#ffaa4d
  • titleBar.activeBackground#1a1f24
  • titleBar.activeForeground#d3d6d9
  • titleBar.border#2f3740
  • titleBar.inactiveBackground#1a1f24
  • titleBar.inactiveForeground#65717d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#65717ditalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#9bb7d4bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#9bb7d4bold
storage.type, storage.modifier#9bb7d4bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#ffaa4d
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#9bb7d4
string.regexp#ffaa4d
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#76ff7b
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#009473bold
variable.other.constant, variable.other.enummember#009473bold
constant.character.escape#aac2da
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#7486b9italic
entity.name.type.parameter#7486b9italic
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#d3d6d9
variable.parameter#d3d6d9italic
variable.language, variable.language.this, variable.language.self, variable.language.super#9bb7d4italic
variable.other.property, variable.other.object.property, meta.object-literal.key#d3d6d9
entity.name.class, entity.name.type.class, support.class#ad6ab3bold italic
entity.other.inherited-class#ad6ab3italic
entity.name.tag, punctuation.definition.tag#9bb7d4bold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#aac2da
punctuation, punctuation.separator, punctuation.terminator, meta.brace#65717d
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#7486b9italic
support.type.property-name.css, support.type.vendored.property-name.css#7486b9
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ad6ab3bold
support.constant.property-value.css, support.constant.color.css#009473
keyword.other.unit.css#76ff7b
support.type.property-name.json#7486b9
markup.heading, markup.heading entity.name, entity.name.section.markdown#9bb7d4bold
markup.bold#009473bold
markup.italic#7486b9italic
markup.inline.raw, markup.raw#ffaa4d
markup.underline.link#e8d4e2
markup.quote#65717ditalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050