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.activeBackground#353a3e
  • activityBar.background#181a1c
  • activityBar.border#424547
  • activityBar.foreground#d6dade
  • activityBar.inactiveForeground#8b8f93
  • activityBarBadge.background#b0b6bb
  • activityBarBadge.foreground#202224
  • agents.background#181a1c
  • agentsPanel.background#202224
  • agentsPanel.border#424547
  • agentsPanel.foreground#d6dade
  • badge.background#b0b6bb
  • badge.foreground#202224
  • breadcrumb.background#202224
  • breadcrumb.focusForeground#d6dade
  • breadcrumb.foreground#8e9296
  • breadcrumbPicker.background#181a1c
  • button.background#b0b6bb
  • button.foreground#202224
  • descriptionForeground#8e9296
  • diffEditor.insertedTextBackground#8ac4b022
  • diffEditor.removedTextBackground#d8806f22
  • dropdown.background#202224
  • dropdown.border#424547
  • dropdown.foreground#d6dade
  • editor.background#202224
  • editor.foreground#d6dade
  • editor.lineHighlightBackground#1e2022
  • editor.lineHighlightBorder#1e2022
  • editor.selectionBackground#353a3e
  • editor.selectionHighlightBackground#353a3e80
  • editorBracketHighlight.foreground1#d6dade
  • editorBracketHighlight.foreground2#d6dade
  • editorBracketHighlight.foreground3#d6dade
  • editorBracketHighlight.foreground4#d6dade
  • editorBracketHighlight.foreground5#d6dade
  • editorBracketHighlight.foreground6#d6dade
  • editorBracketHighlight.unexpectedBracket.foreground#d8806f
  • editorBracketMatch.background#353a3e80
  • editorBracketMatch.border#8b8f93
  • editorCodeLens.foreground#8b8f93
  • editorCursor.foreground#e8b45c
  • editorError.foreground#d8806f
  • editorGroup.border#424547
  • editorGroupHeader.tabsBackground#181a1c
  • editorGroupHeader.tabsBorder#424547
  • editorGutter.addedBackground#8ac4b0
  • editorGutter.deletedBackground#d8806f
  • editorGutter.modifiedBackground#b0b6bb
  • editorHoverWidget.background#181a1c
  • editorHoverWidget.border#424547
  • editorIndentGuide.activeBackground1#8b8f93
  • editorIndentGuide.background1#424547
  • editorInfo.foreground#b0b6bb
  • editorInlayHint.background#42454766
  • editorInlayHint.foreground#8e9296
  • editorLightBulb.foreground#cbb26c
  • editorLineNumber.activeForeground#d6dade
  • editorLineNumber.foreground#8e9296
  • editorLink.activeForeground#b0b6bb
  • editorOverviewRuler.border#424547
  • editorRuler.foreground#424547
  • editorSuggestWidget.background#181a1c
  • editorSuggestWidget.border#424547
  • editorSuggestWidget.selectedBackground#353a3e
  • editorWarning.foreground#cbb26c
  • editorWhitespace.foreground#8b8f93
  • editorWidget.background#181a1c
  • editorWidget.border#424547
  • errorForeground#d8806f
  • focusBorder#424547
  • foreground#d6dade
  • gitDecoration.deletedResourceForeground#d8806f
  • gitDecoration.ignoredResourceForeground#8b8f93
  • gitDecoration.modifiedResourceForeground#cbb26c
  • gitDecoration.untrackedResourceForeground#8ac4b0
  • icon.foreground#8e9296
  • input.background#202224
  • input.border#424547
  • input.foreground#d6dade
  • input.placeholderForeground#8b8f93
  • list.activeSelectionBackground#353a3e
  • list.activeSelectionForeground#d6dade
  • list.highlightForeground#b0b6bb
  • list.hoverBackground#353a3e66
  • list.inactiveSelectionBackground#353a3e99
  • minimap.background#202224
  • notebook.cellEditorBackground#202224
  • notebook.editorBackground#202224
  • panel.background#202224
  • panel.border#424547
  • panelTitle.activeBorder#b0b6bb
  • panelTitle.activeForeground#d6dade
  • panelTitle.inactiveForeground#8b8f93
  • peekView.border#424547
  • peekViewEditor.background#202224
  • peekViewResult.background#181a1c
  • peekViewTitle.background#181a1c
  • scrollbarSlider.activeBackground#8e929688
  • scrollbarSlider.background#8b8f9355
  • scrollbarSlider.hoverBackground#8b8f9388
  • selection.background#353a3e
  • sideBar.background#181a1c
  • sideBar.border#424547
  • sideBar.foreground#8e9296
  • sideBarSectionHeader.background#181a1c
  • sideBarSectionHeader.border#424547
  • sideBarSectionHeader.foreground#d6dade
  • sideBarTitle.foreground#d6dade
  • statusBar.background#202224
  • statusBar.border#424547
  • statusBar.debuggingBackground#cbb26c
  • statusBar.debuggingForeground#202224
  • statusBar.foreground#8e9296
  • statusBar.noFolderBackground#202224
  • tab.activeBackground#202224
  • tab.activeBorder#b0b6bb
  • tab.activeForeground#d6dade
  • tab.border#424547
  • tab.inactiveBackground#181a1c
  • tab.inactiveForeground#8e9296
  • terminal.ansiBlack#d6dade
  • terminal.ansiBlue#b0b6bb
  • terminal.ansiBrightBlack#8e9296
  • terminal.ansiBrightBlue#b0b6bb
  • terminal.ansiBrightCyan#78b4e8
  • terminal.ansiBrightGreen#8ac4b0
  • terminal.ansiBrightMagenta#c4cacf
  • terminal.ansiBrightRed#d8806f
  • terminal.ansiBrightWhite#202224
  • terminal.ansiBrightYellow#cbb26c
  • terminal.ansiCyan#78b4e8
  • terminal.ansiGreen#a8d0ee
  • terminal.ansiMagenta#c4cacf
  • terminal.ansiRed#a0a6ab
  • terminal.ansiWhite#8b8f93
  • terminal.ansiYellow#78b4e8
  • terminal.background#202224
  • terminal.foreground#d6dade
  • terminal.selectionBackground#353a3e
  • terminalCursor.foreground#e8b45c
  • textCodeBlock.background#181a1c
  • textLink.activeForeground#b0b6bb
  • textLink.foreground#b0b6bb
  • titleBar.activeBackground#181a1c
  • titleBar.activeForeground#d6dade
  • titleBar.border#424547
  • titleBar.inactiveBackground#181a1c
  • titleBar.inactiveForeground#8b8f93
  • widget.border#424547

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, storage#78b4e8
string#a8d0ee
entity.name.function, support.function#b0b6bb
constant.numeric, constant.language#a0a6ab
entity.name.type, entity.name.class, support.type#c4cacf
support, variable.language, constant.other.symbol#78b4e8
punctuation, keyword.operator#d6dade
comment#8b8f93italic
entity.name.tag, entity.name.namespace#c4cacf
entity.other.attribute-name#78b4e8
constant.character.escape#a0a6ab
invalid#d8806f
markup.heading, entity.name.section#b0b6bbbold
markup.bold#78b4e8bold
markup.italic#78b4e8italic
markup.raw, markup.inline.raw#78b4e8
markup.underline.link, string.other.link#b0b6bbunderline
markup.quote#8b8f93italic
markup.inserted#8ac4b0
markup.deleted#d8806f
markup.changed#cbb26c
Candela Themes by Candela - VS Code Theme