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—