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#cfd5dd
  • editor.background#EEDEBC
  • editor.foreground#6688cc
  • editor.lineHighlightBackground#cfd5dd
  • editor.selectionBackground#D9E3C8
  • editorBracketMatch.background#2084d0
  • editorBracketMatch.border#440b0b
  • editorGroupHeader.tabsBackground#E3D9BB
  • editorGutter.background#EEDEBC
  • editorLineNumber.foreground#c24f4f74
  • scrollbarSlider.background#cfd5dd
  • scrollbarSlider.hoverBackground#979788
  • sideBar.background#cfd5dd
  • statusBar.background#cfd5dd
  • tab.activeForeground#440b0b
  • tab.border#cfd5dd
  • tab.inactiveBackground#cfd5dd
  • tab.inactiveForeground#440b0b95

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
invalid#999999—
variable.other.readwrite,variable.other.readwrite.js,variable.other.readwrite.ts,variable.other.readwrite.tsx,variable.other.object.js,punctuation.accessor.js#cd4e44—
variable.other.property.js#00AFD6—
keyword.control.at-rule.import.scss,keyword.control.module.js,keyword.operator.accessor—bold
keyword.control.import.js,keyword.control.from.js,keyword.control.export.js,keyword.control.default.js,support.type.object.module.ts—bold
entity.name.function.method#d33682—
entity.name.function,support.function.dom.js#2c91afbold
string.template#22aa44—
string.quoted.single.js,string.quoted.single.scss,string.quoted.single.attribute-value.scss,string.quoted.single.json,string.quoted.single.ts#22aa44—
string.quoted.double.js,string.quoted.double.scss,string.quoted.double.attribute-value.scss,string.quoted.double.json,string.quoted.double.ts#22aa44—
constant.other.object.key.js,meta.object-literal.key.js,support.type.property-name.json,meta.object-literal.key.ts,variable.other.property.ts#fe7d9d—
support.class.builtin.js#555555bold
comment#384887—
comment.block.documentation#384887—
comment.line.double-slash,punctuation.definition.comment.scss,comment.line.scss#999999—
punctuation.definition.comment.html#999999—
comment.block.html#384887—
variable.language.this,storage.type.function.js,keyword.control.flow.js,support.variable.dom.js,support.variable.property.dom.js,support.function.promise.ts,keyword.control.flow.ts#d33682bold
constant.language.null.js#666666bold
constant.language.boolean,constant.language.boolean.false.ts,constant.language.boolean.true.ts#2c91afbold
support.type.object.console.js#d33682bold
support.function.console.js#2c91afbold
variable.other.class.js#d33682bold
entity.other.attribute-name,entity.other.attribute-name.class.css#268bd2bold
support.type.property-name.scss,support.type.property-name.css#fe7d9ditalic
support.constant.property-value.scss,support.constant.property-value.css#3C8F93italic
entity.name.tag.scss,support.constant.tag.css#dc322fbold
support.function.misc.scss#2c91afbold
variable.scss#00AFD6—
variable.language.constructor#9966b8—
—#6688cc—
constant.numeric#0000ff—
constant.language#f280d0—
constant.character, constant.other#f280d0—
variable—
keyword#225588—
storage#225588
storage.type#9966b8italic
storage.type.let#edededitalic
entity.name.class, entity.name.type#49006Aunderline
entity.other.inherited-class#ddbb88italic underline
variable.parameter#2277ffitalic
entity.name.tag#225588
support.function#9966b8
meta.diff, meta.diff.header#E0EDDDitalic
markup.deleted#dc322f—
markup.changed#cb4b16—
markup.inserted#219186—
markup.quote#22aa44—
markup.bold, markup.italic#22aa44—
markup.inline.raw#9966b8—
markup.heading.setext#ddbb88—
Allegory Theme by selfrefactor - VS Code Theme