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#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—
MangoChango Dark Theme (High Contrast) by Lino Garcia Vallejo - VS Code Theme