Skip to main content
CodingTheme

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#051336
  • badge.background#0063a5
  • button.background#2B3C5D
  • debugExceptionWidget.background#051336
  • debugExceptionWidget.border#AB395B
  • debugToolBar.background#051336
  • diffEditor.insertedTextBackground#31958A55
  • diffEditor.removedTextBackground#892F4688
  • dropdown.background#181f2f
  • editor.background#000c18
  • editor.findMatchHighlightBackground#eeeeee44
  • editor.foreground#6688cc
  • editor.lineHighlightBackground#04225e
  • editor.selectionBackground#04225e
  • editorCursor.foreground#ddbb88
  • editorGroup.border#2b2b4a
  • editorGroup.dropBackground#25375daa
  • editorGroupHeader.tabsBackground#1c1c2a
  • editorHoverWidget.background#000c38
  • editorHoverWidget.border#0544bb
  • editorIndentGuide.activeBackground#204972
  • editorIndentGuide.background#002952
  • editorLineNumber.activeForeground#80a2c2
  • editorLineNumber.foreground#FFFFFF4d
  • editorLink.activeForeground#0063a5
  • editorMarkerNavigation.background#060621
  • editorMarkerNavigationError.background#AB395B
  • editorMarkerNavigationWarning.background#5B7E7A
  • editorWidget.background#262641
  • extensionButton.prominentBackground#0544bb
  • extensionButton.prominentHoverBackground#00429999
  • focusBorder#596F99
  • input.background#181f2f
  • inputOption.activeBorder#1D4A87
  • inputValidation.errorBackground#A22D44
  • inputValidation.errorBorder#AB395B
  • inputValidation.infoBackground#051336
  • inputValidation.infoBorder#384078
  • inputValidation.warningBackground#5B7E7A
  • inputValidation.warningBorder#5B7E7A
  • list.activeSelectionBackground#08286b
  • list.dropBackground#041D52
  • list.highlightForeground#0063a5
  • list.hoverBackground#061940
  • list.inactiveSelectionBackground#152037
  • minimap.selectionHighlight#04225e
  • panel.border#2b2b4a
  • peekView.border#2b2b4a
  • peekViewEditor.background#10192c
  • peekViewEditor.matchHighlightBackground#eeeeee33
  • peekViewResult.background#060621
  • peekViewResult.matchHighlightBackground#eeeeee44
  • peekViewTitle.background#10192c
  • pickerGroup.border#596F99
  • pickerGroup.foreground#596F99
  • ports.iconRunningProcessForeground#80a2c2
  • progressBar.background#0063a5
  • quickInputList.focusBackground#08286b
  • scrollbar.shadow#515E91AA
  • scrollbarSlider.activeBackground#3B3F5188
  • scrollbarSlider.background#1F2230AA
  • scrollbarSlider.hoverBackground#3B3F5188
  • sideBar.background#060621
  • sideBarSectionHeader.background#10192c
  • statusBar.background#10192c
  • statusBar.debuggingBackground#10192c
  • statusBar.noFolderBackground#10192c
  • statusBarItem.prominentBackground#0063a5
  • statusBarItem.prominentHoverBackground#0063a5dd
  • statusBarItem.remoteBackground#0063a5
  • tab.activeBorder#0780b8
  • tab.border#2b2b4a
  • tab.inactiveBackground#10192c
  • tab.lastPinnedBorder#2b3c5d
  • titleBar.activeBackground#10192c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#6688cc
meta.embedded, source.groovy.embedded#6688cc
string#22aa44
comment, comment.block.js#457dadd3italic
support.type, support.class, entity.name.function#940ce9ccitalic
constant.numeric#2859e2
entity.other.attribute-name#ddbb88italic
entity.name.tag#144dc7
variable
keyword#1220ec
storage#225588
storage.type#9966b8italic
entity.name.class, entity.name.scope-resolution, entity.name.namespace#ffeebbunderline
constant.language#AE81FF
entity.other.inherited-class#ddbb88italic underline
variable.parameter#2277ffitalic
support.function#9966b8
support.constant#9966b8
support.other.variable
invalid#A22D44
invalid.deprecated#A22D44
meta.diff, meta.diff.header#E0EDDDitalic
markup.deleted#dc322f
markup.changed#cb4b16
markup.inserted#1c5a54
markup.quote#22aa44
markup.bold, markup.italic#22aa44
markup.boldbold
markup.italicitalic
markup.inline.raw#9966b8
markup.heading, markup.heading.setext#6688ccbold

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Abyss+ by Praveer Singh Chauhan - VS Code Theme