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#f2f0e5
  • activityBar.foreground#100f0f
  • activityBarBadge.background#24837b
  • activityBarBadge.foreground#fffcf0
  • button.background#24837b
  • button.foreground#fffcf0
  • editor.background#f3f3f3
  • editor.foreground#100f0f
  • editor.lineHighlightBackground#f2f0e5
  • editor.selectionBackground#e6e4d9
  • editor.selectionHighlightBackground#e6e4d988
  • editor.wordHighlightBackground#e6e4d966
  • editorCursor.foreground#100f0f
  • editorGroupHeader.tabsBackground#f2f0e5
  • editorIndentGuide.background1#e6e4d9
  • editorLineNumber.activeForeground#100f0f
  • editorLineNumber.foreground#e6e4d9
  • editorLink.activeForeground#000
  • editorRuler.foreground#e6e4d9
  • editorWhitespace.foreground#b7b5ac
  • editorWidget.background#f2f0e5
  • list.activeSelectionBackground#f3f3f3
  • list.activeSelectionForeground#000
  • list.focusHighlightForeground#000
  • list.highlightForeground#000
  • list.hoverBackground#e6e4d9
  • list.inactiveSelectionBackground#f3f3f3
  • list.inactiveSelectionForeground#000
  • panel.background#f2f0e5
  • sideBar.background#f2f0e5
  • sideBar.foreground#403e3c
  • sideBarSectionHeader.background#f2f0e5
  • sideBarSectionHeader.foreground#24837b
  • sideBarTitle.foreground#24837b
  • statusBar.background#e6e4d9
  • statusBar.foreground#100f0f
  • tab.activeBackground#fffcf0
  • tab.activeForeground#100f0f
  • tab.inactiveBackground#f2f0e5
  • tab.inactiveForeground#403e3c
  • terminal.background#f3f3f3
  • terminal.foreground#100f0f
  • terminalCursor.foreground#100f0f
  • titleBar.activeBackground#f2f0e5

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#b7b5acitalic
keyword, keyword.control, keyword.operator.expression#8b7ec8
storage, storage.type, storage.modifier#205ea6
variable#100f0f
variable.language#af3029italic
string, string.quoted, punctuation.definition.string#66800b
constant, constant.numeric, constant.language#ad8301
entity.name.function, support.function#205ea6
entity.name.type.class, entity.name.class, support.class#24837b
entity.other.inherited-class#24837bitalic
entity.name.tag#af3029
entity.other.attribute-name#24837bitalic
support.type, support.class#205ea6
variable.parameter, entity.name.variable.parameteritalic
keyword.control.new, keyword.operator.newbold italic
markup.italicitalic
markup.boldbold
markup.heading#205ea6bold
Valinor Theme by Diego Brocanelli - VS Code Theme