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
Warped — Warp Terminal Themes for VS Code by Renzo - VS Code Theme