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#322e2f
  • activityBar.foreground#ffffff
  • activityBarBadge.background#005386
  • badge.background#005386
  • button.background#005386
  • button.foreground#ffffff
  • dropdown.background#262324
  • dropdown.foreground#ffffff
  • editor.background#1b1718
  • editor.foreground#ffffff
  • editor.lineHighlightBackground#262324
  • editor.selectionBackground#00538640
  • editorBracketHighlight.foreground1#fefdc2
  • editorBracketHighlight.foreground2#ff8ffd
  • editorBracketHighlight.foreground3#a5d5fe
  • editorBracketHighlight.foreground4#d0d1fe
  • editorBracketHighlight.foreground5#b4fa72
  • editorBracketHighlight.foreground6#ff8272
  • editorCursor.foreground#005386
  • editorError.foreground#ff8272
  • editorGroupHeader.tabsBackground#2d2a2a
  • editorIndentGuide.activeBackground1#ffffff4c
  • editorIndentGuide.background1#ffffff1a
  • editorInfo.foreground#a5d5fe
  • editorLineNumber.activeForeground#ffffff
  • editorLineNumber.foreground#ffffff66
  • editorWarning.foreground#fefdc2
  • editorWhitespace.foreground#ffffff26
  • editorWidget.background#262324
  • focusBorder#005386
  • gitDecoration.conflictingResourceForeground#fefdc2
  • gitDecoration.deletedResourceForeground#ff8272
  • gitDecoration.modifiedResourceForeground#a5d5fe
  • gitDecoration.untrackedResourceForeground#b4fa72
  • input.background#262324
  • input.border#ffffff33
  • input.foreground#ffffff
  • inputOption.activeBorder#005386
  • list.activeSelectionBackground#0053864c
  • list.hoverBackground#262324
  • panel.background#1b1718
  • panel.border#ffffff26
  • progressBar.background#005386
  • scrollbarSlider.activeBackground#ffffff4c
  • scrollbarSlider.background#ffffff1a
  • scrollbarSlider.hoverBackground#ffffff33
  • selection.background#0053864c
  • sideBar.background#262324
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#2d2a2a
  • sideBarTitle.foreground#ffffff
  • statusBar.background#3d3a3b
  • statusBar.foreground#ffffff
  • tab.activeBackground#1b1718
  • tab.activeForeground#ffffff
  • tab.inactiveBackground#2d2a2a
  • terminal.ansiBlack#616161
  • terminal.ansiBlue#a5d5fe
  • terminal.ansiBrightBlack#8e8e8e
  • terminal.ansiBrightBlue#c1e3fe
  • terminal.ansiBrightCyan#e5e6fe
  • terminal.ansiBrightGreen#d6fcb9
  • terminal.ansiBrightMagenta#ffb1fe
  • terminal.ansiBrightRed#ffc4bd
  • terminal.ansiBrightWhite#feffff
  • terminal.ansiBrightYellow#fefdd5
  • terminal.ansiCyan#d0d1fe
  • terminal.ansiGreen#b4fa72
  • terminal.ansiMagenta#ff8ffd
  • terminal.ansiRed#ff8272
  • terminal.ansiWhite#f1f1f1
  • terminal.ansiYellow#fefdc2
  • terminal.background#1b1718
  • terminal.foreground#ffffff
  • titleBar.activeBackground#262324
  • titleBar.activeForeground#ffffff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#8e8e8eitalic
punctuation.definition.comment#8e8e8eitalic
comment.block.documentation#8e8e8eitalic
string#b4fa72—
string.quoted#b4fa72—
string.template, punctuation.definition.string.template#b4fa72—
string.regexp#d0d1fe—
constant.numeric#fefdc2—
constant.language.boolean#fefdc2—
constant.language.null, constant.language.undefined#fefdc2—
constant.language, constant.other#fefdc2—
keyword#ff8ffd—
keyword.control#ff8ffd—
keyword.operator#ffffff—
keyword.other#ff8ffd—
storage.type#ff8ffd—
storage.modifier#ff8ffd—
entity.name.function#a5d5fe—
meta.function-call, support.function#a5d5fe—
variable, variable.other#ff8272—
variable.parameter#ff8272italic
variable.language#ff8272italic
entity.name.type, entity.name.class#fefdc2—
entity.name.type.interface#fefdc2—
entity.name.namespace, entity.name.module#fefdc2—
entity.name.tag#ff8272—
entity.other.attribute-name#fefdc2—
support.type.property-name#a5d5fe—
support.constant.property-value, constant.other.color#d0d1fe—
constant.character.escape#d0d1fe—
support.class, support.type#d0d1fe—
support.constant#d0d1fe—
keyword.operator, punctuation.accessor#ffffff—
punctuation, punctuation.definition, punctuation.separator#ffffff—
invalid, invalid.illegal#ffffff—