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

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#fd2121bold
storage#fd2121bold
storage.type#C792EAitalic
entity.name.class#ffee00underline
entity.other.inherited-class#ffee00italic underline
entity.name.function#ffee00
variable.parameter#ffa845italic
entity.name.tag#fd2121bold
entity.other.attribute-name#ffa845
support.function#C792EA
support.constant#C792EA
support.type, support.class#C792EAitalic
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#fd2121
markup.inserted#ffee00
markup.changed#eeeeee92
constant.numeric.line-number.find-in-files - match#AE81FFA0
entity.name.filename.find-in-files#eeeeee92
variable.language#ffee00
heading.1.markdown#ffee00bold
punctuation.definition.heading.markdown#ffee00
entity.name.section.markdown#ffee00
punctuation.definition.list.begin.markdown#eeeeee92
meta.image.inline.markdown#eeeeee92
markup.bold.markdown#FFFFFFbold
markup.italic.markdown#FFFFFFitalic
markup.inline.raw.string.markdown#C792EA
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