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.activeBorder#C5CBFF
  • activityBar.background#ececec
  • activityBar.border#dadada
  • activityBar.dropBorder#C5CBFF
  • activityBar.foreground#01325f
  • activityBar.inactiveForeground#2e87ec
  • activityBarBadge.background#fa8500
  • activityBarBadge.foreground#ececec
  • badge.background#fa8500
  • badge.foreground#ececec
  • banner.background#fa8500
  • banner.foreground#ececec
  • breadcrumb.activeSelectionForeground#fa8500
  • breadcrumb.background#ececec
  • breadcrumb.focusForeground#22282b
  • breadcrumb.foreground#252526
  • breadcrumbPicker.background#ececec
  • button.background#fa8500
  • button.foreground#ececec
  • debugExceptionWidget.background#ececec
  • debugExceptionWidget.border#C5CBFF
  • debugToolBar.background#ececec
  • descriptionForeground#686868b3
  • diffEditor.diagonalFill#cccccc33
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000025
  • dropdown.background#ececec
  • dropdown.border#C5CBFF
  • dropdown.foreground#af1400
  • editor.background#fafafa
  • editor.foreground#01325f
  • editor.lineHighlightBackground#dff2ffaa
  • editor.selectionBackground#b0ddfcaa
  • editorBracketMatch.border#b0ddfcaa
  • editorCursor.foreground#01325f
  • editorGroupHeader.tabsBackground#ececec
  • editorHoverWidget.background#ececec
  • editorLineNumber.activeForeground#fa8500
  • editorWhitespace.foreground#ececec
  • editorWidget.background#ececec
  • extensionButton.prominentBackground#fa8500
  • extensionButton.prominentHoverBackground#fa8500
  • input.background#ececec
  • input.border#2e87ec
  • inputOption.activeBorder#1b60a5
  • inputValidation.errorBackground#01325f
  • inputValidation.errorBorder#dc3958
  • inputValidation.infoBackground#01325f
  • inputValidation.infoBorder#1b60a5
  • inputValidation.warningBackground#01325f
  • list.activeSelectionBackground#b0ddfc
  • list.activeSelectionForeground#01325f
  • list.highlightForeground#fa8500
  • list.hoverBackground#c5e6fcbb
  • list.inactiveSelectionBackground#ececec
  • list.inactiveSelectionForeground#01325f
  • menu.background#ececec
  • menu.foreground#01325f
  • minimap.errorHighlight#ff1212b3
  • minimap.findMatchHighlight#d18616
  • minimap.selectionHighlight#b0ddfcbb
  • minimap.warningHighlight#cca700
  • panelTitle.activeBorder#fa8500
  • panelTitle.activeForeground#1b60a5
  • panelTitle.inactiveForeground#2e87ec
  • peekView.border#b0ddfc
  • peekViewEditor.background#ececec
  • peekViewEditor.matchHighlightBackground#b0ddfc
  • peekViewResult.background#ececec
  • peekViewTitle.background#ececec
  • pickerGroup.border#b0ddfc
  • pickerGroup.foreground#2e87ec
  • selection.background#b0ddfcbb
  • sideBar.background#fafafa
  • sideBar.border#ececec
  • sideBar.foreground#01325f
  • statusBar.background#e0e0e0
  • statusBar.debuggingBackground#ececec
  • statusBar.debuggingForeground#01325f
  • statusBar.foreground#01325f
  • statusBar.noFolderBackground#ececec
  • statusBarItem.remoteBackground#fa8500
  • statusBarItem.remoteForeground#ececec
  • tab.inactiveBackground#ececec
  • tab.lastPinnedBorder#2e87ec
  • terminal.background#fafafa
  • terminal.dropBackground#ececec
  • terminal.foreground#01325f
  • titleBar.activeBackground#e0e0e0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#bbb
comment.block, comment.block.documentation#b8b8b8
string#809440
constant.numeric#fa8500
constant.language#fa8500
constant.character, constant.other#fa8500
keyword#2d7ad3
storage#2e87ec
storage.type#2e87ec
entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution#07705f
entity.other.inherited-class#809440
entity.name.function#af1400
variable.parameter#01325f
entity.name.tag#01325f
entity.other.attribute-name#fa8500
support.function#d64000
support.constant#fa8500
support.type, support.class#ee9a54
support.other.variable
invalid#dc3958
invalid.deprecated#dc3958
meta.diff, meta.diff.header#ceb465
markup.deleted#3ca7ff
markup.changed#3ca7ff
markup.inserted#3ca7ff
markup.underline.link#ceb465
markup.quote#809440
markup.bold, markup.italic#fa8500
markup.inline.raw#fa8500
markup.heading, markup.heading.setext#af1400

Shiki preview

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

Loading...

FuZZy Theme - Coding Theme