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

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#FF69B4bold
storage#FF69B4bold
storage.type#67ffffitalic
entity.name.class#FFBF00underline
entity.other.inherited-class#FFBF00italic underline
entity.name.function#FFBF00
variable.parameter#cbb5ffitalic
entity.name.tag#FF69B4bold
entity.other.attribute-name#cbb5ff
support.function#67ffff
support.constant#67ffff
support.type, support.class#67ffffitalic
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#FF69B4
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#67ffff
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