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#000000
  • activityBar.border#02B5FC75
  • activityBar.foreground#02B5FC
  • activityBar.inactiveForeground#02B5FC75
  • activityBarBadge.background#000000
  • activityBarBadge.foreground#02B5FC
  • badge.background#000000
  • badge.foreground#02B5FC
  • breadcrumb.foreground#02B5FC
  • button.background#000000
  • button.foreground#FFFFFF
  • button.hoverBackground#000000
  • chat.avatarBackground#000000
  • chat.avatarForeground#02B5FC
  • chat.checkpointSeparator#02B5FC75
  • chat.editedFileForeground#02B5FC
  • chat.linesAddedForeground#19FC8E
  • chat.linesRemovedForeground#F43F1A
  • chat.requestBubbleHoverBackground#02B5FC32
  • chat.requestCodeBorder#02B5FC50
  • chat.slashCommandBackground#02B5FC25
  • chat.slashCommandForeground#02B5FC
  • chat.thinkingShimmer#02B5FC
  • checkbox.border#02B5FC75
  • contrastActiveBorder#00000000
  • contrastBorder#02B5FC75
  • debugExceptionWidget.background#000000
  • debugExceptionWidget.border#02B5FC
  • debugToolBar.background#000000
  • debugToolBar.border#02B5FC
  • diffEditor.insertedTextBackground#31958A55
  • diffEditor.insertedTextBorder#31958A55
  • diffEditor.removedTextBackground#892F4688
  • diffEditor.removedTextBorder#31958A55
  • dropdown.background#000000
  • dropdown.border#02B5FC75
  • dropdown.foreground#FFFFFF
  • editor.background#000000
  • editor.findMatchBackground#02B5FCFF
  • editor.findMatchBorder#00000000
  • editor.findMatchForeground#FFFFFFCC
  • editor.findMatchHighlightBackground#02B5FC66
  • editor.findMatchHighlightForeground#FFFFFF
  • editor.foreground#FFFFFF
  • editor.inactiveSelectionBackground#3924beA4
  • editor.lineHighlightBorder#02B5FC75
  • editor.selectionBackground#3924be
  • editor.selectionForeground#000c18
  • editorGroup.border#02B5FC75
  • editorGroupHeader.border#000000
  • editorGroupHeader.noTabsBackground#000000
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#000000
  • editorHint.foreground#E96401
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#02B5FC75
  • editorIndentGuide.activeBackground#505050
  • editorLineNumber.activeForeground#02B5FC
  • editorLineNumber.foreground#02B5FC
  • editorLink.activeForeground#0063a5
  • editorMarkerNavigation.background#060621
  • editorMarkerNavigationError.background#AB395B
  • editorMarkerNavigationWarning.background#5B7E7A
  • editorOverviewRuler.warningForeground#E96401
  • editorSuggestWidget.background#000000
  • editorSuggestWidget.border#02B5FC
  • editorSuggestWidget.foreground#FFFFFF
  • editorSuggestWidget.highlightForeground#E96401
  • editorSuggestWidget.selectedBackground#02B5FC75
  • editorWarning.foreground#E96401
  • editorWidget.background#000000
  • editorWidget.border#000000
  • focusBorder#02B5FC75
  • foreground#FFFFFF
  • gitDecoration.addedResourceForeground#19FC8E
  • gitDecoration.conflictingResourceForeground#E96401
  • gitDecoration.deletedResourceForeground#F43F1A
  • gitDecoration.ignoredResourceForeground#8f8f8f
  • gitDecoration.modifiedResourceForeground#F9B031
  • gitDecoration.renamedResourceForeground#02B5FC
  • gitDecoration.stageDeletedResourceForeground#F43F1A
  • gitDecoration.stageModifiedResourceForeground#F9B031
  • gitDecoration.submoduleResourceForeground#AE81FF
  • gitDecoration.untrackedResourceForeground#19FC8E
  • gitlens.trailingLineBackgroundColor#000000
  • gitlens.trailingLineForegroundColor#02B5FC
  • icon.foreground#FFFFFF
  • inlineChat.background#000000
  • inlineChat.border#02B5FC75
  • inlineChat.foreground#FFFFFF
  • inlineChatDiff.inserted#31958A55
  • inlineChatDiff.removed#892F4688
  • inlineChatInput.background#000000
  • inlineChatInput.border#02B5FC75
  • inlineChatInput.focusBorder#02B5FC
  • inlineChatInput.placeholderForeground#02B5FC75
  • input.background#02B5FC14
  • input.border#02B5FC75
  • input.foreground#FFFFFF
  • input.placeholderForeground#02B5FC75
  • list.activeSelectionBackground#02B5FCCC
  • list.hoverBackground#02B5FC75
  • list.inactiveFocusOutline#02B5FC
  • list.inactiveSelectionBackground#02B5FC60
  • list.warningForeground#E96401
  • menu.background#000000
  • menu.border#02B5FC75
  • merge.border#02B5FC75
  • notificationCenter.border#02B5FC
  • notificationCenterHeader.background#000000
  • notificationCenterHeader.foreground#FFFFFF
  • notifications.background#000000
  • notifications.border#02B5FC75
  • notifications.foreground#FFFFFF
  • panel.background#000000
  • panel.border#02B5FC75
  • panel.dropBorder#02B5FC
  • panelSection.border#02B5FC75
  • panelTitle.activeForeground#02B5FC
  • panelTitle.inactiveForeground#02B5FC75
  • peekView.border#02B5FC75
  • peekViewTitle.background#000000
  • peekViewTitleLabel.foreground#FFFFFF
  • quickInput.background#000000
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#02B5FCCC
  • scrollbarSlider.background#02B5FC40
  • scrollbarSlider.hoverBackground#02B5FC70
  • sideBar.background#000000
  • sideBar.border#02B5FC75
  • sideBar.foreground#FFFFFF
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#02B5FC75
  • sideBarSectionHeader.foreground#02B5FC
  • sideBarTitle.foreground#02B5FC
  • statusBar.background#000000
  • statusBar.border#02B5FC75
  • statusBar.debuggingBackground#02B5FC15
  • statusBar.debuggingForeground#02B5FC
  • statusBar.foreground#02B5FC
  • statusBar.noFolderBackground#000000
  • statusBar.noFolderForeground#02B5FC
  • statusBarItem.hoverBackground#101010
  • tab.activeBackground#000000
  • tab.activeBorder#FFFFFF
  • tab.activeForeground#FFFFFF
  • tab.activeModifiedBorder#02B5FC75
  • tab.border#02B5FC75
  • tab.hoverBackground#02B5FC25
  • tab.hoverBorder#02B5FC75
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#FFFFFF
  • tab.inactiveModifiedBorder#02B5FC75
  • tab.unfocusedActiveBackground#000000
  • tab.unfocusedActiveBorder#02B5FC
  • tab.unfocusedActiveForeground#FFFFFF
  • tab.unfocusedHoverBackground#02B5FC25
  • tab.unfocusedInactiveBackground#000000
  • tab.unfocusedInactiveForeground#FFFFFF
  • terminal.ansiBlack#8f8f8f
  • terminal.ansiBlue#5ccaef
  • terminal.ansiBrightBlack#8f8f8f
  • terminal.ansiBrightBlue#5ccaef
  • terminal.ansiBrightCyan#a57fff
  • terminal.ansiBrightGreen#98d800
  • terminal.ansiBrightMagenta#f57f00
  • terminal.ansiBrightRed#F43F1A
  • terminal.ansiBrightWhite#f1f1f1
  • terminal.ansiBrightYellow#F9B031
  • terminal.ansiCyan#a57fff
  • terminal.ansiGreen#98d800
  • terminal.ansiMagenta#f57f00
  • terminal.ansiRed#F43F1A
  • terminal.ansiWhite#f1f1f1
  • terminal.ansiYellow#F9B031
  • terminal.border#02B5FC75
  • textPreformat.foreground#02B5FC
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#02B5FC
  • titleBar.border#02B5FC75
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#02B5FC

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#FFFFFF
comment#787878
string#F9B031
constant.numeric#AE81FF
constant.language#AE81FF
constant.character, constant.other#AE81FF
variable
keyword#F43F1Abold
storage#F43F1Abold
storage.type#02B5FCitalic
entity.name.class#19FC8Eunderline
entity.other.inherited-class#19FC8Eitalic underline
entity.name.function#19FC8E
variable.parameter#E96401italic
entity.name.tag#F43F1Abold
entity.other.attribute-name#19FC8E
support.function#02B5FC
support.constant#02B5FC
support.type, support.class#02B5FCitalic
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#F43F1A
markup.inserted#19FC8E
markup.changed#F9B031
constant.numeric.line-number.find-in-files - match#AE81FFA0
entity.name.filename.find-in-files#F9B031
variable.language#19FC8E
heading.1.markdown#19FC8Ebold
punctuation.definition.heading.markdown#19FC8E
entity.name.section.markdown#19FC8E
punctuation.definition.list.begin.markdown#AE81FF
meta.image.inline.markdown#F9B031
markup.bold.markdown#FFFFFFbold
markup.italic.markdown#FFFFFFitalic
markup.inline.raw.string.markdown#02B5FC
meta.separator.markdown#8f8f8f
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#AE81FF
variable.other.object, punctuation.accessor, meta.brace.round, variable.other.readwrite, punctuation.separator.comma#FFFFFF
Ember High Contrast by danielhdzzz - VS Code Theme