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#454545
  • activityBar.background#131313
  • activityBar.border#454545
  • activityBar.dropBorder#454545
  • activityBar.foreground#d8ccab
  • activityBar.inactiveForeground#2e87ec
  • activityBarBadge.background#f7b365
  • activityBarBadge.foreground#131313
  • badge.background#f7b365
  • badge.foreground#131313
  • banner.background#f7b365
  • banner.foreground#131313
  • breadcrumb.activeSelectionForeground#f7b365
  • breadcrumb.background#292929
  • breadcrumb.focusForeground#f7b365
  • breadcrumb.foreground#d8ccab
  • breadcrumbPicker.background#131313
  • button.background#f7b365
  • button.foreground#131313
  • debugExceptionWidget.background#131313
  • debugExceptionWidget.border#454545
  • debugToolBar.background#131313
  • descriptionForeground#686868b3
  • diffEditor.diagonalFill#cccccc33
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000025
  • dropdown.background#131313
  • dropdown.border#454545
  • dropdown.foreground#af1400
  • editor.background#050505
  • editor.foreground#d8ccab
  • editor.lineHighlightBackground#262626
  • editor.selectionBackground#b0ddfcaa
  • editorBracketMatch.border#f7b365
  • editorCursor.foreground#d8ccab
  • editorGroupHeader.tabsBackground#131313
  • editorHoverWidget.background#222222
  • editorHoverWidget.border#454545
  • editorHoverWidget.foreground#d8ccab
  • editorHoverWidget.statusBarBackground#2c2c2d
  • editorLineNumber.activeForeground#f7b365
  • editorWhitespace.foreground#131313
  • editorWidget.background#131313
  • extensionButton.prominentBackground#f7b365
  • extensionButton.prominentHoverBackground#f7b365
  • input.background#131313
  • input.border#2e87ec
  • inputOption.activeBorder#1b60a5
  • inputValidation.errorBackground#d8ccab
  • inputValidation.errorBorder#dc3958
  • inputValidation.infoBackground#d8ccab
  • inputValidation.infoBorder#1b60a5
  • inputValidation.warningBackground#d8ccab
  • list.activeSelectionBackground#454545
  • list.activeSelectionForeground#d8ccab
  • list.highlightForeground#1b60a5
  • list.hoverBackground#454545
  • list.inactiveSelectionBackground#1b60a5
  • list.inactiveSelectionForeground#d8ccab
  • menu.background#131313
  • menu.foreground#d8ccab
  • minimap.errorHighlight#ff1212b3
  • minimap.findMatchHighlight#d18616
  • minimap.selectionHighlight#b0ddfcbb
  • minimap.warningHighlight#cca700
  • panelTitle.activeBorder#f7b365
  • panelTitle.activeForeground#2e87ec
  • panelTitle.inactiveForeground#1b60a5
  • peekView.border#b0ddfc
  • peekViewEditor.background#131313
  • peekViewEditor.matchHighlightBackground#454545
  • peekViewResult.background#131313
  • peekViewTitle.background#131313
  • pickerGroup.border#b0ddfc
  • pickerGroup.foreground#2e87ec
  • quickInput.background#222222
  • quickInput.foreground#d8ccab
  • quickInputList.focusBackground#454545
  • quickInputList.focusForeground#f7b365
  • quickInputList.focusIconForeground#f7b365
  • quickInputTitle.background#ffffff1b
  • selection.background#b0ddfcbb
  • sideBar.background#131313
  • sideBar.border#131313
  • sideBar.foreground#d8ccab
  • statusBar.background#131313
  • statusBar.debuggingBackground#131313
  • statusBar.debuggingForeground#d8ccab
  • statusBar.foreground#d8ccab
  • statusBar.noFolderBackground#131313
  • statusBarItem.remoteBackground#f7b365
  • statusBarItem.remoteForeground#131313
  • tab.activeForeground#55a4ff
  • tab.border#454545
  • tab.hoverForeground#55a4ff
  • tab.inactiveBackground#131313
  • tab.inactiveForeground#2e87ec
  • tab.lastPinnedBorder#2e87ec
  • tab.unfocusedActiveForeground#2e87ec
  • tab.unfocusedInactiveForeground#1b60a5
  • terminal.background#131313
  • terminal.dropBackground#131313
  • terminal.foreground#d8ccab
  • titleBar.activeBackground#1f1f1f
  • titleBar.activeForeground#d8ccab
  • titleBar.border#454545
  • titleBar.inactiveBackground#303030
  • titleBar.inactiveForeground#f7b365

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#bbb—
comment.block, comment.block.documentation#b8b8b8—
string#809440—
constant.numeric#f7b365—
constant.language#f7b365—
constant.character, constant.other#f7b365—
keyword#2d7ad3—
storage#2e87ec—
storage.type#2e87ec—
entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution#139680—
entity.other.inherited-class#809440—
entity.name.function#d49100—
variable.parameter#d8ccab—
entity.name.tag#d8ccab—
entity.other.attribute-name#f7b365—
support.function#d64000—
support.constant#f7b365—
support.type, support.class#d8ccab—
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#f7b365—
markup.inline.raw#f7b365—
markup.heading, markup.heading.setext#af1400—
FuZZy Theme by Decameron - VS Code Theme