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

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#ff4e00bold
storage#ff4e00bold
storage.type#00e1ffitalic
entity.name.class#FFBF00underline
entity.other.inherited-class#FFBF00italic underline
entity.name.function#FFBF00
variable.parameter#68c579italic
entity.name.tag#ff4e00bold
entity.other.attribute-name#68c579
support.function#00e1ff
support.constant#00e1ff
support.type, support.class#00e1ffitalic
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#ff4e00
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#00e1ff
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