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#1f1f20
  • activityBar.border#323333
  • activityBar.foreground#939597
  • activityBar.inactiveForeground#939597
  • activityBarBadge.background#ffaa4d
  • activityBarBadge.foreground#f6f7f7
  • badge.background#939597
  • badge.foreground#161617
  • breadcrumb.activeSelectionForeground#e1e1e2
  • breadcrumb.focusForeground#e1e1e2
  • breadcrumb.foreground#939597
  • button.background#939597
  • button.foreground#161617
  • button.hoverBackground#9ea0a1
  • button.secondaryBackground#262727
  • button.secondaryForeground#e1e1e2
  • descriptionForeground#939597
  • dropdown.background#1f1f20
  • dropdown.border#323333
  • dropdown.foreground#e1e1e2
  • editor.background#181818
  • editor.findMatchBackground#76ff7b66
  • editor.findMatchHighlightBackground#76ff7b33
  • editor.foreground#e1e1e2
  • editor.inactiveSelectionBackground#93959726
  • editor.lineHighlightBackground#9395971a
  • editor.lineHighlightBorder#93959700
  • editor.selectionBackground#9395974d
  • editor.wordHighlightBackground#93959733
  • editorBracketMatch.background#93959740
  • editorBracketMatch.border#93959799
  • editorCursor.foreground#939597
  • editorError.foreground#dd4132
  • editorGroup.border#323333
  • editorGroupHeader.tabsBackground#1f1f20
  • editorGroupHeader.tabsBorder#323333
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#e1e1e233
  • editorIndentGuide.background#e1e1e214
  • editorInfo.foreground#ffaa4d
  • editorLineNumber.activeForeground#e1e1e2
  • editorLineNumber.foreground#939597
  • editorRuler.foreground#e1e1e214
  • editorSuggestWidget.selectedBackground#93959740
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#e1e1e21a
  • editorWidget.background#1f1f20
  • editorWidget.border#323333
  • focusBorder#93959799
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#939597
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#939597
  • input.background#1f1f20
  • input.border#323333
  • input.foreground#e1e1e2
  • input.placeholderForeground#939597
  • inputOption.activeBorder#939597
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#ffaa4d
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#9395974d
  • list.activeSelectionForeground#e1e1e2
  • list.focusBackground#93959733
  • list.highlightForeground#939597
  • list.hoverBackground#93959726
  • list.inactiveSelectionBackground#93959726
  • minimap.background#181818
  • minimap.findMatchHighlight#76ff7b99
  • minimap.selectionHighlight#93959766
  • notificationLink.foreground#939597
  • notifications.background#262727
  • notifications.foreground#e1e1e2
  • panel.background#1f1f20
  • panel.border#323333
  • panelTitle.activeBorder#939597
  • panelTitle.activeForeground#e1e1e2
  • panelTitle.inactiveForeground#939597
  • peekView.border#939597
  • peekViewEditor.background#1f1f20
  • peekViewResult.background#262727
  • peekViewTitle.background#1f1f20
  • progressBar.background#939597
  • scrollbar.shadow#0f0f0f45
  • scrollbarSlider.activeBackground#e1e1e259
  • scrollbarSlider.background#e1e1e21f
  • scrollbarSlider.hoverBackground#e1e1e240
  • selection.background#9395974d
  • sideBar.background#262727
  • sideBar.border#323333
  • sideBar.foreground#e1e1e2
  • sideBarSectionHeader.background#93959726
  • sideBarSectionHeader.foreground#e1e1e2
  • sideBarTitle.foreground#e1e1e2
  • statusBar.background#58595b
  • statusBar.border#323333
  • statusBar.debuggingBackground#ffaa4d
  • statusBar.debuggingForeground#f6f7f7
  • statusBar.foreground#bebfc1
  • statusBar.noFolderBackground#1f1f20
  • statusBarItem.hoverBackground#9395974d
  • statusBarItem.remoteBackground#939597
  • statusBarItem.remoteForeground#161617
  • tab.activeBackground#181818
  • tab.activeBorder#939597
  • tab.activeBorderTop#93959700
  • tab.activeForeground#e1e1e2
  • tab.border#323333
  • tab.inactiveBackground#1f1f20
  • tab.inactiveForeground#939597
  • terminal.ansiBlack#181818
  • terminal.ansiBlue#51718c
  • terminal.ansiBrightBlack#939597
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#f6f7f7
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#e1e1e2
  • terminal.ansiYellow#efc050
  • terminal.background#1f1f20
  • terminal.foreground#e1e1e2
  • terminalCursor.foreground#939597
  • textLink.activeForeground#ffb768
  • textLink.foreground#ffaa4d
  • titleBar.activeBackground#1f1f20
  • titleBar.activeForeground#e1e1e2
  • titleBar.border#323333
  • titleBar.inactiveBackground#1f1f20
  • titleBar.inactiveForeground#939597

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#939597italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#939597bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#939597bold
storage.type, storage.modifier#939597bold
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#939597
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#a3a5a7
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#99d6eaitalic
entity.name.type.parameter#99d6eaitalic
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#e1e1e2
variable.parameter#e1e1e2italic
variable.language, variable.language.this, variable.language.self, variable.language.super#939597italic
variable.other.property, variable.other.object.property, meta.object-literal.key#e1e1e2
entity.name.class, entity.name.type.class, support.class#ad6ab3bold italic
entity.other.inherited-class#ad6ab3italic
entity.name.tag, punctuation.definition.tag#939597bold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#a3a5a7
punctuation, punctuation.separator, punctuation.terminator, meta.brace#939597
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#99d6eaitalic
support.type.property-name.css, support.type.vendored.property-name.css#99d6ea
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#99d6ea
markup.heading, markup.heading entity.name, entity.name.section.markdown#939597bold
markup.bold#009473bold
markup.italic#99d6eaitalic
markup.inline.raw, markup.raw#ffaa4d
markup.underline.link#e8d4e2
markup.quote#939597italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050