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.underlineunderline
markup.boldbold
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

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...