Skip to main content
Coding Theme

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#262729
  • activityBar.foreground#D0D2D6
  • button.background#3B3E40
  • button.foreground#D0D2D6
  • button.hoverBackground#36383B
  • dropdown.background#36383B
  • editor.background#1F2021
  • editor.foreground#D0D2D6
  • editor.inactiveSelectionBackground#1A3A57
  • editor.lineHighlightBackground#292929
  • editor.selectionBackground#2A5E8C
  • editor.selectionHighlightBackground#213e6b
  • editorCursor.foreground#c2c2c2
  • editorIndentGuide.background#303030
  • editorLineNumber.activeForeground#bfbdbd
  • editorLineNumber.foreground#6c6f73
  • focusBorder#4397E0
  • input.background#36383B
  • input.foreground#D0D2D6
  • list.activeSelectionBackground#2A5E8C
  • list.inactiveSelectionBackground#1A3A57
  • progressBar.background#4397E0
  • scrollbarSlider.background#6e6e6e59
  • scrollbarSlider.hoverBackground#6e6e6e8c
  • sideBar.background#262729
  • statusBar.background#262729
  • statusBar.foreground#D0D2D6
  • tab.activeBackground#343538
  • tab.activeForeground#D0D2D6
  • tab.border#303030
  • tab.inactiveBackground#262729
  • textLink.activeForeground#4397E0
  • textLink.foreground#4397E0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant.language.dart#F18622bold
string.unquoted.ini#91c71e
source.dart variable.other.object#D0D2D6
comment#8c8c8c
keyword, storage#f18622
string#91c71e
string.unquoted.ini#91c71e
constant.character.escape#f18622
constant.numeric#4397e0
entity.name.type, support.type#D0D2D6
entity.name.class#D0D2D6
entity.name.function#f0a91d
variable#d0d2d6
constant#b45dd9bold
variable.other.property.static#b45dd9italic
meta.decorator#dad433bold
entity.name.tag#f0a91d
entity.other.attribute-name#d0d2d6
support.type.property-name#d0d2d6
support.property-value#91c71e
invalid#91c71eunderline wavy
markup.underline.link#4397e0
text.html.markdown#d0d2d6
markup.heading#f18622bold
storage.modifier#f18622
Glowing Dracula by Vivek Kumar - VS Code Theme