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#00FFAA
  • activityBar.foreground#00FFAA
  • activityBar.inactiveForeground#FF5F1F
  • activityBarBadge.background#000
  • activityBarBadge.foreground#FF5F1F
  • badge.background#000000
  • badge.foreground#00FFAA
  • breadcrumb.foreground#FFFFFF
  • button.background#000000
  • button.border#00FFAA
  • button.foreground#FF5F1F
  • button.hoverBackground#000000
  • checkbox.border#00FFAA
  • contrastActiveBorder#000000
  • contrastBorder#000000
  • debugExceptionWidget.background#000000
  • debugExceptionWidget.border#00FFAA
  • debugToolBar.background#000000
  • debugToolBar.border#00FFAA
  • 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#ff5f1f38
  • editor.findMatchBorder#FF5F1F6e
  • editor.findMatchForeground#ffac8b
  • editor.findMatchHighlightBackground#bebebe50
  • editor.foreground#FFFFFF
  • editor.inactiveSelectionBackground#ff5f1f3a
  • editor.lineHighlightBorder#00ffaa33
  • editor.selectionBackground#ff5f1f3a
  • editor.selectionForeground#e5f5c000
  • editorGroup.border#00FFAA
  • editorGroupHeader.border#000000
  • editorGroupHeader.noTabsBackground#00FFAA
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#000000
  • editorHint.foreground#00FFAA
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#00FFAA
  • editorIndentGuide.activeBackground1#00FFAA
  • editorLineNumber.activeForeground#00FFAA
  • editorLineNumber.foreground#FF5F1F
  • editorLink.activeForeground#0063a5
  • editorMarkerNavigation.background#060621
  • editorMarkerNavigationError.background#AB395B
  • editorMarkerNavigationWarning.background#5B7E7A
  • editorSuggestWidget.background#000000
  • editorSuggestWidget.border#00FFAA
  • editorSuggestWidget.foreground#FFFFFF
  • editorSuggestWidget.highlightForeground#FF5F1F
  • editorSuggestWidget.selectedBackground#00FFAA4b
  • editorWidget.background#000000
  • editorWidget.border#000000
  • extensionButton.separator#000
  • focusBorder#00FFAA
  • foreground#ffffff
  • gitlens.trailingLineBackgroundColor#000000
  • gitlens.trailingLineForegroundColor#eeeeee79
  • icon.foreground#ffffff
  • input.background#000000
  • input.border#00FFAA
  • input.foreground#FFFFFF
  • input.placeholderForeground#FF5F1F
  • list.activeSelectionBackground#00FFAA80
  • list.hoverBackground#00FFAA4b
  • list.inactiveFocusOutline#FF5F1F
  • list.inactiveSelectionBackground#00FFAA80
  • menu.background#000000
  • menu.border#00FFAA
  • merge.border#00FFAA
  • notificationCenter.border#00FFAA
  • notificationCenterHeader.background#000000
  • notificationCenterHeader.foreground#FF5F1F
  • notifications.background#000000
  • notifications.border#00FFAA
  • notifications.foreground#FFFFFF
  • panel.background#000000
  • panel.border#00FFAA
  • panel.dropBorder#00FFAA
  • panelSection.border#00FFAA
  • panelTitle.activeForeground#00FFAA
  • panelTitle.inactiveForeground#FF5F1F
  • peekView.border#00FFAA
  • peekViewTitle.background#000000
  • peekViewTitleLabel.foreground#FFFFFF
  • quickInput.background#000000
  • quickInputList.focusBackground#00FFAA4b
  • scmGraph.historyItemHoverLabelForeground#000000
  • scmGraph.historyItemRefColor#FFD700
  • scmGraph.historyItemRemoteRefColor#00FFAA
  • scrollbarSlider.background#00FFAA80
  • sideBar.background#000
  • sideBar.border#00FFAA
  • sideBar.foreground#FFFFFF
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#00FFAA8a
  • sideBarSectionHeader.foreground#FF5F1F
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#000000
  • statusBar.border#00FFAA
  • statusBar.debuggingBackground#43B9D815
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#FF5F1F
  • statusBar.noFolderBackground#000000
  • statusBar.noFolderForeground#FFFFFF
  • statusBarItem.hoverBackground#101010
  • tab.activeBackground#000000
  • tab.activeBorder#00FFAA
  • tab.activeForeground#FFFFFF
  • tab.activeModifiedBorder#00FFAA
  • tab.border#00FFAA
  • tab.hoverBackground#FF5F1F36
  • tab.hoverBorder#FF5F1F
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#FFFFFF
  • tab.inactiveModifiedBorder#FFFFFF
  • tab.unfocusedActiveBackground#000000
  • tab.unfocusedActiveBorder#00FFAA
  • tab.unfocusedActiveForeground#FFFFFF
  • tab.unfocusedHoverBackground#FF5F1F36
  • tab.unfocusedInactiveBackground#000000
  • tab.unfocusedInactiveForeground#FFFFFF
  • terminal.ansiBlack#8f8f8f
  • terminal.ansiBlue#00F0FF
  • terminal.ansiBrightBlack#8f8f8f
  • terminal.ansiBrightBlue#00F0FF
  • terminal.ansiBrightCyan#4c00ff
  • terminal.ansiBrightGreen#00FFAA
  • terminal.ansiBrightMagenta#ff71ff
  • terminal.ansiBrightRed#ff0000
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFD700
  • terminal.ansiCyan#4c00ff
  • terminal.ansiGreen#00FFAA
  • terminal.ansiMagenta#ff71ff
  • terminal.ansiRed#ff0000
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#FFD700
  • terminal.border#00FFAA
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#FF5F1F
  • titleBar.border#00FFAA
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#FF5F1F

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#FFD700bold
storage#FFD700bold
storage.type#00FFAAitalic
entity.name.class#FF5F1Funderline
entity.other.inherited-class#FF5F1Fitalic underline
entity.name.function#FF5F1F
variable.parameter#cbb5ffitalic
entity.name.tag#FFD700bold
entity.other.attribute-name#cbb5ff
support.function#00FFAA
support.constant#00FFAA
support.type, support.class#00FFAAitalic
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#FFD700
markup.inserted#FF5F1F
markup.changed#eeeeee92
constant.numeric.line-number.find-in-files - match#AE81FFA0
entity.name.filename.find-in-files#eeeeee92
variable.language#FF5F1F
heading.1.markdown#FF5F1Fbold
punctuation.definition.heading.markdown#FF5F1F
entity.name.section.markdown#FF5F1F
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