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

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#00F0FFitalic
entity.name.class#FFD700underline
entity.other.inherited-class#FFD700italic underline
entity.name.function#FFD700
variable.parameter#FD971Fitalic
entity.name.tag#FF69B4bold
entity.other.attribute-name#ffb162
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#FF69B4
markup.inserted#FFD700
markup.changed#eeeeee92
constant.numeric.line-number.find-in-files - match#AE81FFA0
entity.name.filename.find-in-files#eeeeee92
variable.language#FFD700
heading.1.markdown#FFD700bold
punctuation.definition.heading.markdown#FFD700
entity.name.section.markdown#FFD700
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