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.

  • editor.background#1f2430
  • editor.foreground#cbccc6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#5c6773italic
string, constant.other.symbol#bae67e—
string.quoted, variable.other.readwrite.js#ffd580—
string.regexp, constant.character, constant.other#95e6cb—
constant.numeric, constant.character.numeric#ffa7c4
constant.language#ffd580—
variable#ffffff—
variable.member#f28779—
variable.language#ffa7c4italic
storage#ffa7c4—
keyword#ffa7c4—
keyword.control.conditional.js, keyword.operator.comparison, keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.ruby, keyword.control.def.ruby, keyword.control.loop.js, keyword.control.loop.ts, keyword.control.import.js, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx, keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.switch.js, keyword.control.switch.ts#ffa7c4italic
punctuation.separator, punctuation.terminator, meta.brace.round, punctuation.definition.block#c792ea—
punctuation.section#c792ea—
punctuation.accessor#c792ea—
source.java storage.type, source.haskell storage.type, source.c storage.type#73d0ff—
entity.other.inherited-class#7fdbca—
storage.type.function#ffa7c4—
source.java storage.type.primitive#7acdde—
entity.name.function#7fdbca—
variable.parameter, meta.parameter#d4bfff—
variable.parameter.function#7fdbca
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other#d6deeb—
variable.parameter.function.js#7986E7—
variable.parameter.function.python, meta.function-call.arguments.python#82AAFF—
variable.other.readwrite.js, variable.parameter#d7dbe0—
variable.function, variable.annotation, meta.function-call.generic, support.function.go#ffd580—
support.function, support.constant#c792ea—
support.function#82AAFFitalic
support.type.vendor.property-name, support.constant.vendor.property-value, support.type.property-name, meta.property-list entity.name.tag#7acdde
entity.name.import, entity.name.package#bae67e—
entity.name#ffd096—
support.constant.meta.property-value#7fdbca—
support.type, support.class, source.go storage.type#ffa7c4—
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#ffd580—
variable.other.object.property#d7dbe0italic
variable.other.object.js—
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property#7fdbca—
invalid#ff3333—
meta.diff, meta.diff.header#c594c5—
source.ruby variable.other.readwrite#ffd580—
support.type.property-name.json#addb67—
support.constant.json#addb67—
meta.structure.dictionary.value.json string.quoted.double#c789d6—
string.quoted.double.json punctuation.definition.string.json#7acdde—
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#ff5874—
meta.object-literal.key—italic
entity.other.attribute-name.id.html#addb67italic
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.html#7fdbca—
meta.tag.sgml.doctype.html#c792ea
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#c792ea—
entity.other.attribute-name#bae67e—
entity.name.tag, meta.tag.other.html, meta.tag.html#7fdbca
meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, meta.tag.js, meta.tag.tsx#ffa7c4
entity.other.attribute-name#addb67italic
entity.name.tag.custom#addb67—
meta.selector#c792ea
entity.other.attribute-name.id#ffd580—
meta.property-name#7acdde—
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag#ffa7c4—
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#5c6773—
entity.other.attribute-name.class.css#ffd580
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, support.constant.property-value.css, entity.other.attribute-name.parent-selector.css#ffa7c4
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#7fdbca—
keyword.other.unit, keyword.other.unit.css, keyword.other.unit.less, keyword.other.unit.scss, keyword.other.unit.sass#FFEB95—
meta.attribute-selector.css entity.other.attribute-name.attribute#F78C6C—
entity.name.tag.less#7fdbca—
meta.attribute-selector.less entity.other.attribute-name.attribute#F78C6C—
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass, variable.less, variable.parameter.url.less#addb67bold
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#82AAFF—
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#bec5d4—
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute#F78C6C—
entity.name.tag.scss, entity.name.tag.sass#7fdbca—
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#d6deeb—
variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts#d6deeb—
entity.name.type.ts, entity.name.type.tsx#ffd580—
support.class.node.ts, support.class.node.tsx#82AAFF—
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#5f7e97—
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block#d6deeb—
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#82AAFF—
meta.tag.js meta.jsx.children.tsx#82AAFF—
constant.numeric.line-number.find-in-files - match#5c6773—
constant.numeric.line-number.match#ffa7c4—
entity.name.filename.find-in-files#bae67e—
message.error#ff3333—
markup.heading, markup.heading entity.name#7fdbcabold
markup.underline.link.markdown, markup.underline.link.image.markdown#ff869a—
string.other.link.title.markdown, string.other.link.description.markdown#d6deeb—
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string#7fdbca—
punctuation.definition.metadata.markdown#7fdbca—
beginning.punctuation.definition.list.markdown#7fdbca—
markup.inline.raw.string.markdown#bae67e—
markup.italic#c792eaitalic
markup.bold.mark#bae67ebold
markup.italic markup.bold, markup.bold markup.italic—bold italic
markup.quote#697098italic
markup.inline.raw#7acdde—
markup.raw——
markup.raw.inline——
meta.separator#5c6773bold
markup.quote#95e6cbitalic
markup.list punctuation.definition.list.begin#ffd580—
markup.inserted#a6cc70—
markup.changed#77a8d9—
markup.deleted#f27983—
markup.strike#ffd580—
markup.table#7acdde—
text.html.markdown markup.inline.raw#f29e74—
text.html.markdown meta.dummy.line-break#5c6773—
punctuation.definition.markdown#5c6773—
ThemeDatabase All Themes by enes ozturk - VS Code Theme