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#1a1b1b
  • activityBar.border#2e2f2f
  • activityBar.foreground#9a9e9d
  • activityBar.inactiveForeground#9a9e9d
  • activityBarBadge.background#d94f70
  • activityBarBadge.foreground#f7f7f7
  • badge.background#9a9e9d
  • badge.foreground#171818
  • breadcrumb.activeSelectionForeground#e3e4e4
  • breadcrumb.focusForeground#e3e4e4
  • breadcrumb.foreground#9a9e9d
  • button.background#9a9e9d
  • button.foreground#171818
  • button.hoverBackground#a4a8a7
  • button.secondaryBackground#222323
  • button.secondaryForeground#e3e4e4
  • descriptionForeground#9a9e9d
  • dropdown.background#1a1b1b
  • dropdown.border#2e2f2f
  • dropdown.foreground#e3e4e4
  • editor.background#121313
  • editor.findMatchBackground#5f4b8b66
  • editor.findMatchHighlightBackground#5f4b8b33
  • editor.foreground#e3e4e4
  • editor.inactiveSelectionBackground#9a9e9d26
  • editor.lineHighlightBackground#9a9e9d1a
  • editor.lineHighlightBorder#9a9e9d00
  • editor.selectionBackground#9a9e9d4d
  • editor.wordHighlightBackground#9a9e9d33
  • editorBracketMatch.background#9a9e9d40
  • editorBracketMatch.border#9a9e9d99
  • editorCursor.foreground#9a9e9d
  • editorError.foreground#dd4132
  • editorGroup.border#2e2f2f
  • editorGroupHeader.tabsBackground#1a1b1b
  • editorGroupHeader.tabsBorder#2e2f2f
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#e3e4e433
  • editorIndentGuide.background#e3e4e414
  • editorInfo.foreground#d94f70
  • editorLineNumber.activeForeground#e3e4e4
  • editorLineNumber.foreground#9a9e9d
  • editorRuler.foreground#e3e4e414
  • editorSuggestWidget.selectedBackground#9a9e9d40
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#e3e4e41a
  • editorWidget.background#1a1b1b
  • editorWidget.border#2e2f2f
  • focusBorder#9a9e9d99
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#9a9e9d
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#9a9e9d
  • input.background#1a1b1b
  • input.border#2e2f2f
  • input.foreground#e3e4e4
  • input.placeholderForeground#9a9e9d
  • inputOption.activeBorder#9a9e9d
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#d94f70
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#9a9e9d4d
  • list.activeSelectionForeground#e3e4e4
  • list.focusBackground#9a9e9d33
  • list.highlightForeground#9a9e9d
  • list.hoverBackground#9a9e9d26
  • list.inactiveSelectionBackground#9a9e9d26
  • minimap.background#121313
  • minimap.findMatchHighlight#5f4b8b99
  • minimap.selectionHighlight#9a9e9d66
  • notificationLink.foreground#9a9e9d
  • notifications.background#222323
  • notifications.foreground#e3e4e4
  • panel.background#1a1b1b
  • panel.border#2e2f2f
  • panelTitle.activeBorder#9a9e9d
  • panelTitle.activeForeground#e3e4e4
  • panelTitle.inactiveForeground#9a9e9d
  • peekView.border#9a9e9d
  • peekViewEditor.background#1a1b1b
  • peekViewResult.background#222323
  • peekViewTitle.background#1a1b1b
  • progressBar.background#9a9e9d
  • scrollbar.shadow#0f101045
  • scrollbarSlider.activeBackground#e3e4e459
  • scrollbarSlider.background#e3e4e41f
  • scrollbarSlider.hoverBackground#e3e4e440
  • selection.background#9a9e9d4d
  • sideBar.background#222323
  • sideBar.border#2e2f2f
  • sideBar.foreground#e3e4e4
  • sideBarSectionHeader.background#9a9e9d26
  • sideBarSectionHeader.foreground#e3e4e4
  • sideBarTitle.foreground#e3e4e4
  • statusBar.background#5c5f5e
  • statusBar.border#2e2f2f
  • statusBar.debuggingBackground#d94f70
  • statusBar.debuggingForeground#f7f7f7
  • statusBar.foreground#c2c5c4
  • statusBar.noFolderBackground#1a1b1b
  • statusBarItem.hoverBackground#9a9e9d4d
  • statusBarItem.remoteBackground#9a9e9d
  • statusBarItem.remoteForeground#171818
  • tab.activeBackground#121313
  • tab.activeBorder#9a9e9d
  • tab.activeBorderTop#9a9e9d00
  • tab.activeForeground#e3e4e4
  • tab.border#2e2f2f
  • tab.inactiveBackground#1a1b1b
  • tab.inactiveForeground#9a9e9d
  • terminal.ansiBlack#121313
  • terminal.ansiBlue#55758f
  • terminal.ansiBrightBlack#9a9e9d
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#f7f7f7
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#e3e4e4
  • terminal.ansiYellow#efc050
  • terminal.background#1a1b1b
  • terminal.foreground#e3e4e4
  • terminalCursor.foreground#9a9e9d
  • textLink.activeForeground#df6985
  • textLink.foreground#d94f70
  • titleBar.activeBackground#1a1b1b
  • titleBar.activeForeground#e3e4e4
  • titleBar.border#2e2f2f
  • titleBar.inactiveBackground#1a1b1b
  • titleBar.inactiveForeground#9a9e9d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#9a9e9ditalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#9a9e9dbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#9a9e9dbold
storage.type, storage.modifier#9a9e9dbold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#d94f70
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#9a9e9d
string.regexp#d94f70
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#8d7dac
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#76ff7bbold
variable.other.constant, variable.other.enummember#76ff7bbold
constant.character.escape#a9adac
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#00b5ccitalic
entity.name.type.parameter#00b5ccitalic
entity.name.function, meta.function entity.name.function#decdbebold
meta.function-call entity.name.function, support.function#decdbe
meta.method-call entity.name.function, entity.name.function.member#decdbe
variable, variable.other, variable.other.readwrite#e3e4e4
variable.parameter#e3e4e4italic
variable.language, variable.language.this, variable.language.self, variable.language.super#9a9e9ditalic
variable.other.property, variable.other.object.property, meta.object-literal.key#e3e4e4
entity.name.class, entity.name.type.class, support.class#88b04bbold italic
entity.other.inherited-class#88b04bitalic
entity.name.tag, punctuation.definition.tag#9a9e9dbold
entity.other.attribute-name#decdbeitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#a9adac
punctuation, punctuation.separator, punctuation.terminator, meta.brace#9a9e9d
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#00b5ccitalic
support.type.property-name.css, support.type.vendored.property-name.css#00b5cc
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#88b04bbold
support.constant.property-value.css, support.constant.color.css#76ff7b
keyword.other.unit.css#8d7dac
support.type.property-name.json#00b5cc
markup.heading, markup.heading entity.name, entity.name.section.markdown#9a9e9dbold
markup.bold#76ff7bbold
markup.italic#00b5ccitalic
markup.inline.raw, markup.raw#d94f70
markup.underline.link#decdbe
markup.quote#9a9e9ditalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050