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#1f2a3e
  • activityBar.foreground#b8bbc2
  • activityBarBadge.background#5299bf
  • badge.background#5299bf
  • button.background#5299bf
  • button.foreground#ffffff
  • dropdown.background#121e34
  • dropdown.foreground#b8bbc2
  • editor.background#061229
  • editor.foreground#b8bbc2
  • editor.lineHighlightBackground#121e34
  • editor.selectionBackground#5299bf40
  • editorBracketHighlight.foreground1#fbd461
  • editorBracketHighlight.foreground2#9989cc
  • editorBracketHighlight.foreground3#5299bf
  • editorBracketHighlight.foreground4#72b9bf
  • editorBracketHighlight.foreground5#99bf52
  • editorBracketHighlight.foreground6#d07346
  • editorCursor.foreground#5299bf
  • editorError.foreground#d07346
  • editorGroupHeader.tabsBackground#1a253a
  • editorIndentGuide.activeBackground1#b8bbc24c
  • editorIndentGuide.background1#b8bbc21a
  • editorInfo.foreground#5299bf
  • editorLineNumber.activeForeground#b8bbc2
  • editorLineNumber.foreground#b8bbc266
  • editorWarning.foreground#fbd461
  • editorWhitespace.foreground#b8bbc226
  • editorWidget.background#121e34
  • focusBorder#5299bf
  • gitDecoration.conflictingResourceForeground#fbd461
  • gitDecoration.deletedResourceForeground#d07346
  • gitDecoration.modifiedResourceForeground#5299bf
  • gitDecoration.untrackedResourceForeground#99bf52
  • input.background#121e34
  • input.border#b8bbc233
  • input.foreground#b8bbc2
  • inputOption.activeBorder#5299bf
  • list.activeSelectionBackground#5299bf4c
  • list.hoverBackground#121e34
  • panel.background#061229
  • panel.border#b8bbc226
  • progressBar.background#5299bf
  • scrollbarSlider.activeBackground#b8bbc24c
  • scrollbarSlider.background#b8bbc21a
  • scrollbarSlider.hoverBackground#b8bbc233
  • selection.background#5299bf4c
  • sideBar.background#121e34
  • sideBar.foreground#b8bbc2
  • sideBarSectionHeader.background#1a253a
  • sideBarTitle.foreground#b8bbc2
  • statusBar.background#2b3649
  • statusBar.foreground#b8bbc2
  • tab.activeBackground#061229
  • tab.activeForeground#b8bbc2
  • tab.inactiveBackground#1a253a
  • terminal.ansiBlack#061229
  • terminal.ansiBlue#5299bf
  • terminal.ansiBrightBlack#717885
  • terminal.ansiBrightBlue#9a99a3
  • terminal.ansiBrightCyan#b08060
  • terminal.ansiBrightGreen#2a3448
  • terminal.ansiBrightMagenta#dbdde0
  • terminal.ansiBrightRed#f0a000
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#4d5666
  • terminal.ansiCyan#72b9bf
  • terminal.ansiGreen#99bf52
  • terminal.ansiMagenta#9989cc
  • terminal.ansiRed#d07346
  • terminal.ansiWhite#b8bbc2
  • terminal.ansiYellow#fbd461
  • terminal.background#061229
  • terminal.foreground#b8bbc2
  • titleBar.activeBackground#121e34
  • titleBar.activeForeground#b8bbc2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#717885italic
punctuation.definition.comment#717885italic
comment.block.documentation#717885italic
string#99bf52—
string.quoted#99bf52—
string.template, punctuation.definition.string.template#99bf52—
string.regexp#72b9bf—
constant.numeric#fbd461—
constant.language.boolean#fbd461—
constant.language.null, constant.language.undefined#fbd461—
constant.language, constant.other#fbd461—
keyword#9989cc—
keyword.control#9989cc—
keyword.operator#b8bbc2—
keyword.other#9989cc—
storage.type#9989cc—
storage.modifier#9989cc—
entity.name.function#5299bf—
meta.function-call, support.function#5299bf—
variable, variable.other#d07346—
variable.parameter#d07346italic
variable.language#d07346italic
entity.name.type, entity.name.class#fbd461—
entity.name.type.interface#fbd461—
entity.name.namespace, entity.name.module#fbd461—
entity.name.tag#d07346—
entity.other.attribute-name#fbd461—
support.type.property-name#5299bf—
support.constant.property-value, constant.other.color#72b9bf—
constant.character.escape#72b9bf—
support.class, support.type#72b9bf—
support.constant#72b9bf—
keyword.operator, punctuation.accessor#b8bbc2—
punctuation, punctuation.definition, punctuation.separator#b8bbc2—
invalid, invalid.illegal#ffffff—