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.

  • actionBar.toggledBackground#383a49
  • activityBar.activeBorder#2ea043
  • activityBar.background#0D1213
  • activityBar.border#2b2b2b
  • activityBar.foreground#d7d7d7
  • activityBar.inactiveForeground#868686
  • activityBarBadge.background#0078d4
  • activityBarBadge.foreground#ffffff
  • badge.background#616161
  • badge.foreground#f8f8f8
  • button.background#0078d4
  • button.border#ffffff12
  • button.foreground#ffffff
  • button.hoverBackground#026ec1
  • button.secondaryBackground#313131
  • button.secondaryForeground#cccccc
  • button.secondaryHoverBackground#3c3c3c
  • chat.slashCommandBackground#34414b
  • chat.slashCommandForeground#40a6ff
  • checkbox.background#313131
  • checkbox.border#3c3c3c
  • debugToolBar.background#0D1213
  • descriptionForeground#9d9d9d
  • dropdown.background#313131
  • dropdown.border#3c3c3c
  • dropdown.foreground#cccccc
  • dropdown.listBackground#151D1E
  • editor.background#151D1E
  • editor.findMatchBackground#9e6a03
  • editor.foreground#cccccc
  • editor.inactiveSelectionBackground#3a3d41fa
  • editor.selectionHighlightBackground#add6ff26
  • editorGroup.border#ffffff17
  • editorGroupHeader.tabsBackground#0D1213
  • editorGroupHeader.tabsBorder#2b2b2b
  • editorGutter.addedBackground#2ea043
  • editorGutter.deletedBackground#f85149
  • editorGutter.modifiedBackground#0078d4
  • editorIndentGuide.activeBackground1#707070
  • editorIndentGuide.background1#404040
  • editorLineNumber.activeForeground#cccccc
  • editorLineNumber.foreground#6e7681
  • editorOverviewRuler.border#010409
  • editorWidget.background#202020
  • errorForeground#f85149
  • focusBorder#2ea043
  • foreground#cccccc
  • icon.foreground#cccccc
  • input.background#313131
  • input.border#3c3c3c
  • input.foreground#cccccc
  • input.placeholderForeground#989898
  • inputOption.activeBackground#2489db82
  • inputOption.activeBorder#2ea043
  • keybindingLabel.foreground#cccccc
  • list.activeSelectionIconForeground#ffffff
  • list.dropBackground#383b3d
  • menu.background#151D1E
  • menu.border#454545
  • menu.foreground#cccccc
  • menu.selectionBackground#0078d4
  • menu.separatorBackground#454545
  • notificationCenterHeader.background#151D1E
  • notificationCenterHeader.foreground#cccccc
  • notifications.background#151D1E
  • notifications.border#2b2b2b
  • notifications.foreground#cccccc
  • panel.background#0D1213
  • panel.border#2b2b2b
  • panelInput.border#2b2b2b
  • panelTitle.activeBorder#2ea043
  • panelTitle.activeForeground#cccccc
  • panelTitle.inactiveForeground#9d9d9d
  • peekViewEditor.background#151D1E
  • peekViewEditor.matchHighlightBackground#bb800966
  • peekViewResult.background#151D1E
  • peekViewResult.matchHighlightBackground#bb800966
  • pickerGroup.border#3c3c3c
  • ports.iconRunningProcessForeground#369432
  • progressBar.background#0078d4
  • quickInput.background#222222
  • quickInput.foreground#cccccc
  • settings.dropdownBackground#313131
  • settings.dropdownBorder#3c3c3c
  • settings.headerForeground#ffffff
  • settings.modifiedItemIndicator#bb800966
  • sideBar.background#0D1213
  • sideBar.border#2b2b2b
  • sideBar.foreground#cccccc
  • sideBarSectionHeader.background#0D1213
  • sideBarSectionHeader.border#2b2b2b
  • sideBarSectionHeader.foreground#cccccc
  • sideBarTitle.foreground#cccccc
  • statusBar.background#0D1213
  • statusBar.border#2b2b2b
  • statusBar.debuggingBackground#0078d4
  • statusBar.debuggingForeground#ffffff
  • statusBar.focusBorder#2ea043
  • statusBar.foreground#cccccc
  • statusBar.noFolderBackground#151D1E
  • statusBarItem.focusBorder#2ea043
  • statusBarItem.prominentBackground#6e768166
  • statusBarItem.remoteBackground#0078d4
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#151D1E
  • tab.activeBorder#151D1E
  • tab.activeBorderTop#2ea043
  • tab.activeForeground#ffffff
  • tab.border#2b2b2b
  • tab.hoverBackground#151D1E
  • tab.inactiveBackground#0D1213
  • tab.inactiveForeground#9d9d9d
  • tab.lastPinnedBorder#cccccc33
  • tab.selectedBackground#222222
  • tab.selectedBorderTop#2ea043
  • tab.selectedForeground#ffffffa0
  • tab.unfocusedActiveBorder#151D1E
  • tab.unfocusedActiveBorderTop#2b2b2b
  • tab.unfocusedHoverBackground#151D1E
  • terminal.foreground#cccccc
  • terminal.inactiveSelectionBackground#3a3d41
  • terminal.tab.activeBorder#2ea043
  • textBlockQuote.background#2b2b2b
  • textBlockQuote.border#616161
  • textCodeBlock.background#2b2b2b
  • textLink.activeForeground#4daafc
  • textLink.foreground#4daafc
  • textPreformat.background#3c3c3c
  • textPreformat.foreground#d0d0d0
  • textSeparator.foreground#21262d
  • titleBar.activeBackground#0D1213
  • titleBar.activeForeground#cccccc
  • titleBar.border#2b2b2b
  • titleBar.inactiveBackground#151D1E
  • titleBar.inactiveForeground#9d9d9d
  • welcomePage.progress.foreground#0078d4
  • welcomePage.tileBackground#2b2b2b
  • widget.border#313131

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#D4D4D4CF—
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#D4D4D4CF—
comment#8b8b8bitalic
constant#00f4b9
constant.numeric#60EA4ECC
keyword#859DD6
entity#859DD6
entity.other.attribute-name#859DD6—
declaration.tag, meta.tag#ffffff
declaration.tag entity, meta.tag entity#b0d8a3
storage#569CD6bold
string#E4918F
support#00D98F
variable#00f4b9italic
invalid#ffffffff—
entity.other.inherited-class#4EC9B0underline
constant.character#569CD6—
string constant, constant.character.escape#D7BA7DCF
string.regexp#D16969CF—
string variable#edef7dff—
support.function#f2f973cc
support.constant, support.variable#eb939aff
declaration.sgml.html declaration.doctype, declaration.sgml.html declaration.doctype entity, declaration.sgml.html declaration.doctype string, declaration.xml-processing, declaration.xml-processing entity, declaration.xml-processing string#73817dff
meta.selector.css entity.name.tag#aa5507ff
meta.selector.css entity.other.attribute-name.id#fec758ff—
meta.selector.css entity.other.attribute-name.class#41a83eff
support.type.property-name.css#96dd3bcc
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css#ffe862ccitalic
meta.property-value support.constant.named-color.css, meta.property-value constant#ffe862cc
meta.preprocessor.at-rule keyword.control.at-rule#fd6209ff—
meta.constructor.argument.css#ec9799ff
meta.diff, meta.diff.header#f8f8f8ffitalic
markup.deleted#ec9799ff—
markup.changed#f8f8f8ff—
markup.inserted#41a83ecc—
markup.quote#f12727ff—
markup.list#ff6262ff—
markup.bold, markup.italic#fb9a4bff—
markup.bold—bold
markup.italic—italic
markup.strikethrough—strikethrough
markup.inline.raw#cd8d8dff
markup.heading, markup.heading.setext, punctuation.definition.heading, entity.name.section#fec758ffbold
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded, .format.placeholder#ec0d1e—