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#DC143C
  • activityBar.foreground#DC143C
  • activityBar.inactiveForeground#FFCE73
  • activityBarBadge.background#000
  • activityBarBadge.foreground#FFCE73
  • badge.background#000000
  • badge.foreground#DC143C
  • breadcrumb.foreground#FFFFFF
  • button.background#000000
  • button.border#DC143C
  • button.foreground#FFCE73
  • button.hoverBackground#000000
  • checkbox.border#DC143C
  • contrastActiveBorder#000000
  • contrastBorder#000000
  • debugExceptionWidget.background#000000
  • debugExceptionWidget.border#DC143C
  • debugToolBar.background#000000
  • debugToolBar.border#DC143C
  • 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#FFCE736e
  • editor.findMatchBorder#FFCE736e
  • editor.findMatchForeground#ffdfa4
  • editor.findMatchHighlightBackground#bebebe6e
  • editor.foreground#FFFFFF
  • editor.inactiveSelectionBackground#ffce7342
  • editor.lineHighlightBorder#dc143c33
  • editor.selectionBackground#ffce7342
  • editor.selectionForeground#e5f5c000
  • editorGroup.border#DC143C
  • editorGroupHeader.border#000000
  • editorGroupHeader.noTabsBackground#DC143C
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#000000
  • editorHint.foreground#DC143C
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#DC143C
  • editorIndentGuide.activeBackground1#DC143C
  • editorLineNumber.activeForeground#DC143C
  • editorLineNumber.foreground#FFCE73
  • editorLink.activeForeground#0063a5
  • editorMarkerNavigation.background#060621
  • editorMarkerNavigationError.background#AB395B
  • editorMarkerNavigationWarning.background#5B7E7A
  • editorSuggestWidget.background#000000
  • editorSuggestWidget.border#DC143C
  • editorSuggestWidget.foreground#FFFFFF
  • editorSuggestWidget.highlightForeground#FFCE73
  • editorSuggestWidget.selectedBackground#dc143c63
  • editorWidget.background#000000
  • editorWidget.border#000000
  • extensionButton.separator#000
  • foreground#ffffff
  • gitlens.trailingLineBackgroundColor#000000
  • gitlens.trailingLineForegroundColor#eeeeee79
  • icon.foreground#ffffff
  • input.background#000000
  • input.border#DC143C
  • input.foreground#FFFFFF
  • input.placeholderForeground#FFCE73
  • list.activeSelectionBackground#DC143C80
  • list.hoverBackground#DC143C4b
  • list.inactiveFocusOutline#FFCE73
  • list.inactiveSelectionBackground#DC143C80
  • menu.background#000000
  • menu.border#DC143C
  • merge.border#DC143C
  • notificationCenter.border#DC143C
  • notificationCenterHeader.background#000000
  • notificationCenterHeader.foreground#FFCE73
  • notifications.background#000000
  • notifications.border#DC143C
  • notifications.foreground#FFFFFF
  • panel.background#000000
  • panel.border#DC143C
  • panel.dropBorder#DC143C
  • panelSection.border#DC143C
  • panelTitle.activeForeground#DC143C
  • panelTitle.inactiveForeground#FFCE73
  • peekView.border#DC143C
  • peekViewTitle.background#000000
  • peekViewTitleLabel.foreground#FFFFFF
  • quickInput.background#000000
  • quickInputList.focusBackground#DC143C4b
  • scmGraph.historyItemHoverLabelForeground#000000
  • scmGraph.historyItemRefColor#00F0FF
  • scmGraph.historyItemRemoteRefColor#DC143C
  • scrollbarSlider.background#dc143c62
  • sideBar.background#000
  • sideBar.border#DC143C
  • sideBar.foreground#FFFFFF
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#DC143C8a
  • sideBarSectionHeader.foreground#FFCE73
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#000000
  • statusBar.border#DC143C
  • statusBar.debuggingBackground#43B9D815
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#FFCE73
  • statusBar.noFolderBackground#000000
  • statusBar.noFolderForeground#FFFFFF
  • statusBarItem.hoverBackground#101010
  • tab.activeBackground#000000
  • tab.activeBorder#DC143C
  • tab.activeForeground#FFFFFF
  • tab.activeModifiedBorder#DC143C
  • tab.border#DC143C
  • tab.hoverBackground#FFCE73
  • tab.hoverBorder#FFCE73
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#FFFFFF
  • tab.inactiveModifiedBorder#FFFFFF
  • tab.unfocusedActiveBackground#000000
  • tab.unfocusedActiveBorder#DC143C
  • tab.unfocusedActiveForeground#FFFFFF
  • tab.unfocusedHoverBackground#FFCE73
  • 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#ff71ff
  • terminal.ansiBrightRed#DC143C
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFCE73
  • terminal.ansiCyan#4c00ff
  • terminal.ansiGreen#00FF00
  • terminal.ansiMagenta#ff71ff
  • terminal.ansiRed#DC143C
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#FFCE73
  • terminal.border#DC143C
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#FFCE73
  • titleBar.border#DC143C
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#FFCE73

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#DC143Cbold
storage#DC143Cbold
storage.type#00F0FFitalic
entity.name.class#FFCE73underline
entity.other.inherited-class#FFCE73italic underline
entity.name.function#FFCE73
variable.parameter#99cca2italic
entity.name.tag#DC143Cbold
entity.other.attribute-name#99cca2
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#DC143C
markup.inserted#FFCE73
markup.changed#eeeeee92
constant.numeric.line-number.find-in-files - match#AE81FFA0
entity.name.filename.find-in-files#eeeeee92
variable.language#FFCE73
heading.1.markdown#FFCE73bold
punctuation.definition.heading.markdown#FFCE73
entity.name.section.markdown#FFCE73
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
Omenlight: High Contrast Theme Pack by Batuhan Belbüken - VS Code Theme