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