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#1d575e
  • activityBar.foreground#ffffff
  • activityBarBadge.background#f9aea8
  • badge.background#f9aea8
  • button.background#f9aea8
  • button.foreground#000000
  • dropdown.background#1e5c64
  • dropdown.foreground#ffffff
  • editor.background#206169
  • editor.foreground#ffffff
  • editor.lineHighlightBackground#1e5c64
  • editor.selectionBackground#f9aea840
  • editorBracketHighlight.foreground1#fefdc2
  • editorBracketHighlight.foreground2#ff8ffd
  • editorBracketHighlight.foreground3#a5d5fe
  • editorBracketHighlight.foreground4#d0d1fe
  • editorBracketHighlight.foreground5#b4fa72
  • editorBracketHighlight.foreground6#ff8272
  • editorCursor.foreground#f9aea8
  • editorError.foreground#ff8272
  • editorGroupHeader.tabsBackground#1d5961
  • editorIndentGuide.activeBackground1#ffffff4c
  • editorIndentGuide.background1#ffffff1a
  • editorInfo.foreground#a5d5fe
  • editorLineNumber.activeForeground#ffffff
  • editorLineNumber.foreground#ffffff66
  • editorWarning.foreground#fefdc2
  • editorWhitespace.foreground#ffffff26
  • editorWidget.background#1e5c64
  • focusBorder#f9aea8
  • gitDecoration.conflictingResourceForeground#fefdc2
  • gitDecoration.deletedResourceForeground#ff8272
  • gitDecoration.modifiedResourceForeground#a5d5fe
  • gitDecoration.untrackedResourceForeground#b4fa72
  • input.background#1e5c64
  • input.border#ffffff33
  • input.foreground#ffffff
  • inputOption.activeBorder#f9aea8
  • list.activeSelectionBackground#f9aea84c
  • list.hoverBackground#1e5c64
  • panel.background#206169
  • panel.border#ffffff26
  • progressBar.background#f9aea8
  • scrollbarSlider.activeBackground#ffffff4c
  • scrollbarSlider.background#ffffff1a
  • scrollbarSlider.hoverBackground#ffffff33
  • selection.background#f9aea84c
  • sideBar.background#1e5c64
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#1d5961
  • sideBarTitle.foreground#ffffff
  • statusBar.background#1b5259
  • statusBar.foreground#ffffff
  • tab.activeBackground#206169
  • tab.activeForeground#ffffff
  • tab.inactiveBackground#1d5961
  • 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#206169
  • terminal.foreground#ffffff
  • titleBar.activeBackground#1e5c64
  • 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
Warped — Warp Terminal Themes for VS Code by Renzo - VS Code Theme