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