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#111213
  • activityBar.border#b4b4b480
  • activityBar.foreground#8f8f8f
  • activityBar.inactiveForeground#b4b4b480
  • activityBarBadge.background#111213
  • activityBarBadge.foreground#8f8f8f
  • badge.background#111213
  • badge.foreground#8f8f8f
  • breadcrumb.foreground#8f8f8f
  • button.background#111213
  • button.foreground#ddd
  • button.hoverBackground#401143
  • checkbox.border#b4b4b480
  • contrastActiveBorder#111213
  • contrastBorder#b4b4b480
  • debugExceptionWidget.background#111213
  • debugExceptionWidget.border#8f8f8f
  • debugToolBar.background#111213
  • debugToolBar.border#8f8f8f
  • diffEditor.insertedTextBackground#31958a55
  • diffEditor.insertedTextBorder#31958a55
  • diffEditor.removedTextBackground#892f4688
  • diffEditor.removedTextBorder#31958a55
  • dropdown.background#111213
  • dropdown.border#b4b4b480
  • dropdown.foreground#dbdbdb
  • editor.background#111213
  • editor.findMatchBackground#261d8f
  • editor.findMatchBorder#b4b4b480
  • editor.findMatchHighlightBackground#eeeeee44
  • editor.foreground#dbdbdb
  • editor.lineHighlightBackground#1d1f23
  • editor.selectionBackground#3e4451
  • editor.selectionForeground#000c18
  • editorGroup.border#b4b4b480
  • editorGroupHeader.border#111213
  • editorGroupHeader.noTabsBackground#111213
  • editorGroupHeader.tabsBackground#111213
  • editorGroupHeader.tabsBorder#b4b4b480
  • editorHint.foreground#43b9d8
  • editorHoverWidget.background#111213
  • editorHoverWidget.border#b4b4b480
  • editorIndentGuide.activeBackground#505050
  • editorLineNumber.foreground#495162
  • editorLink.activeForeground#0298fc
  • editorMarkerNavigation.background#060621
  • editorMarkerNavigationError.background#ca5b7c
  • editorMarkerNavigationWarning.background#787c7b
  • editorSuggestWidget.background#111213
  • editorSuggestWidget.border#8f8f8f
  • editorSuggestWidget.foreground#dbdbdb
  • editorSuggestWidget.highlightForeground#2eb2d3
  • editorSuggestWidget.selectedBackground#b4b4b480
  • editorWidget.background#111213
  • editorWidget.border#111213
  • focusBorder#b4b4b480
  • foreground#dbdbdb
  • gitDecoration.addedResourceForeground#1b5225
  • gitDecoration.conflictingResourceForeground#25c3df
  • gitDecoration.deletedResourceForeground#d8810f
  • gitDecoration.ignoredResourceForeground#b4b4b480
  • gitDecoration.modifiedResourceForeground#d2ed09
  • gitDecoration.submoduleResourceForeground#ecdc4d
  • gitDecoration.untrackedResourceForeground#7b84ff
  • icon.foreground#dbdbdb
  • input.background#111213
  • input.border#b4b4b480
  • input.foreground#dbdbdb
  • input.placeholderForeground#b4b4b480
  • list.activeSelectionBackground#401143
  • list.focusBackground#b4b4b480
  • list.hoverBackground#b3b3b315
  • list.inactiveSelectionBackground#2d0c2f
  • menu.background#111213
  • menu.border#b4b4b480
  • merge.border#b4b4b480
  • notificationCenter.border#8f8f8f
  • notificationCenterHeader.background#111213
  • notificationCenterHeader.foreground#dbdbdb
  • notifications.background#111213
  • notifications.border#b4b4b480
  • notifications.foreground#dbdbdb
  • panel.background#000
  • panel.border#b4b4b480
  • panel.dropBorder#8f8f8f
  • panelSection.border#b4b4b480
  • panelTitle.activeForeground#ccc
  • panelTitle.inactiveForeground#8f8f8f
  • peekView.border#b4b4b480
  • peekViewTitle.background#111213
  • peekViewTitleLabel.foreground#dbdbdb
  • quickInput.background#111213
  • sideBar.background#111213
  • sideBar.border#b4b4b480
  • sideBar.dropBackground#b4b4b480
  • sideBar.foreground#dbdbdb
  • sideBarSectionHeader.background#111213
  • sideBarSectionHeader.border#b4b4b480
  • sideBarSectionHeader.foreground#8f8f8f
  • sideBarTitle.foreground#8f8f8f
  • statusBar.background#000
  • statusBar.border#111213
  • statusBar.debuggingBackground#b3b3b315
  • statusBar.debuggingForeground#8f8f8f
  • statusBar.foreground#ccc
  • statusBar.noFolderBackground#111213
  • statusBar.noFolderBorder#b4b4b480
  • statusBar.noFolderForeground#8f8f8f
  • statusBarItem.activeBackground#2d0c2f
  • statusBarItem.hoverBackground#401143
  • tab.activeBackground#401143
  • tab.activeForeground#dbdbdb
  • tab.activeModifiedBorder#b4b4b480
  • tab.border#b4b4b480
  • tab.hoverBorder#b4b4b480
  • tab.inactiveBackground#111213
  • tab.inactiveForeground#dbdbdb
  • tab.inactiveModifiedBorder#b4b4b480
  • tab.unfocusedActiveBorder#111213
  • tab.unfocusedActiveForeground#dbdbdb
  • tab.unfocusedInactiveForeground#dbdbdb
  • terminal.ansiBlack#8f8f8f
  • terminal.ansiBrightBlack#8f8f8f
  • terminal.ansiBrightGreen#4db111
  • terminal.ansiBrightMagenta#f57f00
  • terminal.ansiBrightRed#f82a5d
  • terminal.ansiBrightWhite#f1f1f1
  • terminal.ansiBrightYellow#e7dc60
  • terminal.ansiGreen#4db111
  • terminal.ansiMagenta#f57f00
  • terminal.ansiRed#f82a5d
  • terminal.ansiWhite#f1f1f1
  • terminal.ansiYellow#e7dc60
  • terminal.background#000
  • terminal.border#b4b4b480
  • titleBar.activeBackground#000
  • titleBar.activeForeground#ccc
  • titleBar.border#b4b4b480
  • titleBar.inactiveBackground#000
  • titleBar.inactiveForeground#8f8f8f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#757575
string#ecdc4d
constant.numeric#7b84ff
constant.language#7b84ff
constant.character, constant.other#7b84ff
variable
keyword#c4166dbold
storage#c4166dbold
storage.type#25c3dfitalic
entity.name.class#a5db11underline
entity.other.inherited-class#a5db11italic underline
entity.name.function#a5db11
variable.parameter#d8810fitalic
entity.name.tag#c4166dbold
entity.other.attribute-name#a5db11
support.function#25c3df
support.constant#25c3df
support.type, support.class#25c3dfitalic
support.other.variable
invalid#F8F8F0bold
invalid.deprecated#F8F8F0
meta.structure.dictionary.json, string.quoted.double.json#CFCFC2
meta.diff, meta.diff.header#75715E
markup.deleted#c4166d
markup.inserted#a5db11
markup.changed#ecdc4d
constant.numeric.line-number.find-in-files - match#7b84ffA0
entity.name.filename.find-in-files#ecdc4d
variable.language#a5db11
heading.1.markdown#a5db11bold
punctuation.definition.heading.markdown#a5db11
entity.name.section.markdown#a5db11
punctuation.definition.list.begin.markdown#7b84ff
meta.image.inline.markdown#ecdc4d
markup.bold.markdown#dbdbdbbold
markup.italic.markdown#dbdbdbitalic
markup.inline.raw.string.markdown#25c3df
meta.separator.markdown#8F8F8F
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#7b84ff
variable.other.object, punctuation.accessor, meta.brace.round, variable.other.readwrite, punctuation.separator.comma#dbdbdb
meta.embedded.line#abb2bf
support.type, support.variable#56b6c2
token.info-token#6796E6
token.warn-token#d8810f
token.error-token#F44747
token.debug-token#6967e6