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#21252b
  • editor.background#282c34
  • editor.foreground#abb2bf
  • editor.lineHighlightBackground#99bbff0a
  • editor.selectionBackground#007acc
  • editorGroupHeader.tabsBackground#21252b
  • editorIndentGuide.activeBackground#5c626a
  • editorLineNumber.activeForeground#abb2bf
  • editorWarning.foreground#ffc66d
  • list.activeSelectionBackground#007acc
  • list.activeSelectionForeground#ffffff
  • list.hoverBackground#3a3f4b
  • list.inactiveSelectionBackground#3a3f4b
  • scrollbar.shadow#00000000
  • sideBar.background#21252b
  • sideBar.foreground#abb2bf
  • tab.inactiveBackground#21252b
  • tab.inactiveForeground#9da5b499
  • titleBar.activeBackground#21252b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, keyword.operator.new, keyword.operator.expression, storage, variable.language.this, constant.language#cc7832bold
keyword.operator, punctuation.section.embedded, punctuation.definition.template-expression#cc7832
entity.name.type, entity.other.inherited-class, support.class.component, support.constant.math, support.class.builtin#ffc66d
comment#808080
entity.name.function, support.function#7a9ec2
string#98c379
constant.character#9876aa
constant.numeric#7aaeb8
variable.other.property, variable.other.object.property, meta.object-literal.key, support.variable.property#9876aa
entity.other.attribute-nameitalic
support.type.property-name, support.type.vendored.property-name, entity.name.tag#9876aa
support.constant.property-value, support.constant.color.w3c-standard-color-name#98c379
entity.name.tag.reference, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element#ffc66ditalic
punctuation.definition.group.regexp, punctuation.definition.character-class.regexp#ffc66d
constant.other.character-class.regexp, constant.other.character-class.set.regexp#9876aa
text.html.markdown punctuation.definition, text.html.markdown beginning.punctuation.definition#cc7832
meta.brace.round, meta.template.expression, variable.interpolation.scss#abb2bf