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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#ff8000
string#eeeeee92
constant.numeric#eeeeee92
constant.language#eeeeee92
constant.character, constant.other#eeeeee92
variable#ffffff
keyword#fF4DFFbold
storage#fF4DFFbold
storage.type#00F0FFitalic
entity.name.class#00FF00underline
entity.other.inherited-class#00FF00italic underline
entity.name.function#00FF00
variable.parameter#FD971Fitalic
entity.name.tag#fF4DFFbold
entity.other.attribute-name#ffbd7a
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#fF4DFF
markup.inserted#00FF00
markup.changed#eeeeee92
constant.numeric.line-number.find-in-files - match#AE81FFA0
entity.name.filename.find-in-files#eeeeee92
variable.language#00FF00
heading.1.markdown#00FF00bold
punctuation.definition.heading.markdown#00FF00
entity.name.section.markdown#00FF00
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