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#573729
  • activityBar.background#132939
  • activityBar.border#4f7087
  • activityBar.foreground#dee7ed
  • activityBar.inactiveForeground#9fb0bc
  • activityBarBadge.background#74c2e7
  • activityBarBadge.foreground#1d3749
  • agents.background#132939
  • agentsPanel.background#1d3749
  • agentsPanel.border#4f7087
  • agentsPanel.foreground#dee7ed
  • badge.background#74c2e7
  • badge.foreground#1d3749
  • breadcrumb.background#1d3749
  • breadcrumb.focusForeground#dee7ed
  • breadcrumb.foreground#95a6b2
  • breadcrumbPicker.background#132939
  • button.background#74c2e7
  • button.foreground#1d3749
  • descriptionForeground#95a6b2
  • diffEditor.insertedTextBackground#71d6b922
  • diffEditor.removedTextBackground#f5746622
  • dropdown.background#1d3749
  • dropdown.border#4f7087
  • dropdown.foreground#dee7ed
  • editor.background#1d3749
  • editor.foreground#dee7ed
  • editor.lineHighlightBackground#1b3141
  • editor.lineHighlightBorder#1b3141
  • editor.selectionBackground#573729
  • editor.selectionHighlightBackground#57372980
  • editorBracketHighlight.foreground1#b4c4cf
  • editorBracketHighlight.foreground2#b4c4cf
  • editorBracketHighlight.foreground3#b4c4cf
  • editorBracketHighlight.foreground4#b4c4cf
  • editorBracketHighlight.foreground5#b4c4cf
  • editorBracketHighlight.foreground6#b4c4cf
  • editorBracketHighlight.unexpectedBracket.foreground#f57466
  • editorBracketMatch.background#57372980
  • editorBracketMatch.border#9fb0bc
  • editorCodeLens.foreground#9fb0bc
  • editorCursor.foreground#f3a068
  • editorError.foreground#f57466
  • editorGroup.border#4f7087
  • editorGroupHeader.tabsBackground#132939
  • editorGroupHeader.tabsBorder#4f7087
  • editorGutter.addedBackground#71d6b9
  • editorGutter.deletedBackground#f57466
  • editorGutter.modifiedBackground#74c2e7
  • editorHoverWidget.background#132939
  • editorHoverWidget.border#4f7087
  • editorIndentGuide.activeBackground1#9fb0bc
  • editorIndentGuide.background1#4f7087
  • editorInfo.foreground#74c2e7
  • editorInlayHint.background#4f708766
  • editorInlayHint.foreground#95a6b2
  • editorLightBulb.foreground#e9c267
  • editorLineNumber.activeForeground#dee7ed
  • editorLineNumber.foreground#95a6b2
  • editorLink.activeForeground#74c2e7
  • editorOverviewRuler.border#4f7087
  • editorRuler.foreground#4f7087
  • editorSuggestWidget.background#132939
  • editorSuggestWidget.border#4f7087
  • editorSuggestWidget.selectedBackground#573729
  • editorWarning.foreground#e9c267
  • editorWhitespace.foreground#9fb0bc
  • editorWidget.background#132939
  • editorWidget.border#4f7087
  • errorForeground#f57466
  • focusBorder#4f7087
  • foreground#dee7ed
  • gitDecoration.deletedResourceForeground#f57466
  • gitDecoration.ignoredResourceForeground#9fb0bc
  • gitDecoration.modifiedResourceForeground#e9c267
  • gitDecoration.untrackedResourceForeground#71d6b9
  • icon.foreground#95a6b2
  • input.background#1d3749
  • input.border#4f7087
  • input.foreground#dee7ed
  • input.placeholderForeground#9fb0bc
  • list.activeSelectionBackground#573729
  • list.activeSelectionForeground#dee7ed
  • list.highlightForeground#74c2e7
  • list.hoverBackground#57372966
  • list.inactiveSelectionBackground#57372999
  • minimap.background#1d3749
  • notebook.cellEditorBackground#1d3749
  • notebook.editorBackground#1d3749
  • panel.background#1d3749
  • panel.border#4f7087
  • panelTitle.activeBorder#74c2e7
  • panelTitle.activeForeground#dee7ed
  • panelTitle.inactiveForeground#9fb0bc
  • peekView.border#4f7087
  • peekViewEditor.background#1d3749
  • peekViewResult.background#132939
  • peekViewTitle.background#132939
  • scrollbarSlider.activeBackground#95a6b288
  • scrollbarSlider.background#9fb0bc55
  • scrollbarSlider.hoverBackground#9fb0bc88
  • selection.background#573729
  • sideBar.background#132939
  • sideBar.border#4f7087
  • sideBar.foreground#95a6b2
  • sideBarSectionHeader.background#132939
  • sideBarSectionHeader.border#4f7087
  • sideBarSectionHeader.foreground#dee7ed
  • sideBarTitle.foreground#dee7ed
  • statusBar.background#1d3749
  • statusBar.border#4f7087
  • statusBar.debuggingBackground#e9c267
  • statusBar.debuggingForeground#1d3749
  • statusBar.foreground#95a6b2
  • statusBar.noFolderBackground#1d3749
  • tab.activeBackground#1d3749
  • tab.activeBorder#74c2e7
  • tab.activeForeground#dee7ed
  • tab.border#4f7087
  • tab.inactiveBackground#132939
  • tab.inactiveForeground#95a6b2
  • terminal.ansiBlack#dee7ed
  • terminal.ansiBlue#74c2e7
  • terminal.ansiBrightBlack#95a6b2
  • terminal.ansiBrightBlue#74c2e7
  • terminal.ansiBrightCyan#6ecfc2
  • terminal.ansiBrightGreen#71d6b9
  • terminal.ansiBrightMagenta#c5a5e9
  • terminal.ansiBrightRed#f57466
  • terminal.ansiBrightWhite#1d3749
  • terminal.ansiBrightYellow#e9c267
  • terminal.ansiCyan#6ecfc2
  • terminal.ansiGreen#92ce8d
  • terminal.ansiMagenta#c5a5e9
  • terminal.ansiRed#ec93b0
  • terminal.ansiWhite#9fb0bc
  • terminal.ansiYellow#f3a068
  • terminal.background#1d3749
  • terminal.foreground#dee7ed
  • terminal.selectionBackground#573729
  • terminalCursor.foreground#f3a068
  • textCodeBlock.background#132939
  • textLink.activeForeground#74c2e7
  • textLink.foreground#74c2e7
  • titleBar.activeBackground#132939
  • titleBar.activeForeground#dee7ed
  • titleBar.border#4f7087
  • titleBar.inactiveBackground#132939
  • titleBar.inactiveForeground#9fb0bc
  • widget.border#4f7087

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, storage#f3a068
string#92ce8d
entity.name.function, support.function#74c2e7
constant.numeric, constant.language#ec93b0
entity.name.type, entity.name.class, support.type#c5a5e9
support, variable.language, constant.other.symbol#6ecfc2
punctuation, keyword.operator#b4c4cf
comment#9fb0bcitalic
entity.name.tag, entity.name.namespace#c5a5e9
entity.other.attribute-name#6ecfc2
constant.character.escape#ec93b0
invalid#f57466
markup.heading, entity.name.section#74c2e7bold
markup.bold#f3a068bold
markup.italic#f3a068italic
markup.raw, markup.inline.raw#6ecfc2
markup.underline.link, string.other.link#74c2e7underline
markup.quote#9fb0bcitalic
markup.inserted#71d6b9
markup.deleted#f57466
markup.changed#e9c267
Candela Themes by Candela - VS Code Theme