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.background#3e3e3e
  • activityBar.foreground#ebdbb2
  • activityBarBadge.background#fc802d
  • badge.background#fc802d
  • button.background#fc802d
  • button.foreground#ffffff
  • dropdown.background#333333
  • dropdown.foreground#ebdbb2
  • editor.background#282828
  • editor.foreground#ebdbb2
  • editor.lineHighlightBackground#333333
  • editor.selectionBackground#fc802d40
  • editorBracketHighlight.foreground1#d79921
  • editorBracketHighlight.foreground2#b16286
  • editorBracketHighlight.foreground3#458588
  • editorBracketHighlight.foreground4#689d6a
  • editorBracketHighlight.foreground5#98971a
  • editorBracketHighlight.foreground6#cc241d
  • editorCursor.foreground#fc802d
  • editorError.foreground#cc241d
  • editorGroupHeader.tabsBackground#393939
  • editorIndentGuide.activeBackground1#ebdbb24c
  • editorIndentGuide.background1#ebdbb21a
  • editorInfo.foreground#458588
  • editorLineNumber.activeForeground#ebdbb2
  • editorLineNumber.foreground#ebdbb266
  • editorWarning.foreground#d79921
  • editorWhitespace.foreground#ebdbb226
  • editorWidget.background#333333
  • focusBorder#fc802d
  • gitDecoration.conflictingResourceForeground#d79921
  • gitDecoration.deletedResourceForeground#cc241d
  • gitDecoration.modifiedResourceForeground#458588
  • gitDecoration.untrackedResourceForeground#98971a
  • input.background#333333
  • input.border#ebdbb233
  • input.foreground#ebdbb2
  • inputOption.activeBorder#fc802d
  • list.activeSelectionBackground#fc802d4c
  • list.hoverBackground#333333
  • panel.background#282828
  • panel.border#ebdbb226
  • progressBar.background#fc802d
  • scrollbarSlider.activeBackground#ebdbb24c
  • scrollbarSlider.background#ebdbb21a
  • scrollbarSlider.hoverBackground#ebdbb233
  • selection.background#fc802d4c
  • sideBar.background#333333
  • sideBar.foreground#ebdbb2
  • sideBarSectionHeader.background#393939
  • sideBarTitle.foreground#ebdbb2
  • statusBar.background#484848
  • statusBar.foreground#ebdbb2
  • tab.activeBackground#282828
  • tab.activeForeground#ebdbb2
  • tab.inactiveBackground#393939
  • terminal.ansiBlack#282828
  • terminal.ansiBlue#458588
  • terminal.ansiBrightBlack#928374
  • terminal.ansiBrightBlue#83a598
  • terminal.ansiBrightCyan#8ec07c
  • terminal.ansiBrightGreen#b8bb26
  • terminal.ansiBrightMagenta#d3869b
  • terminal.ansiBrightRed#fb4934
  • terminal.ansiBrightWhite#ebdbb2
  • terminal.ansiBrightYellow#fabd2f
  • terminal.ansiCyan#689d6a
  • terminal.ansiGreen#98971a
  • terminal.ansiMagenta#b16286
  • terminal.ansiRed#cc241d
  • terminal.ansiWhite#a89984
  • terminal.ansiYellow#d79921
  • terminal.background#282828
  • terminal.foreground#ebdbb2
  • titleBar.activeBackground#333333
  • titleBar.activeForeground#ebdbb2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#928374italic
punctuation.definition.comment#928374italic
comment.block.documentation#928374italic
string#98971a
string.quoted#98971a
string.template, punctuation.definition.string.template#98971a
string.regexp#689d6a
constant.numeric#d79921
constant.language.boolean#d79921
constant.language.null, constant.language.undefined#d79921
constant.language, constant.other#d79921
keyword#b16286
keyword.control#b16286
keyword.operator#ebdbb2
keyword.other#b16286
storage.type#b16286
storage.modifier#b16286
entity.name.function#458588
meta.function-call, support.function#458588
variable, variable.other#cc241d
variable.parameter#cc241ditalic
variable.language#cc241ditalic
entity.name.type, entity.name.class#d79921
entity.name.type.interface#d79921
entity.name.namespace, entity.name.module#d79921
entity.name.tag#cc241d
entity.other.attribute-name#d79921
support.type.property-name#458588
support.constant.property-value, constant.other.color#689d6a
constant.character.escape#689d6a
support.class, support.type#689d6a
support.constant#689d6a
keyword.operator, punctuation.accessor#ebdbb2
punctuation, punctuation.definition, punctuation.separator#ebdbb2
invalid, invalid.illegal#ffffff
Warped — Warp Terminal Themes for VS Code by Renzo - VS Code Theme