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#3d4351
  • activityBar.background#282c34
  • activityBar.border#737c8c
  • activityBar.foreground#b9c0cb
  • activityBar.inactiveForeground#8c94a1
  • activityBarBadge.background#5c91ff
  • activityBarBadge.foreground#2d3139
  • agents.background#282c34
  • agentsPanel.background#2d3139
  • agentsPanel.border#737c8c
  • agentsPanel.foreground#b9c0cb
  • badge.background#5c91ff
  • badge.foreground#2d3139
  • breadcrumb.background#2d3139
  • breadcrumb.focusForeground#b9c0cb
  • breadcrumb.foreground#737c8c
  • breadcrumbPicker.background#282c34
  • button.background#5c91ff
  • button.foreground#2d3139
  • descriptionForeground#737c8c
  • diffEditor.insertedTextBackground#3fc5b322
  • diffEditor.removedTextBackground#ff668222
  • dropdown.background#2d3139
  • dropdown.border#737c8c
  • dropdown.foreground#b9c0cb
  • editor.background#2d3139
  • editor.foreground#b9c0cb
  • editor.lineHighlightBackground#373c44
  • editor.lineHighlightBorder#373c44
  • editor.selectionBackground#3d4351
  • editor.selectionHighlightBackground#3d435180
  • editorBracketHighlight.foreground1#b9c0cb
  • editorBracketHighlight.foreground2#b9c0cb
  • editorBracketHighlight.foreground3#b9c0cb
  • editorBracketHighlight.foreground4#b9c0cb
  • editorBracketHighlight.foreground5#b9c0cb
  • editorBracketHighlight.foreground6#b9c0cb
  • editorBracketHighlight.unexpectedBracket.foreground#ff6682
  • editorBracketMatch.background#3d435180
  • editorBracketMatch.border#8c94a1
  • editorCodeLens.foreground#8c94a1
  • editorCursor.foreground#ffcc00
  • editorError.foreground#ff6682
  • editorGroup.border#737c8c
  • editorGroupHeader.tabsBackground#282c34
  • editorGroupHeader.tabsBorder#737c8c
  • editorGutter.addedBackground#3fc5b3
  • editorGutter.deletedBackground#ff6682
  • editorGutter.modifiedBackground#5c91ff
  • editorHoverWidget.background#282c34
  • editorHoverWidget.border#737c8c
  • editorIndentGuide.activeBackground1#8c94a1
  • editorIndentGuide.background1#737c8c
  • editorInfo.foreground#5c91ff
  • editorInlayHint.background#737c8c66
  • editorInlayHint.foreground#737c8c
  • editorLightBulb.foreground#f9c858
  • editorLineNumber.activeForeground#b9c0cb
  • editorLineNumber.foreground#737c8c
  • editorLink.activeForeground#5c91ff
  • editorOverviewRuler.border#737c8c
  • editorRuler.foreground#737c8c
  • editorSuggestWidget.background#282c34
  • editorSuggestWidget.border#737c8c
  • editorSuggestWidget.selectedBackground#3d4351
  • editorWarning.foreground#f9c858
  • editorWhitespace.foreground#8c94a1
  • editorWidget.background#282c34
  • editorWidget.border#737c8c
  • errorForeground#ff6682
  • focusBorder#737c8c
  • foreground#b9c0cb
  • gitDecoration.deletedResourceForeground#ff6682
  • gitDecoration.ignoredResourceForeground#8c94a1
  • gitDecoration.modifiedResourceForeground#f9c858
  • gitDecoration.untrackedResourceForeground#3fc5b3
  • icon.foreground#737c8c
  • input.background#2d3139
  • input.border#737c8c
  • input.foreground#b9c0cb
  • input.placeholderForeground#8c94a1
  • list.activeSelectionBackground#3d4351
  • list.activeSelectionForeground#b9c0cb
  • list.highlightForeground#5c91ff
  • list.hoverBackground#3d435166
  • list.inactiveSelectionBackground#3d435199
  • minimap.background#2d3139
  • notebook.cellEditorBackground#2d3139
  • notebook.editorBackground#2d3139
  • panel.background#2d3139
  • panel.border#737c8c
  • panelTitle.activeBorder#5c91ff
  • panelTitle.activeForeground#b9c0cb
  • panelTitle.inactiveForeground#8c94a1
  • peekView.border#737c8c
  • peekViewEditor.background#2d3139
  • peekViewResult.background#282c34
  • peekViewTitle.background#282c34
  • scrollbarSlider.activeBackground#737c8c88
  • scrollbarSlider.background#8c94a155
  • scrollbarSlider.hoverBackground#8c94a188
  • selection.background#3d4351
  • sideBar.background#282c34
  • sideBar.border#737c8c
  • sideBar.foreground#737c8c
  • sideBarSectionHeader.background#282c34
  • sideBarSectionHeader.border#737c8c
  • sideBarSectionHeader.foreground#b9c0cb
  • sideBarTitle.foreground#b9c0cb
  • statusBar.background#2d3139
  • statusBar.border#737c8c
  • statusBar.debuggingBackground#f9c858
  • statusBar.debuggingForeground#2d3139
  • statusBar.foreground#737c8c
  • statusBar.noFolderBackground#2d3139
  • tab.activeBackground#2d3139
  • tab.activeBorder#5c91ff
  • tab.activeForeground#b9c0cb
  • tab.border#737c8c
  • tab.inactiveBackground#282c34
  • tab.inactiveForeground#737c8c
  • terminal.ansiBlack#b9c0cb
  • terminal.ansiBlue#5c91ff
  • terminal.ansiBrightBlack#737c8c
  • terminal.ansiBrightBlue#5c91ff
  • terminal.ansiBrightCyan#57a9db
  • terminal.ansiBrightGreen#3fc5b3
  • terminal.ansiBrightMagenta#a180fe
  • terminal.ansiBrightRed#ff6682
  • terminal.ansiBrightWhite#2d3139
  • terminal.ansiBrightYellow#f9c858
  • terminal.ansiCyan#57a9db
  • terminal.ansiGreen#26ab60
  • terminal.ansiMagenta#a180fe
  • terminal.ansiRed#fd5975
  • terminal.ansiWhite#8c94a1
  • terminal.ansiYellow#ff946b
  • terminal.background#2d3139
  • terminal.foreground#b9c0cb
  • terminal.selectionBackground#3d4351
  • terminalCursor.foreground#ffcc00
  • textCodeBlock.background#282c34
  • textLink.activeForeground#5c91ff
  • textLink.foreground#5c91ff
  • titleBar.activeBackground#282c34
  • titleBar.activeForeground#b9c0cb
  • titleBar.border#737c8c
  • titleBar.inactiveBackground#282c34
  • titleBar.inactiveForeground#8c94a1
  • widget.border#737c8c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, storage#ff946b
string#26ab60
entity.name.function, support.function#5c91ff
constant.numeric, constant.language#fd5975
entity.name.type, entity.name.class, support.type#a180fe
support, variable.language, constant.other.symbol#57a9db
punctuation, keyword.operator#b9c0cb
comment#8c94a1italic
entity.name.tag, entity.name.namespace#a180fe
entity.other.attribute-name#57a9db
constant.character.escape#fd5975
invalid#ff6682
markup.heading, entity.name.section#5c91ffbold
markup.bold#ff946bbold
markup.italic#ff946bitalic
markup.raw, markup.inline.raw#57a9db
markup.underline.link, string.other.link#5c91ffunderline
markup.quote#8c94a1italic
markup.inserted#3fc5b3
markup.deleted#ff6682
markup.changed#f9c858
Candela Themes by Candela - VS Code Theme