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#181D24
  • dropdown.background#1A2028
  • editor.background#11151B
  • editor.foreground#f0f0f0
  • editor.lineHighlightBackground#3c3c3c80
  • editor.selectionBackground#d98cff
  • editorCursor.foreground#f0f0f0
  • editorGroupHeader.tabsBackground#181D24
  • editorHoverWidget.background#181D24
  • editorIndentGuide.activeBackground1#707070
  • editorIndentGuide.background1#404040
  • editorRuler.foreground#ff8cbc
  • editorSuggestWidget.background#181D24
  • editorWhitespace.foreground#ff8cbc
  • editorWidget.background#181D24
  • input.background#1A2028
  • notifications.background#181D24
  • panel.background#181D24
  • quickInput.background#181D24
  • sideBar.background#181D24
  • sideBarSectionHeader.background#181D24
  • sideBarStickyScroll.background#181D24
  • statusBar.background#181D24
  • statusBar.noFolderBackground#181D24
  • tab.activeBackground#181D24
  • tab.border#181D24
  • tab.inactiveBackground#161B22
  • terminal.ansiBlack#102210
  • terminal.background#181D24
  • terminal.foreground#ff79c6
  • terminalCursor.foreground#4455bb
  • titleBar.activeBackground#181D24
  • titleBar.inactiveBackground#161B22

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#f0f0f0ff—
text.xml#f0f0f0—
comment#BBAA99—
string, string.value, string.quoted.single.scss, string.quoted.double.php, meta.return-type, meta.type.cast.expr, meta.type.new.expr, meta.preprocessor.string, variable.other.constant.ts, support.constant.math, support.constant.dom, support.constant.json, markup.inline.raw, invalid.illegal.bad-ampersand.html, constant.character.escape.scss, string.quoted.double.json, markup.list.unnumbered.markdown#CBC3FF—
string.quoted.double.html, string.quoted.double.xml, meta.paragraph.markdown#23ecfb—
constant.regexp, string.regexp, string.regexp.double-quoted.php#F0F0F0—
constant.numeric, meta.preprocessor.numeric, keyword.other.unit, constant.sha.git-rebase#33CC99—
constant.language#ff79c6—
constant.character, constant.other#ff79c6—
entity.name.type.instance.jsdoc#00F9AC—
storage.type.class.jsdoc#A467CC—
variable, variable.css, variable.scss, variable.other.less, variable.language, support.other.variable, entity.name.function, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy, variable.other.object.js, variable.object.property.ts, support.type.property-name.json, source.python#23ecfb—
entity.name, support.type.property-name, support.type.vendored.property-name, meta.definition.variable.name, meta.object-literal.key, meta.object-literal.key.ts, variable.other.readwrite.js, variable.other.readwrite.ts#23ecfb—
variable.other.object.property.js, variable.other.object.property.ts, variable.other.property.js, variable.other.property.ts, variable.other.constant.property.js.jsx, support.variable.property.dom.js.jsx, variable.other.readwrite.alias.js.jsx#BB77FF—
keyword, keyword.control, keyword.other#fe3496—
keyword.operator.logical.js, keyword.operator.logical.ts, keyword.operator.relational.js, keyword.operator.relational.ts, keyword.operator.comparison.js, keyword.operator.comparison.ts, keyword.operator.expression, keyword.operator.ternary.js, keyword.operator.ternary.ts, keyword.operator.assignment.js, keyword.operator.assignment.ts, keyword.operator.optional.ts#FFFF00—
keyword.operator.new#fe3496—
storage, storage.modifier, storage.type.function#fe3496—
storage.type, storage.modifier.declaration.python#FF6F77—
entity.name.class#76EE00—
entity.other.inherited-class#76EE00—
entity.name.function, entity.name.function.js, support.function#76EE00—
variable.parameter, meta.indexer.declaration.ts#FD971F—
entity.name.tag#fe3496—
entity.other.attribute-name#76EE00—
support.constant, support.constant.dom, support.class, support.type, support.variable, support.other#23ecfb—
variable.language#fe3496—
invalid#F0F0F0—
invalid.deprecated#F0F0F0—
meta.diff, meta.diff.header#787878—
meta.selector#F0F0F0—
support.constant.media, support.constant.media-type, keyword.control.at-rule.media.scss#FD971F—
support.constant.media.css#76EE00—
entity.other.attribute-name.class.mixin.css#FD971F—
entity.other.attribute-name.id.css#fe3496—
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#F0F0F0—
entity.other.attribute-name.class.css#76EE00—
support.constant.property-value, support.constant.font-name, support.constant.color, constant.other.color.rgb-value, constant.other.rgb-value #4499FF—
keyword.operator.logical.scss#fe3496—
entity.name.tag.reference.scss#F0F0F0—
variable.parameter.url.scss#F0F0F0—
variable.parameter.url.scss#E6DB74—
entity.name.tag.css#fe3496—
meta.property-name.scss#23ecfb—
keyword.control.at-rule.include.scss, meta.at-rule.include.scss#FD971F—
support.type.property-name#23ecfb—
punctuation.definition.tag#fe3496—
punctuation.definition.string.begin.html, punctuation.definition.string.end.html, meta.tag.inline.any.html#FFFF00—
constant.character.entity.xml#FD971F—
punctuation.section.embedded.begin.metatag.php, punctuation.section.embedded.end.metatag.php#76EE00—
punctuation.terminator.expression.php#F0F0F0—
keyword.operator.logical.php#fe3496—
constant.other.php, meta.embedded.line.php#F0F0F0—
entity.name.function.php, meta.function-call.generic.python#76EE00—
meta.function.arguments.php#FD971F—
support.function.construct.output.php#fe3496—
support.function.construct.php#fe3496—
punctuation.separator.key-value.js, meta.function.js, punctuation.js, meta.brace.square.ts, punctuation.definition.block.ts, punctuation.definition.arguments, punctuation.separator.arguments.python#F0F0F0—
keyword.operator.rest.js, keyword.operator.spread.js#76EE00—
keyword.operator.new.js#fe3496—
entity.name.type.class.js#FD971F—
support.type.primitive.ts, meta.type.annotation.ts, support.type.builtin.ts#CC33FF—
entity.name.type.ts, meta.return.type.ts, variable.other.constant.object.ts#FF55DD—
support.constant.json.js, punctuation.separator.dictionary.pair.json#F0F0F0—
constant.numeric.json#76EE00—
punctuation.separator.dictionary.key-value.json#FFFF00—
meta.structure.dictionary.json, meta.structure.array.json#F0F0F0—
keyword.operator.new.ts#fe3496—
token.info-token#6796e6—
token.warn-token#cd9731—
token.error-token#f44747—
token.debug-token#b267e6—
markup.bold.markdown, markup.italic.markdown#44B9EFbold
markup.deleted#fe3496—
markup.inserted#76EE00—
markup.changed#EEEE22—
markup.underline—underline
markup.bold—bold
beginning.punctuation.definition.list.markdown#BB77FF—
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown, punctuation.definition.link.markdown#BB77FF—
punctuation.definition.heading.markdown#fe3496—
meta.link.inline.markdown, markup.underline.link.image.markdown, markup.underline.link.markdown#76EE00underline
punctuation.definition.metadata.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#FFFF00bold
markup.fenced_code.block.markdown#fe3496—
string.other.link.title.markdown#76EE00—
entity.name.section.markdown#33CC99bold