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
Coritiba Theme by Diego Ramos Claumann - VS Code Theme