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#dcdedb
  • activityBar.background#eceeec
  • activityBar.border#d9dbd8
  • activityBar.foreground#26292a
  • activityBar.inactiveForeground#676b6c
  • activityBarBadge.background#3d4a5a
  • activityBarBadge.foreground#f6f7f5
  • agents.background#eceeec
  • agentsPanel.background#f6f7f5
  • agentsPanel.border#d9dbd8
  • agentsPanel.foreground#26292a
  • badge.background#3d4a5a
  • badge.foreground#f6f7f5
  • breadcrumb.background#f6f7f5
  • breadcrumb.focusForeground#26292a
  • breadcrumb.foreground#4e5253
  • breadcrumbPicker.background#eceeec
  • button.background#3d4a5a
  • button.foreground#f6f7f5
  • descriptionForeground#4e5253
  • diffEditor.insertedTextBackground#576e6522
  • diffEditor.removedTextBackground#644f4c22
  • dropdown.background#f6f7f5
  • dropdown.border#d9dbd8
  • dropdown.foreground#26292a
  • editor.background#f6f7f5
  • editor.foreground#26292a
  • editor.lineHighlightBackground#e8eae8
  • editor.lineHighlightBorder#e8eae8
  • editor.selectionBackground#dcdedb
  • editor.selectionHighlightBackground#dcdedb80
  • editorBracketHighlight.foreground1#676b6c
  • editorBracketHighlight.foreground2#676b6c
  • editorBracketHighlight.foreground3#676b6c
  • editorBracketHighlight.foreground4#676b6c
  • editorBracketHighlight.foreground5#676b6c
  • editorBracketHighlight.foreground6#676b6c
  • editorBracketHighlight.unexpectedBracket.foreground#644f4c
  • editorBracketMatch.background#dcdedb80
  • editorBracketMatch.border#676b6c
  • editorCodeLens.foreground#676b6c
  • editorCursor.foreground#26292a
  • editorError.foreground#644f4c
  • editorGroup.border#d9dbd8
  • editorGroupHeader.tabsBackground#eceeec
  • editorGroupHeader.tabsBorder#d9dbd8
  • editorGutter.addedBackground#576e65
  • editorGutter.deletedBackground#644f4c
  • editorGutter.modifiedBackground#3d4a5a
  • editorHoverWidget.background#eceeec
  • editorHoverWidget.border#d9dbd8
  • editorIndentGuide.activeBackground1#676b6c
  • editorIndentGuide.background1#d9dbd8
  • editorInfo.foreground#3d4a5a
  • editorInlayHint.background#d9dbd866
  • editorInlayHint.foreground#4e5253
  • editorLightBulb.foreground#6a5f50
  • editorLineNumber.activeForeground#26292a
  • editorLineNumber.foreground#4e5253
  • editorLink.activeForeground#3d4a5a
  • editorOverviewRuler.border#d9dbd8
  • editorRuler.foreground#d9dbd8
  • editorSuggestWidget.background#eceeec
  • editorSuggestWidget.border#d9dbd8
  • editorSuggestWidget.selectedBackground#dcdedb
  • editorWarning.foreground#6a5f50
  • editorWhitespace.foreground#676b6c
  • editorWidget.background#eceeec
  • editorWidget.border#d9dbd8
  • errorForeground#644f4c
  • focusBorder#d9dbd8
  • foreground#26292a
  • gitDecoration.deletedResourceForeground#644f4c
  • gitDecoration.ignoredResourceForeground#676b6c
  • gitDecoration.modifiedResourceForeground#6a5f50
  • gitDecoration.untrackedResourceForeground#576e65
  • icon.foreground#4e5253
  • input.background#f6f7f5
  • input.border#d9dbd8
  • input.foreground#26292a
  • input.placeholderForeground#676b6c
  • list.activeSelectionBackground#dcdedb
  • list.activeSelectionForeground#26292a
  • list.highlightForeground#3d4a5a
  • list.hoverBackground#dcdedb66
  • list.inactiveSelectionBackground#dcdedb99
  • minimap.background#f6f7f5
  • notebook.cellEditorBackground#f6f7f5
  • notebook.editorBackground#f6f7f5
  • panel.background#f6f7f5
  • panel.border#d9dbd8
  • panelTitle.activeBorder#3d4a5a
  • panelTitle.activeForeground#26292a
  • panelTitle.inactiveForeground#676b6c
  • peekView.border#d9dbd8
  • peekViewEditor.background#f6f7f5
  • peekViewResult.background#eceeec
  • peekViewTitle.background#eceeec
  • scrollbarSlider.activeBackground#4e525388
  • scrollbarSlider.background#676b6c55
  • scrollbarSlider.hoverBackground#676b6c88
  • selection.background#dcdedb
  • sideBar.background#eceeec
  • sideBar.border#d9dbd8
  • sideBar.foreground#4e5253
  • sideBarSectionHeader.background#eceeec
  • sideBarSectionHeader.border#d9dbd8
  • sideBarSectionHeader.foreground#26292a
  • sideBarTitle.foreground#26292a
  • statusBar.background#f6f7f5
  • statusBar.border#d9dbd8
  • statusBar.debuggingBackground#6a5f50
  • statusBar.debuggingForeground#f6f7f5
  • statusBar.foreground#4e5253
  • statusBar.noFolderBackground#f6f7f5
  • tab.activeBackground#f6f7f5
  • tab.activeBorder#3d4a5a
  • tab.activeForeground#26292a
  • tab.border#d9dbd8
  • tab.inactiveBackground#eceeec
  • tab.inactiveForeground#4e5253
  • terminal.ansiBlack#26292a
  • terminal.ansiBlue#3d4a5a
  • terminal.ansiBrightBlack#4e5253
  • terminal.ansiBrightBlue#3d4a5a
  • terminal.ansiBrightCyan#455a55
  • terminal.ansiBrightGreen#576e65
  • terminal.ansiBrightMagenta#4d445a
  • terminal.ansiBrightRed#644f4c
  • terminal.ansiBrightWhite#f6f7f5
  • terminal.ansiBrightYellow#6a5f50
  • terminal.ansiCyan#455a55
  • terminal.ansiGreen#4a5a4a
  • terminal.ansiMagenta#4d445a
  • terminal.ansiRed#5a4d45
  • terminal.ansiWhite#676b6c
  • terminal.ansiYellow#3d4d4a
  • terminal.background#f6f7f5
  • terminal.foreground#26292a
  • terminal.selectionBackground#dcdedb
  • terminalCursor.foreground#26292a
  • textCodeBlock.background#eceeec
  • textLink.activeForeground#3d4a5a
  • textLink.foreground#3d4a5a
  • titleBar.activeBackground#eceeec
  • titleBar.activeForeground#26292a
  • titleBar.border#d9dbd8
  • titleBar.inactiveBackground#eceeec
  • titleBar.inactiveForeground#676b6c
  • widget.border#d9dbd8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, storage#3d4d4a
string#4a5a4a
entity.name.function, support.function#3d4a5a
constant.numeric, constant.language#5a4d45
entity.name.type, entity.name.class, support.type#4d445a
support, variable.language, constant.other.symbol#455a55
punctuation, keyword.operator#676b6c
comment#676b6citalic
entity.name.tag, entity.name.namespace#4d445a
entity.other.attribute-name#455a55
constant.character.escape#5a4d45
invalid#644f4c
markup.heading, entity.name.section#3d4a5abold
markup.bold#3d4d4abold
markup.italic#3d4d4aitalic
markup.raw, markup.inline.raw#455a55
markup.underline.link, string.other.link#3d4a5aunderline
markup.quote#676b6citalic
markup.inserted#576e65
markup.deleted#644f4c
markup.changed#6a5f50
Candela Themes by Candela - VS Code Theme