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#e6e6e6
  • activityBar.foreground#111111
  • activityBarBadge.background#00c2ff
  • badge.background#00c2ff
  • button.background#00c2ff
  • button.foreground#ffffff
  • dropdown.background#f2f2f2
  • dropdown.foreground#111111
  • editor.background#ffffff
  • editor.foreground#111111
  • editor.lineHighlightBackground#f2f2f2
  • editor.selectionBackground#00c2ff40
  • editorBracketHighlight.foreground1#a89c14
  • editorBracketHighlight.foreground2#523c79
  • editorBracketHighlight.foreground3#008ec4
  • editorBracketHighlight.foreground4#20a5ba
  • editorBracketHighlight.foreground5#10a778
  • editorBracketHighlight.foreground6#c30771
  • editorCursor.foreground#00c2ff
  • editorError.foreground#c30771
  • editorGroupHeader.tabsBackground#ebebeb
  • editorIndentGuide.activeBackground1#1111114c
  • editorIndentGuide.background1#1111111a
  • editorInfo.foreground#008ec4
  • editorLineNumber.activeForeground#111111
  • editorLineNumber.foreground#11111166
  • editorWarning.foreground#a89c14
  • editorWhitespace.foreground#11111126
  • editorWidget.background#f2f2f2
  • focusBorder#00c2ff
  • gitDecoration.conflictingResourceForeground#a89c14
  • gitDecoration.deletedResourceForeground#c30771
  • gitDecoration.modifiedResourceForeground#008ec4
  • gitDecoration.untrackedResourceForeground#10a778
  • input.background#f2f2f2
  • input.border#11111133
  • input.foreground#111111
  • inputOption.activeBorder#00c2ff
  • list.activeSelectionBackground#00c2ff4c
  • list.hoverBackground#f2f2f2
  • panel.background#ffffff
  • panel.border#11111126
  • progressBar.background#00c2ff
  • scrollbarSlider.activeBackground#1111114c
  • scrollbarSlider.background#1111111a
  • scrollbarSlider.hoverBackground#11111133
  • selection.background#00c2ff4c
  • sideBar.background#f2f2f2
  • sideBar.foreground#111111
  • sideBarSectionHeader.background#ebebeb
  • sideBarTitle.foreground#111111
  • statusBar.background#d9d9d9
  • statusBar.foreground#111111
  • tab.activeBackground#ffffff
  • tab.activeForeground#111111
  • tab.inactiveBackground#ebebeb
  • terminal.ansiBlack#212121
  • terminal.ansiBlue#008ec4
  • terminal.ansiBrightBlack#212121
  • terminal.ansiBrightBlue#20bbfc
  • terminal.ansiBrightCyan#4fb8cc
  • terminal.ansiBrightGreen#5fd7af
  • terminal.ansiBrightMagenta#6855de
  • terminal.ansiBrightRed#fb007a
  • terminal.ansiBrightWhite#f1f1f1
  • terminal.ansiBrightYellow#f3e430
  • terminal.ansiCyan#20a5ba
  • terminal.ansiGreen#10a778
  • terminal.ansiMagenta#523c79
  • terminal.ansiRed#c30771
  • terminal.ansiWhite#e0e0e0
  • terminal.ansiYellow#a89c14
  • terminal.background#ffffff
  • terminal.foreground#111111
  • titleBar.activeBackground#f2f2f2
  • titleBar.activeForeground#111111

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#212121italic
punctuation.definition.comment#212121italic
comment.block.documentation#212121italic
string#10a778—
string.quoted#10a778—
string.template, punctuation.definition.string.template#10a778—
string.regexp#20a5ba—
constant.numeric#a89c14—
constant.language.boolean#a89c14—
constant.language.null, constant.language.undefined#a89c14—
constant.language, constant.other#a89c14—
keyword#523c79—
keyword.control#523c79—
keyword.operator#111111—
keyword.other#523c79—
storage.type#523c79—
storage.modifier#523c79—
entity.name.function#008ec4—
meta.function-call, support.function#008ec4—
variable, variable.other#c30771—
variable.parameter#c30771italic
variable.language#c30771italic
entity.name.type, entity.name.class#a89c14—
entity.name.type.interface#a89c14—
entity.name.namespace, entity.name.module#a89c14—
entity.name.tag#c30771—
entity.other.attribute-name#a89c14—
support.type.property-name#008ec4—
support.constant.property-value, constant.other.color#20a5ba—
constant.character.escape#20a5ba—
support.class, support.type#20a5ba—
support.constant#20a5ba—
keyword.operator, punctuation.accessor#111111—
punctuation, punctuation.definition, punctuation.separator#111111—
invalid, invalid.illegal#ffffff—