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#33414f
  • activityBar.background#0e0f11
  • activityBar.border#3d4349
  • activityBar.foreground#eef1f4
  • activityBar.inactiveForeground#9aa3ab
  • activityBarBadge.background#8fc0ff
  • activityBarBadge.foreground#171a1d
  • agents.background#0e0f11
  • agentsPanel.background#171a1d
  • agentsPanel.border#3d4349
  • agentsPanel.foreground#eef1f4
  • badge.background#8fc0ff
  • badge.foreground#171a1d
  • breadcrumb.background#171a1d
  • breadcrumb.focusForeground#eef1f4
  • breadcrumb.foreground#a7b0b8
  • breadcrumbPicker.background#0e0f11
  • button.background#8fc0ff
  • button.foreground#171a1d
  • descriptionForeground#a7b0b8
  • diffEditor.insertedTextBackground#6fe0c022
  • diffEditor.removedTextBackground#f2857e22
  • dropdown.background#171a1d
  • dropdown.border#3d4349
  • dropdown.foreground#eef1f4
  • editor.background#171a1d
  • editor.foreground#eef1f4
  • editor.lineHighlightBackground#16191c
  • editor.lineHighlightBorder#16191c
  • editor.selectionBackground#33414f
  • editor.selectionHighlightBackground#33414f80
  • editorBracketHighlight.foreground1#eef1f4
  • editorBracketHighlight.foreground2#eef1f4
  • editorBracketHighlight.foreground3#eef1f4
  • editorBracketHighlight.foreground4#eef1f4
  • editorBracketHighlight.foreground5#eef1f4
  • editorBracketHighlight.foreground6#eef1f4
  • editorBracketHighlight.unexpectedBracket.foreground#f2857e
  • editorBracketMatch.background#33414f80
  • editorBracketMatch.border#9aa3ab
  • editorCodeLens.foreground#9aa3ab
  • editorCursor.foreground#eef1f4
  • editorError.foreground#f2857e
  • editorGroup.border#3d4349
  • editorGroupHeader.tabsBackground#0e0f11
  • editorGroupHeader.tabsBorder#3d4349
  • editorGutter.addedBackground#6fe0c0
  • editorGutter.deletedBackground#f2857e
  • editorGutter.modifiedBackground#8fc0ff
  • editorHoverWidget.background#0e0f11
  • editorHoverWidget.border#3d4349
  • editorIndentGuide.activeBackground1#9aa3ab
  • editorIndentGuide.background1#3d4349
  • editorInfo.foreground#8fc0ff
  • editorInlayHint.background#3d434966
  • editorInlayHint.foreground#a7b0b8
  • editorLightBulb.foreground#f2d05a
  • editorLineNumber.activeForeground#eef1f4
  • editorLineNumber.foreground#a7b0b8
  • editorLink.activeForeground#8fc0ff
  • editorOverviewRuler.border#3d4349
  • editorRuler.foreground#3d4349
  • editorSuggestWidget.background#0e0f11
  • editorSuggestWidget.border#3d4349
  • editorSuggestWidget.selectedBackground#33414f
  • editorWarning.foreground#f2d05a
  • editorWhitespace.foreground#9aa3ab
  • editorWidget.background#0e0f11
  • editorWidget.border#3d4349
  • errorForeground#f2857e
  • focusBorder#3d4349
  • foreground#eef1f4
  • gitDecoration.deletedResourceForeground#f2857e
  • gitDecoration.ignoredResourceForeground#9aa3ab
  • gitDecoration.modifiedResourceForeground#f2d05a
  • gitDecoration.untrackedResourceForeground#6fe0c0
  • icon.foreground#a7b0b8
  • input.background#171a1d
  • input.border#3d4349
  • input.foreground#eef1f4
  • input.placeholderForeground#9aa3ab
  • list.activeSelectionBackground#33414f
  • list.activeSelectionForeground#eef1f4
  • list.highlightForeground#8fc0ff
  • list.hoverBackground#33414f66
  • list.inactiveSelectionBackground#33414f99
  • minimap.background#171a1d
  • notebook.cellEditorBackground#171a1d
  • notebook.editorBackground#171a1d
  • panel.background#171a1d
  • panel.border#3d4349
  • panelTitle.activeBorder#8fc0ff
  • panelTitle.activeForeground#eef1f4
  • panelTitle.inactiveForeground#9aa3ab
  • peekView.border#3d4349
  • peekViewEditor.background#171a1d
  • peekViewResult.background#0e0f11
  • peekViewTitle.background#0e0f11
  • scrollbarSlider.activeBackground#a7b0b888
  • scrollbarSlider.background#9aa3ab55
  • scrollbarSlider.hoverBackground#9aa3ab88
  • selection.background#33414f
  • sideBar.background#0e0f11
  • sideBar.border#3d4349
  • sideBar.foreground#a7b0b8
  • sideBarSectionHeader.background#0e0f11
  • sideBarSectionHeader.border#3d4349
  • sideBarSectionHeader.foreground#eef1f4
  • sideBarTitle.foreground#eef1f4
  • statusBar.background#171a1d
  • statusBar.border#3d4349
  • statusBar.debuggingBackground#f2d05a
  • statusBar.debuggingForeground#171a1d
  • statusBar.foreground#a7b0b8
  • statusBar.noFolderBackground#171a1d
  • tab.activeBackground#171a1d
  • tab.activeBorder#8fc0ff
  • tab.activeForeground#eef1f4
  • tab.border#3d4349
  • tab.inactiveBackground#0e0f11
  • tab.inactiveForeground#a7b0b8
  • terminal.ansiBlack#eef1f4
  • terminal.ansiBlue#8fc0ff
  • terminal.ansiBrightBlack#a7b0b8
  • terminal.ansiBrightBlue#8fc0ff
  • terminal.ansiBrightCyan#7fe0e8
  • terminal.ansiBrightGreen#6fe0c0
  • terminal.ansiBrightMagenta#d2b0ff
  • terminal.ansiBrightRed#f2857e
  • terminal.ansiBrightWhite#171a1d
  • terminal.ansiBrightYellow#f2d05a
  • terminal.ansiCyan#7fe0e8
  • terminal.ansiGreen#8ce8a8
  • terminal.ansiMagenta#d2b0ff
  • terminal.ansiRed#ffc07a
  • terminal.ansiWhite#9aa3ab
  • terminal.ansiYellow#ffb0d8
  • terminal.background#171a1d
  • terminal.foreground#eef1f4
  • terminal.selectionBackground#33414f
  • terminalCursor.foreground#eef1f4
  • textCodeBlock.background#0e0f11
  • textLink.activeForeground#8fc0ff
  • textLink.foreground#8fc0ff
  • titleBar.activeBackground#0e0f11
  • titleBar.activeForeground#eef1f4
  • titleBar.border#3d4349
  • titleBar.inactiveBackground#0e0f11
  • titleBar.inactiveForeground#9aa3ab
  • widget.border#3d4349

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, storage#ffb0d8
string#8ce8a8
entity.name.function, support.function#8fc0ff
constant.numeric, constant.language#ffc07a
entity.name.type, entity.name.class, support.type#d2b0ff
support, variable.language, constant.other.symbol#7fe0e8
punctuation, keyword.operator#eef1f4
comment#9aa3abitalic
entity.name.tag, entity.name.namespace#d2b0ff
entity.other.attribute-name#7fe0e8
constant.character.escape#ffc07a
invalid#f2857e
markup.heading, entity.name.section#8fc0ffbold
markup.bold#ffb0d8bold
markup.italic#ffb0d8italic
markup.raw, markup.inline.raw#7fe0e8
markup.underline.link, string.other.link#8fc0ffunderline
markup.quote#9aa3abitalic
markup.inserted#6fe0c0
markup.deleted#f2857e
markup.changed#f2d05a
Candela Themes by Candela - VS Code Theme