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#e26944
  • badge.background#FF9900
  • badge.foreground#FFFFFF
  • button.background#FF9900
  • button.foreground#FFFFFF
  • dropdown.background#333333
  • dropdown.border#FF9900
  • dropdown.foreground#FFFFFF
  • editor.background#000000
  • editor.foreground#FFFFFF
  • editor.inactiveSelectionBackground#FF990040
  • editor.lineHighlightBackground#333333
  • editor.selectionBackground#FF990080
  • editor.selectionHighlightBackground#FF990080
  • editorCursor.foreground#FF9900
  • editorIndentGuide.activeBackground1#FF9900
  • editorIndentGuide.background1#444444
  • editorWhitespace.foreground#444444
  • input.background#333333
  • input.border#FF9900
  • input.foreground#FFFFFF
  • list.activeSelectionBackground#FF9900
  • list.activeSelectionForeground#FFFFFF
  • list.hoverBackground#FF990080
  • list.hoverForeground#FFFFFF
  • list.inactiveSelectionBackground#FF990040
  • list.inactiveSelectionForeground#FFFFFF
  • sideBar.background#000000
  • sideBar.foreground#CCCCCC
  • statusBar.background#413875
  • statusBar.foreground#FFFFFF
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#FFFFFF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#757575
string, punctuation.definition.string, constant.other.symbol#FFC107
constant.numeric, constant.language, constant.character, constant.other#FF5722
keyword, storage#FF9900
storage.type#FF9900
entity.name.class, entity.name.type.class#FFCC80
variable, entity.name.variable, variable.parameter#FFFFFF
entity.name.function, meta.function-call#FFC107
support.function, support.constant, support.variable#FF9900
invalid, invalid.illegal#FFFFFF
entity.name.class, entity.name.type.class, entity.other.attribute-name.class.css, entity.other.attribute-name.class.sass, entity.other.attribute-name.class.scss, entity.other.attribute-name.class.less#FFCC80
meta.selector, entity.name.tag, entity.name.tag.css, entity.name.tag.sass, entity.name.tag.scss, entity.name.tag.less, entity.other.attribute-name.id, entity.other.attribute-name.id.css, entity.other.attribute-name.id.sass, entity.other.attribute-name.id.scss, entity.other.attribute-name.id.less#FF9900
entity.other.attribute-name.js, entity.other.attribute-name.jsx, entity.other.attribute-name.ts, entity.other.attribute-name.tsx#FFCC80
entity.name.type, entity.name.type.ts, entity.name.type.tsx, entity.name.type.interface, entity.name.type.interface.ts, entity.name.type.interface.tsx, entity.name.type.class, entity.name.type.class.ts, entity.name.type.class.tsx, entity.name.type.enum, entity.name.type.enum.ts, entity.name.type.enum.tsx, entity.name.type.function, entity.name.type.function.ts, entity.name.type.function.tsx, entity.name.type.method, entity.name.type.method.ts, entity.name.type.method.tsx, entity.name.type.property, entity.name.type.property.ts, entity.name.type.property.tsx#5499e9
support.type.property-name.json, variable.other.property.json#8bc9e7
constant.string.json#07ff51
string.quoted.double.json, string.quoted.single.json#9CDBB3
constant.numeric.json, constant.language.boolean.json#FF5722
punctuation.separator.key-value.json, punctuation.separator.array.json#FFFFFF
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.end.js#569cd6