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#82acce
  • activityBar.background#1c2029
  • activityBar.border#1d3041
  • activityBar.dropBorder#82acce
  • activityBar.foreground#82acce
  • activityBar.inactiveForeground#5d6b88
  • activityBarBadge.background#913000
  • activityBarBadge.foreground#ffffff
  • badge.background#913000
  • badge.foreground#ffffff
  • banner.background#913000
  • banner.foreground#ffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#1c2029
  • 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#1d3041
  • dropdown.border#1d3041
  • dropdown.foreground#82acce
  • editor.background#1c2029
  • editor.findMatchHighlightBackground#ea5c0055
  • editor.foreground#feeecd
  • editor.selectionBackground#264f78
  • editorBracketMatch.background#0064001a
  • editorBracketMatch.border#888888
  • editorCursor.foreground#aeafad
  • editorGroup.border#444444
  • editorGroup.dropBackground#53595d80
  • editorGroupHeader.noTabsBackground#1c2029
  • editorGroupHeader.tabsBackground#252526
  • editorHoverWidget.background#1d3041
  • editorHoverWidget.border#454545
  • editorHoverWidget.foreground#cccccc
  • editorHoverWidget.statusBarBackground#2c2c2d
  • editorIndentGuide.activeBackground#707070
  • editorIndentGuide.background#404040
  • editorLineNumber.activeForeground#82acce
  • editorLineNumber.foreground#5d6b88
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#f48771
  • editorMarkerNavigationInfo.background#75beff
  • editorMarkerNavigationWarning.background#cca700
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#1d3041
  • editorWidget.border#454545
  • editorWidget.foreground#cccccc
  • extensionButton.prominentBackground#49737a
  • extensionButton.prominentHoverBackground#578992
  • icon.foreground#c5c5c5
  • input.background#22415d
  • input.foreground#82acce
  • 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#1c2029
  • panel.border#80808059
  • panel.dropBorder#82acce
  • panelSection.border#80808059
  • panelSection.dropBackground#53595d80
  • panelTitle.activeBorder#82acce
  • panelTitle.activeForeground#82acce
  • panelTitle.inactiveForeground#5d6b88
  • 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#a33600
  • quickInput.background#1d3041
  • quickInput.foreground#ddcfbf
  • quickInputList.focusBackground#094771
  • quickInputList.focusForeground#ffffff
  • quickInputTitle.background#ffffff1b
  • scrollbarSlider.activeBackground#223d53
  • scrollbarSlider.background#1d3041
  • scrollbarSlider.hoverBackground#223d53
  • sideBar.background#1c2029
  • sideBar.border#1d3041
  • sideBar.dropBackground#53595d80
  • sideBar.foreground#ceb797
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#cccccc33
  • sideBarSectionHeader.foreground#82acce
  • statusBar.background#1d3041
  • statusBar.debuggingBackground#cc6633
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#1d3041
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#ffffff2e
  • statusBarItem.errorBackground#a33600
  • statusBarItem.errorForeground#ffffff
  • statusBarItem.hoverBackground#ffffff1f
  • statusBarItem.prominentBackground#00000080
  • statusBarItem.prominentForeground#ffffff
  • statusBarItem.prominentHoverBackground#0000004d
  • statusBarItem.remoteBackground#16825d
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#1d3041
  • tab.activeForeground#ffffff
  • tab.border#454545
  • tab.inactiveBackground#1c2029
  • tab.inactiveForeground#ffffff80
  • titleBar.activeBackground#1d3041
  • titleBar.activeForeground#cccccc
  • titleBar.border#454545
  • titleBar.inactiveBackground#1d304199
  • titleBar.inactiveForeground#cccccc99

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#5d6b88
comment.block, comment.block.documentation#82acce
string#ffce8e
constant.numeric#a33600
constant.language#a33600
constant.character, constant.other#b13b00
keyword#b4612d
storage#b13b00
storage.type#a33600italic
entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution#a33600
entity.other.inherited-class#a33600italic
entity.name.function#ee9a54
variable.parameter#c27d45italic
entity.name.tag#aa663b
entity.other.attribute-name#ceb465
support.function#d64000
support.constant#aa663b
support.type, support.class#ee9a54italic
support.other.variable
invalid#b13b00
invalid.deprecated#b13b00
meta.diff, meta.diff.header#ceb465italic
markup.deleted#3ca7ff
markup.changed#3ca7ff
markup.inserted#3ca7ff
markup.underline.link#ceb465
markup.quote#22aa44
markup.bold, markup.italic#aa663b
markup.italicitalic
markup.inline.raw#aa663b
markup.heading, markup.heading.setext#b13b00

Shiki preview

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

Loading...