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#1d2021
  • activityBar.foreground#ebdbb2
  • activityBarBadge.background#fabd2f
  • activityBarBadge.foreground#282828
  • button.background#fabd2f
  • button.foreground#282828
  • editor.background#282828
  • editor.foreground#ebdbb2
  • editor.lineHighlightBackground#3c3836
  • editor.selectionBackground#504945
  • editor.selectionHighlightBackground#50494588
  • editor.wordHighlightBackground#50494566
  • editorCursor.foreground#ebdbb2
  • editorGroupHeader.tabsBackground#1d2021
  • editorIndentGuide.background1#504945
  • editorLineNumber.activeForeground#fff
  • editorLineNumber.foreground#504945
  • editorLink.activeForeground#fabd2f
  • editorRuler.foreground#504945
  • editorWhitespace.foreground#504945
  • list.activeSelectionBackground#fabd2f
  • list.activeSelectionForeground#000000
  • list.focusHighlightForeground#000
  • list.foreground#000
  • list.highlightForeground#fabd2f
  • list.hoverBackground#fabd2f
  • list.inactiveSelectionBackground#ffd573
  • list.inactiveSelectionForeground#000000
  • panel.background#1d2021
  • pickerGroup.border#3c3836
  • pickerGroup.foreground#fabd2f
  • quickInput.background#1d2021
  • quickInput.foreground#fff
  • quickInputList.focusBackground#fabd2f
  • quickInputList.focusForeground#282828
  • sideBar.background#1d2021
  • sideBar.foreground#fff
  • sideBarSectionHeader.background#3c3836
  • sideBarSectionHeader.foreground#fabd2f
  • sideBarTitle.foreground#fabd2f
  • statusBar.background#504945
  • statusBar.foreground#ebdbb2
  • tab.activeBackground#282828
  • tab.activeForeground#000
  • tab.inactiveBackground#1d2021
  • tab.inactiveForeground#000
  • terminal.background#282828
  • terminal.foreground#ebdbb2
  • terminalCursor.foreground#ebdbb2
  • titleBar.activeBackground#1d2021

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword.control, keyword.operator.expression, keyword.operator.new, keyword.control.new, storage.type, storage.modifier, keyword.other.use, keyword.other.namespace, storage.modifier.extends, entity.other.inherited-class, variable.language, variable.language.this, variable.language.self, variable.language.super, variable.language.parent, variable.language punctuation.definition.variable.php, punctuation.definition.variable.php, keyword.control.php, keyword.control.flow, keyword.control.async-modifier, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.returnitalic
comment, punctuation.definition.comment#928374italic
keyword, keyword.control, keyword.operator.expression#fb4934
storage, storage.type, storage.modifier#d3869b
variable#ebdbb2
variable.language#fe8019italic
string, string.quoted, punctuation.definition.string#b8bb26
constant, constant.numeric, constant.language#d79921
entity.name.function, support.function#fabd2f
entity.name.type.class, entity.name.class, support.class#8ec07c
entity.other.inherited-class#8ec07citalic
entity.name.tag#fb4934
entity.other.attribute-name#83a598italic
support.type, support.class#8ec07c
variable.parameter, entity.name.variable.parameteritalic
keyword.control.new, keyword.operator.newbold italic
markup.italicitalic
markup.boldbold
markup.heading#fabd2fbold
Valinor Theme by Diego Brocanelli - VS Code Theme