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.activeBorder#C5CBFF
  • activityBar.background#22282b
  • activityBar.border#373F42
  • activityBar.dropBorder#C5CBFF
  • activityBar.foreground#C5CBFF
  • activityBar.inactiveForeground#8d9794
  • activityBarBadge.background#913000
  • activityBarBadge.foreground#ffffff
  • badge.background#913000
  • badge.foreground#ffffff
  • banner.background#913000
  • banner.foreground#ffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#22282b
  • breadcrumb.focusForeground#e0e0e0
  • breadcrumb.foreground#cccccccc
  • breadcrumbPicker.background#252526
  • button.background#913000
  • button.foreground#ffffff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#a31515
  • debugToolBar.background#333333
  • descriptionForeground#ccccccb3
  • diffEditor.diagonalFill#cccccc33
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#22282b
  • dropdown.border#22282b
  • dropdown.foreground#C5CBFF
  • editor.background#22282b
  • editor.findMatchHighlightBackground#ea5c0055
  • editor.foreground#A2C1D1
  • editor.selectionBackground#264f78
  • editorBracketMatch.background#0064001a
  • editorBracketMatch.border#888888
  • editorCursor.foreground#aeafad
  • editorGroup.border#444444
  • editorGroup.dropBackground#53595d80
  • editorGroupHeader.noTabsBackground#22282b
  • editorGroupHeader.tabsBackground#252526
  • editorHoverWidget.background#22282b
  • editorHoverWidget.border#454545
  • editorHoverWidget.foreground#cccccc
  • editorHoverWidget.statusBarBackground#2c2c2d
  • editorIndentGuide.activeBackground#707070
  • editorIndentGuide.background#404040
  • editorLineNumber.activeForeground#C5CBFF
  • editorLineNumber.foreground#757999
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#f48771
  • editorMarkerNavigationInfo.background#75beff
  • editorMarkerNavigationWarning.background#cca700
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#22282b
  • editorWidget.border#454545
  • editorWidget.foreground#cccccc
  • extensionButton.prominentBackground#49737a
  • extensionButton.prominentHoverBackground#578992
  • icon.foreground#c5c5c5
  • input.background#22415d
  • input.foreground#C5CBFF
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBackground#007fd466
  • inputOption.activeBorder#007acc00
  • inputOption.activeForeground#ffffff
  • inputValidation.errorBackground#5a1d1d
  • inputValidation.errorBorder#be1100
  • inputValidation.infoBackground#063b49
  • inputValidation.infoBorder#007acc
  • inputValidation.warningBackground#352a05
  • inputValidation.warningBorder#b89500
  • list.activeSelectionBackground#094771
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#383b3d
  • list.highlightForeground#18a3ff
  • list.hoverBackground#2a2d2e
  • list.inactiveSelectionBackground#37373d
  • minimap.errorHighlight#ff1212b3
  • minimap.findMatchHighlight#d18616
  • minimap.selectionHighlight#264f78
  • minimap.warningHighlight#cca700
  • panel.background#22282b
  • panel.border#80808059
  • panel.dropBorder#C5CBFF
  • panelSection.border#80808059
  • panelSection.dropBackground#53595d80
  • panelTitle.activeBorder#C5CBFF
  • panelTitle.activeForeground#C5CBFF
  • panelTitle.inactiveForeground#494239
  • peekView.border#007acc
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#252526
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewTitle.background#1e1e1e
  • ports.iconRunningProcessForeground#369432
  • progressBar.background#C5CBFF
  • quickInput.background#22282b
  • quickInput.foreground#ddcfbf
  • quickInputList.focusBackground#094771
  • quickInputList.focusForeground#ffffff
  • quickInputTitle.background#ffffff1b
  • scrollbarSlider.activeBackground#223d53
  • scrollbarSlider.background#373F42
  • scrollbarSlider.hoverBackground#223d53
  • sideBar.background#22282b
  • sideBar.border#373F42
  • sideBar.dropBackground#53595d80
  • sideBar.foreground#c8dbe4
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#cccccc33
  • sideBarSectionHeader.foreground#C5CBFF
  • statusBar.background#373F42
  • statusBar.debuggingBackground#cc6633
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#373F42
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#ffffff2e
  • statusBarItem.errorBackground#C5CBFF
  • statusBarItem.errorForeground#ffffff
  • statusBarItem.hoverBackground#ffffff1f
  • statusBarItem.prominentBackground#00000080
  • statusBarItem.prominentForeground#ffffff
  • statusBarItem.prominentHoverBackground#0000004d
  • statusBarItem.remoteBackground#16825d
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#373F42
  • tab.activeForeground#ffffff
  • tab.border#ffffff80
  • tab.inactiveBackground#22282b
  • tab.inactiveForeground#ffffff80
  • titleBar.activeBackground#373F42
  • titleBar.activeForeground#cccccc
  • titleBar.border#7a7a7a80
  • titleBar.inactiveBackground#22282b99
  • titleBar.inactiveForeground#cccccc99

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#9DBBCC
comment.block, comment.block.documentation#D4FAFB
string#789BA1
constant.numeric#C5CBFF
constant.language#C5CBFF
constant.character, constant.other#9FBCCA
keyword#886d78
storage#9FBCCA
storage.type#C5CBFFitalic
entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution#C5CBFF
entity.other.inherited-class#C5CBFFitalic
entity.name.function#C5CFFF
variable.parameter#ab8792italic
entity.name.tag#bcab8a
entity.other.attribute-name#b5917d
support.function#927782
support.constant#789BA1
support.type, support.class#ccb7aeitalic
support.other.variable
invalid#9FBCCA
invalid.deprecated#9FBCCA
meta.diff, meta.diff.header#cdc8d0italic
markup.deleted#cdb7be
markup.changed#cdb7be
markup.inserted#cdb7be
markup.underline.link#cdc8d0
markup.quote#b4939d
markup.bold, markup.italic#cdb7beitalic
markup.italicitalic
markup.inline.raw#cdb7be
markup.heading, markup.heading.setext#9FBCCA

Shiki preview

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

Loading...