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.activeBackground#00794f
  • activityBar.activeBorder#4caf50
  • activityBar.background#00593f
  • activityBar.border#00593f
  • activityBar.foreground#ffffff
  • editor.background#ffffff
  • editor.foreground#000000
  • editor.inactiveSelectionBackground#00000000
  • editor.lineHighlightBackground#f0f0f0
  • editor.selectionBackground#add6ff
  • panel.background#ffffff
  • panel.border#c8e6c9
  • sideBar.background#e8f5e9
  • sideBar.border#c8e6c9
  • sideBar.foreground#1b5e20
  • statusBar.background#00593f
  • statusBar.debuggingBackground#2e7d4e
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#003d2b
  • tab.activeBackground#ffffff
  • tab.activeBorder#4caf50
  • tab.activeForeground#000000
  • tab.border#c8e6c9
  • tab.inactiveBackground#e8f5e9
  • tab.inactiveForeground#558b2f
  • terminal.background#ffffff
  • terminal.foreground#000000
  • titleBar.activeBackground#e8f5e9
  • titleBar.activeForeground#1b5e20
  • titleBar.inactiveBackground#f1f8e9
  • titleBar.inactiveForeground#7cb342

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#008000italic
keyword, storage.type, storage.modifier#0000FF
keyword.control#AF00DB
string, string.quoted#A31515
variable, variable.other.readwrite#001080
variable.other.constant, variable.other.enummember#0070C1
entity.name.function, support.function#795E26
entity.name.type, entity.name.class, support.type, support.class#267F99
constant.numeric, constant.language.boolean, constant.language.null, constant.language.undefined#098658
constant.character, constant.other#0070C1
invalid#CD3131
markup.heading#0000FFbold
markup.bold#0000FFbold
entity.name.tag, meta.tag#800000
entity.other.attribute-name, entity.other.attribute-name.html#FF0000
meta.tag.structure.any.html, meta.tag.metadata.script.html, meta.tag.metadata.style.html#800000
punctuation.definition.tag#800000
string.quoted.double.html, string.quoted.single.html#0000FF
variable.other.object.js, variable.other.object.ts#001080
variable.other.property.js, variable.other.property.ts#001080
support.class.builtin.js, support.class.builtin.ts#267F99
support.type.object.module.js, support.type.object.module.ts#267F99
storage.type.function.js, storage.type.function.ts#0000FF
keyword.operator.new.js, keyword.operator.new.ts#0000FF
storage.type.class.js, storage.type.class.ts#0000FF
variable.language.this.js, variable.language.this.ts, variable.language.super.js, variable.language.super.ts#0000FF
meta.type.annotation.ts, meta.type.annotation.tsx, meta.return.type.ts, meta.return.type.tsx#267F99
support.type.primitive.ts, support.type.primitive.tsx#267F99
keyword.operator.type.ts, keyword.operator.type.tsx, keyword.operator.type.annotation.ts, keyword.operator.type.annotation.tsx#0000FF
entity.name.type.interface.ts, entity.name.type.interface.tsx, entity.name.type.alias.ts, entity.name.type.alias.tsx#267F99
support.type.builtin.ts, support.type.builtin.tsx#267F99
variable.parameter.ts, variable.parameter.tsx#001080
meta.definition.property.ts, meta.definition.property.tsx, variable.object.property.ts, variable.object.property.tsx#001080
storage.type.function.arrow.ts, storage.type.function.arrow.tsx#0000FF
keyword.operator.expression.typeof.ts, keyword.operator.expression.typeof.tsx#0000FF
support.variable.property.ts, support.variable.property.tsx#001080
entity.name.type.ts, entity.name.type.tsx#267F99
support.type.any.ts, support.type.any.tsx#FF1744bold underline