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.accessorbold
keyword.control.import.js,keyword.control.from.js,keyword.control.export.js,keyword.control.default.js,support.type.object.module.tsbold
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