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

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#FD4CB3bold
storage#FD4CB3bold
storage.type#3cd8ffitalic
entity.name.class#98d800underline
entity.other.inherited-class#98d800italic underline
entity.name.function#98d800
variable.parameter#ff8000italic
entity.name.tag#FD4CB3bold
entity.other.attribute-name#ffab57
support.function#3cd8ff
support.constant#3cd8ff
support.type, support.class#3cd8ffitalic
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#FD4CB3
markup.inserted#98d800
markup.changed#eeeeee92
constant.numeric.line-number.find-in-files - match#AE81FFA0
entity.name.filename.find-in-files#eeeeee92
variable.language#98d800
heading.1.markdown#98d800bold
punctuation.definition.heading.markdown#98d800
entity.name.section.markdown#98d800
punctuation.definition.list.begin.markdown#eeeeee92
meta.image.inline.markdown#eeeeee92
markup.bold.markdown#FFFFFFbold
markup.italic.markdown#FFFFFFitalic
markup.inline.raw.string.markdown#3cd8ff
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