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#223355
  • activityBarBadge.background#5DADE2
  • editor.background#1A1C1A
  • editor.foreground#F0EAD6
  • editorGroupHeader.tabsBackground#1A1C1A
  • panel.background#1A1C1A
  • sideBar.background#1c201c
  • sideBarTitle.foreground#D4AC0D
  • statusBar.background#223355
  • tab.activeBackground#1A1C1A
  • tab.inactiveBackground#2A2C2A
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#BD93F9
  • terminal.ansiBrightBlack#4D4D4D
  • terminal.ansiBrightBlue#D6ACFF
  • terminal.ansiBrightCyan#A4FFFF
  • terminal.ansiBrightGreen#69FF94
  • terminal.ansiBrightMagenta#FF92D0
  • terminal.ansiBrightRed#FF6E6E
  • terminal.ansiBrightWhite#E6E6E6
  • terminal.ansiBrightYellow#FFFFA5
  • terminal.ansiCyan#FFA500
  • terminal.ansiGreen#50FA7B
  • terminal.ansiMagenta#FF79C6
  • terminal.ansiRed#FF5555
  • terminal.ansiWhite#BFBFBF
  • terminal.ansiYellow#dddfc9
  • terminal.background#1A1C1A
  • terminal.foreground#F0EAD6
  • titleBar.activeBackground#223355

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#796681italic
variable, string constant.other.placeholder, variable.other.object.js, meta.var.expr.js, source.js, variable.other.object.jsx, meta.var.expr.jsx, source.jsx, variable.other.object.ts, meta.var.expr.ts, source.ts, variable.other.object.tsx, meta.var.expr.tsx, source.tsx#79bcf3
invalid, invalid.illegal#E74C3C
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#58D68D
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, string.quoted.double.tsx, meta.tag.attributes.tsx, meta.tag.tsx, meta.function.expression.tsx, meta.export.default.tsx, source.tsx#d8b28e
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#ff758f
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#1ABC9C
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#5DADE2
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#9B59B6italic
source.json meta.structure.dictionary.json support.type.property-name.json#F0EAD6
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#5DADE2
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#58D68D
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#9B59B6
entity.other.attribute-name#be95c4
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#5DADE2italic
text.html.markdown, punctuation.definition.list_item.markdown#F0EAD6
text.html.markdown markup.inline.raw.markdown#E74C3C
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#8c8c8c
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#58D68D
markup.italic#D4AC0Ditalic
markup.bold, markup.bold string#D4AC0Dbold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#D4AC0Dbold
markup.underline#1ABC9Cunderline
markup.quote punctuation.definition.blockquote.markdown#8c8c8c
markup.quote#9B59B6italic
string.other.link.title.markdown#5DADE2
string.other.link.description.title.markdown#58D68D
constant.other.reference.link.markdown#9B59B6
markup.raw.block#5DADE2
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#E74C3C
variable.language.fenced.markdown#9B59B6
meta.separator#8c8c8cbold
markup.table#F0EAD6
*url*, *link*, *uri*#5DADE2underline
string.regexp#58D68D
constant.character.escape#9B59B6
markup.changed#E74C3C
markup.inserted#58D68D
markup.deleted#E74C3C
variable.language#5DADE2italic
entity.name.method.js, entity.name.method.jsx, entity.name.method.ts, entity.name.method.tsx, meta.class-method.js entity.name.function.js, meta.class-method.jsx entity.name.function.jsx, meta.class-method.ts entity.name.function.ts, meta.class-method.tsx entity.name.function.tsx, variable.function.constructor.js, variable.function.constructor.jsx, variable.function.constructor.ts, variable.function.constructor.tsx#58D68Ditalic
variable.other.readwrite.alias.tsx, meta.import.tsx, source.tsx, variable.other.readwrite.alias.ts, meta.import.ts, source.ts, variable.other.readwrite.alias.jsx, meta.import.jsx, source.jsx, variable.other.readwrite.alias.js, meta.import.js, source.js#F0EAD6
keyword.control.import.js, meta.import.js, source.js, keyword.control.import.jsx, meta.import.jsx, source.jsx, keyword.control.import.tsx, meta.import.tsx, source.tsx, keyword.control.import.ts, meta.import.ts, source.ts#cfb929
storage.type.js, storage.type.jsx, storage.type.tsx, storage.type.ts#a3a8fd
meta.var.expr.tsx, meta.arrow.tsx, source.tsx, meta.var.expr.jsx, meta.arrow.jsx, source.jsx, meta.var.expr.ts, meta.arrow.ts, source.ts, meta.var.expr.js, meta.arrow.js, source.js#fae6ea
meta.jsx.children.tsx, meta.tag.without-attributes.tsx, meta.tag.tsx, meta.arrow.tsx, meta.var.expr.tsx, source.tsx, meta.jsx.children.jsx, meta.tag.without-attributes.jsx, meta.tag.jsx, meta.arrow.jsx, meta.var.expr.jsx, source.jsx#FCF7EB
meta.block.tsx, meta.block.jsx#f05f5f
support.class.builtin.js, support.class.builtin.jsx, support.class.builtin.ts, support.class.builtin.tsx#ff688b
meta.object.member.js, meta.objectliteral.js, new.expr.js, meta.var.expr.js, source.js, meta.object.member.jsx, meta.objectliteral.jsx, new.expr.jsx, meta.var.expr.jsx, source.jsx, meta.object.member.ts, meta.objectliteral.ts, new.expr.ts, meta.var.expr.ts, source.ts, meta.object.member.tsx, meta.objectliteral.tsx, new.expr.tsx, meta.var.expr.tsx, source.tsx#F0EAD6
meta.at-rule.media.header.css#da98f5
source.css.tailwind#fa8dc3
Devyasa Dark by Sanjeev Kujur - VS Code Theme