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#000
  • activityBar.border#EFFFFF
  • activityBar.foreground#EFFFFF
  • activityBar.inactiveForeground#FF1744
  • activityBarBadge.background#000
  • activityBarBadge.foreground#FF1744
  • badge.background#000000
  • badge.foreground#EFFFFF
  • breadcrumb.foreground#FFFFFF
  • button.background#000000
  • button.border#EFFFFF
  • button.foreground#FF1744
  • button.hoverBackground#000000
  • checkbox.border#EFFFFF
  • contrastActiveBorder#000000
  • contrastBorder#000000
  • debugExceptionWidget.background#000000
  • debugExceptionWidget.border#EFFFFF
  • debugToolBar.background#000000
  • debugToolBar.border#EFFFFF
  • diffEditor.insertedTextBackground#97d80000
  • diffEditor.insertedTextBorder#97d800af
  • diffEditor.removedTextBackground#ff5c5c00
  • diffEditor.removedTextBorder#ff1f1fa6
  • dropdown.background#000000
  • dropdown.border#000000
  • dropdown.foreground#FFFFFF
  • editor.background#000000
  • editor.findMatchBackground#ff174546
  • editor.findMatchBorder#FF17446e
  • editor.findMatchForeground#ff1717
  • editor.findMatchHighlightBackground#bebebe6e
  • editor.foreground#FFFFFF
  • editor.inactiveSelectionBackground#ff174542
  • editor.lineHighlightBorder#efffff33
  • editor.selectionBackground#ff174542
  • editor.selectionForeground#e5f5c000
  • editorGroup.border#EFFFFF
  • editorGroupHeader.border#000000
  • editorGroupHeader.noTabsBackground#EFFFFF
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#000000
  • editorHint.foreground#EFFFFF
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#EFFFFF
  • editorIndentGuide.activeBackground1#EFFFFF
  • editorLineNumber.activeForeground#EFFFFF
  • editorLineNumber.foreground#FF1744
  • editorLink.activeForeground#0063a5
  • editorMarkerNavigation.background#060621
  • editorMarkerNavigationError.background#AB395B
  • editorMarkerNavigationWarning.background#5B7E7A
  • editorSuggestWidget.background#000000
  • editorSuggestWidget.border#EFFFFF
  • editorSuggestWidget.foreground#FFFFFF
  • editorSuggestWidget.highlightForeground#FF1744
  • editorSuggestWidget.selectedBackground#ff174550
  • editorWidget.background#000000
  • editorWidget.border#000000
  • extensionButton.separator#000
  • focusBorder#EFFFFF
  • foreground#ffffff
  • gitlens.trailingLineBackgroundColor#000000
  • gitlens.trailingLineForegroundColor#eeeeee79
  • icon.foreground#ffffff
  • input.background#000000
  • input.border#EFFFFF
  • input.foreground#FFFFFF
  • input.placeholderForeground#FF1744
  • list.activeSelectionBackground#EFFFFF80
  • list.hoverBackground#EFFFFF4b
  • list.inactiveFocusOutline#FF1744
  • list.inactiveSelectionBackground#EFFFFF80
  • menu.background#000000
  • menu.border#EFFFFF
  • merge.border#EFFFFF
  • notificationCenter.border#EFFFFF
  • notificationCenterHeader.background#000000
  • notificationCenterHeader.foreground#FF1744
  • notifications.background#000000
  • notifications.border#EFFFFF
  • notifications.foreground#FFFFFF
  • panel.background#000000
  • panel.border#EFFFFF
  • panel.dropBorder#EFFFFF
  • panelSection.border#EFFFFF
  • panelTitle.activeForeground#EFFFFF
  • panelTitle.inactiveForeground#FF1744
  • peekView.border#EFFFFF
  • peekViewTitle.background#000000
  • peekViewTitleLabel.foreground#FFFFFF
  • quickInput.background#000000
  • quickInputList.focusBackground#EFFFFF4b
  • scmGraph.historyItemHoverLabelForeground#000000
  • scmGraph.historyItemRefColor#00F0FF
  • scmGraph.historyItemRemoteRefColor#FF1744
  • scrollbarSlider.background#ffffff67
  • sideBar.background#000
  • sideBar.border#EFFFFF
  • sideBar.foreground#FFFFFF
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#EFFFFF8a
  • sideBarSectionHeader.foreground#FF1744
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#000000
  • statusBar.border#EFFFFF
  • statusBar.debuggingBackground#43B9D815
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#FF1744
  • statusBar.noFolderBackground#000000
  • statusBar.noFolderForeground#FFFFFF
  • statusBarItem.hoverBackground#101010
  • tab.activeBackground#000000
  • tab.activeBorder#EFFFFF
  • tab.activeForeground#FFFFFF
  • tab.activeModifiedBorder#EFFFFF
  • tab.border#EFFFFF
  • tab.hoverBackground#FF174436
  • tab.hoverBorder#FF1744
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#FFFFFF
  • tab.inactiveModifiedBorder#FFFFFF
  • tab.unfocusedActiveBackground#000000
  • tab.unfocusedActiveBorder#EFFFFF
  • tab.unfocusedActiveForeground#FFFFFF
  • tab.unfocusedHoverBackground#FF174436
  • tab.unfocusedInactiveBackground#000000
  • tab.unfocusedInactiveForeground#FFFFFF
  • terminal.ansiBlack#8f8f8f
  • terminal.ansiBlue#00F0FF
  • terminal.ansiBrightBlack#8f8f8f
  • terminal.ansiBrightBlue#00F0FF
  • terminal.ansiBrightCyan#4c00ff
  • terminal.ansiBrightGreen#00FF00
  • terminal.ansiBrightMagenta#FF1744
  • terminal.ansiBrightRed#FF1744
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFBF00
  • terminal.ansiCyan#4c00ff
  • terminal.ansiGreen#00FF00
  • terminal.ansiMagenta#FF1744
  • terminal.ansiRed#FF1744
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#FFBF00
  • terminal.border#EFFFFF
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#FF1744
  • titleBar.border#EFFFFF
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#FF1744

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#eeeeee92
string#eeeeee92
constant.numeric#eeeeee92
constant.language#eeeeee92
constant.character, constant.other#eeeeee92
variable#ffffff
keyword#FF1744bold
storage#FF1744bold
storage.type#00F0FFitalic
entity.name.class#FFBF00underline
entity.other.inherited-class#FFBF00italic underline
entity.name.function#FFBF00
variable.parameter#ccb299italic
entity.name.tag#FF1744bold
entity.other.attribute-name#ccb299
support.function#00F0FF
support.constant#00F0FF
support.type, support.class#00F0FFitalic
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#FF1744
markup.inserted#FFBF00
markup.changed#eeeeee92
constant.numeric.line-number.find-in-files - match#AE81FFA0
entity.name.filename.find-in-files#eeeeee92
variable.language#FFBF00
heading.1.markdown#FFBF00bold
punctuation.definition.heading.markdown#FFBF00
entity.name.section.markdown#FFBF00
punctuation.definition.list.begin.markdown#eeeeee92
meta.image.inline.markdown#eeeeee92
markup.bold.markdown#FFFFFFbold
markup.italic.markdown#FFFFFFitalic
markup.inline.raw.string.markdown#00F0FF
meta.separator.markdown#8f8f8f
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#eeeeee92
variable.other.object, punctuation.accessor, meta.brace.round, variable.other.readwrite, punctuation.separator.comma#FFFFFF