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#1d1e1e
  • activityBar.border#2f3031
  • activityBar.foreground#8a8d8f
  • activityBar.inactiveForeground#8a8d8f
  • activityBarBadge.background#5c3317
  • activityBarBadge.foreground#f6f6f6
  • badge.background#8a8d8f
  • badge.foreground#151515
  • breadcrumb.activeSelectionForeground#dedfe0
  • breadcrumb.focusForeground#dedfe0
  • breadcrumb.foreground#8a8d8f
  • button.background#8a8d8f
  • button.foreground#151515
  • button.hoverBackground#96989a
  • button.secondaryBackground#242525
  • button.secondaryForeground#dedfe0
  • descriptionForeground#8a8d8f
  • dropdown.background#1d1e1e
  • dropdown.border#2f3031
  • dropdown.foreground#dedfe0
  • editor.background#161717
  • editor.findMatchBackground#9e4fa566
  • editor.findMatchHighlightBackground#9e4fa533
  • editor.foreground#dedfe0
  • editor.inactiveSelectionBackground#8a8d8f26
  • editor.lineHighlightBackground#8a8d8f1a
  • editor.lineHighlightBorder#8a8d8f00
  • editor.selectionBackground#8a8d8f4d
  • editor.wordHighlightBackground#8a8d8f33
  • editorBracketMatch.background#8a8d8f40
  • editorBracketMatch.border#8a8d8f99
  • editorCursor.foreground#8a8d8f
  • editorError.foreground#dd4132
  • editorGroup.border#2f3031
  • editorGroupHeader.tabsBackground#1d1e1e
  • editorGroupHeader.tabsBorder#2f3031
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#dedfe033
  • editorIndentGuide.background#dedfe014
  • editorInfo.foreground#5c3317
  • editorLineNumber.activeForeground#dedfe0
  • editorLineNumber.foreground#8a8d8f
  • editorRuler.foreground#dedfe014
  • editorSuggestWidget.selectedBackground#8a8d8f40
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#dedfe01a
  • editorWidget.background#1d1e1e
  • editorWidget.border#2f3031
  • focusBorder#8a8d8f99
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#8a8d8f
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#8a8d8f
  • input.background#1d1e1e
  • input.border#2f3031
  • input.foreground#dedfe0
  • input.placeholderForeground#8a8d8f
  • inputOption.activeBorder#8a8d8f
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#5c3317
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#8a8d8f4d
  • list.activeSelectionForeground#dedfe0
  • list.focusBackground#8a8d8f33
  • list.highlightForeground#8a8d8f
  • list.hoverBackground#8a8d8f26
  • list.inactiveSelectionBackground#8a8d8f26
  • minimap.background#161717
  • minimap.findMatchHighlight#9e4fa599
  • minimap.selectionHighlight#8a8d8f66
  • notificationLink.foreground#8a8d8f
  • notifications.background#242525
  • notifications.foreground#dedfe0
  • panel.background#1d1e1e
  • panel.border#2f3031
  • panelTitle.activeBorder#8a8d8f
  • panelTitle.activeForeground#dedfe0
  • panelTitle.inactiveForeground#8a8d8f
  • peekView.border#8a8d8f
  • peekViewEditor.background#1d1e1e
  • peekViewResult.background#242525
  • peekViewTitle.background#1d1e1e
  • progressBar.background#8a8d8f
  • scrollbar.shadow#0e0e0e45
  • scrollbarSlider.activeBackground#dedfe059
  • scrollbarSlider.background#dedfe01f
  • scrollbarSlider.hoverBackground#dedfe040
  • selection.background#8a8d8f4d
  • sideBar.background#242525
  • sideBar.border#2f3031
  • sideBar.foreground#dedfe0
  • sideBarSectionHeader.background#8a8d8f26
  • sideBarSectionHeader.foreground#dedfe0
  • sideBarTitle.foreground#dedfe0
  • statusBar.background#535556
  • statusBar.border#2f3031
  • statusBar.debuggingBackground#5c3317
  • statusBar.debuggingForeground#f6f6f6
  • statusBar.foreground#b9bbbc
  • statusBar.noFolderBackground#1d1e1e
  • statusBarItem.hoverBackground#8a8d8f4d
  • statusBarItem.remoteBackground#8a8d8f
  • statusBarItem.remoteForeground#151515
  • tab.activeBackground#161717
  • tab.activeBorder#8a8d8f
  • tab.activeBorderTop#8a8d8f00
  • tab.activeForeground#dedfe0
  • tab.border#2f3031
  • tab.inactiveBackground#1d1e1e
  • tab.inactiveForeground#8a8d8f
  • terminal.ansiBlack#161717
  • terminal.ansiBlue#4d6d88
  • terminal.ansiBrightBlack#8a8d8f
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#f6f6f6
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#dedfe0
  • terminal.ansiYellow#efc050
  • terminal.background#1d1e1e
  • terminal.foreground#dedfe0
  • terminalCursor.foreground#8a8d8f
  • textLink.activeForeground#74523a
  • textLink.foreground#5c3317
  • titleBar.activeBackground#1d1e1e
  • titleBar.activeForeground#dedfe0
  • titleBar.border#2f3031
  • titleBar.inactiveBackground#1d1e1e
  • titleBar.inactiveForeground#8a8d8f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#8a8d8fitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#8a8d8fbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#8a8d8fbold
storage.type, storage.modifier#8a8d8fbold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#9c8472
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#8a8d8f
string.regexp#9c8472
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#ad6ab3
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#8d7dacbold
variable.other.constant, variable.other.enummember#8d7dacbold
constant.character.escape#9c9ea0
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#92a8d1italic
entity.name.type.parameter#92a8d1italic
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#dedfe0
variable.parameter#dedfe0italic
variable.language, variable.language.this, variable.language.self, variable.language.super#8a8d8fitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#dedfe0
entity.name.class, entity.name.type.class, support.class#76ff7bbold italic
entity.other.inherited-class#76ff7bitalic
entity.name.tag, punctuation.definition.tag#8a8d8fbold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#9c9ea0
punctuation, punctuation.separator, punctuation.terminator, meta.brace#8a8d8f
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#92a8d1italic
support.type.property-name.css, support.type.vendored.property-name.css#92a8d1
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#76ff7bbold
support.constant.property-value.css, support.constant.color.css#8d7dac
keyword.other.unit.css#ad6ab3
support.type.property-name.json#92a8d1
markup.heading, markup.heading entity.name, entity.name.section.markdown#8a8d8fbold
markup.bold#8d7dacbold
markup.italic#92a8d1italic
markup.inline.raw, markup.raw#9c8472
markup.underline.link#e8d4e2
markup.quote#8a8d8fitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050