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#16171d
  • activityBar.foreground#ffffff42
  • activityBarBadge.background#ff4a98
  • activityBarBadge.foreground#f8fafd
  • badge.background#ff4a98
  • button.background#16171d
  • debugToolBar.background#16171d
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#1d1f23
  • dropdown.border#181a1f
  • editor.background#171920
  • editor.findMatchHighlightBackground#121927
  • editor.foreground#8599b3
  • editor.lineHighlightBackground#383e4a
  • editor.selectionBackground#333470
  • editor.selectionHighlightBackground#484e5b
  • editor.wordHighlightBackground#484e5b
  • editor.wordHighlightStrongBackground#aab1c026
  • editorCursor.foreground#ff4a98
  • editorError.foreground#c24038
  • editorGroup.background#16171d
  • editorGroup.border#ffffff12
  • editorGroupHeader.tabsBackground#16171d
  • editorGroupHeader.tabsBorder#2c2e3a
  • editorHoverWidget.background#21252b
  • editorHoverWidget.border#181a1f
  • editorIndentGuide.background#202227
  • editorLineNumber.foreground#ccccff31
  • editorMarkerNavigation.background#21252b
  • editorRuler.foreground#2c2e3a
  • editorSuggestWidget.background#21252b
  • editorSuggestWidget.border#181a1f
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWhitespace.foreground#282f40
  • editorWidget.background#21252b
  • input.background#1d1f23
  • input.border#b0b1d80f
  • list.activeSelectionBackground#4c5ead58
  • list.focusBackground#4c5ead58
  • list.hoverBackground#b0b1d813
  • list.inactiveSelectionBackground#4c5ead58
  • list.inactiveSelectionForeground#ffffff
  • peekViewEditor.matchHighlightBackground#29244b
  • scrollbar.shadow#00000067
  • scrollbarSlider.activeBackground#ffffff13
  • scrollbarSlider.background#ffffff09
  • scrollbarSlider.hoverBackground#ffffff18
  • sideBar.background#16171d
  • sideBarSectionHeader.background#16171d
  • sideBarSectionHeader.foreground#ffffff94
  • sideBarTitle.foreground#ffffff75
  • statusBar.background#16171d
  • statusBar.foreground#ffffff75
  • statusBarItem.hoverBackground#16171d
  • tab.activeBackground#16171d
  • tab.activeBorder#16171d
  • tab.inactiveBackground#16171d
  • titleBar.activeBackground#16171d
  • titleBar.activeForeground#050a14
  • titleBar.inactiveBackground#282c34
  • titleBar.inactiveForeground#020305

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#8599b3ff—
comment, punctuation.definition.comment#5C6370italic
meta.brace.round.begin, meta.brace.round.end, meta.brace.square.begin, meta.brace.square.end, meta.brace.curly.begin.js, meta.brace.curly.end.js, meta.group.braces.round.function.arguments#ABB2BF—
string#0AFAFA—
string.regexp#98C379—
string.detected-link#7F83FF—
constant.numeric, constant.language#d16668—
constant.character#56B6C2—
constant.character.escape.backslash.regexp#98C379—
constant.other.key, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#56B6C2—
variable.other.object#3A8CC7—
meta.property.object.js#D19A66—
variable.other.class, meta.class.property variable.other.property#3A8CC7—
variable.other, meta.class.object.property.js, meta.property.class variable.other.property.static#D19A66—
variable.other.readwrite#ABB2BF—
meta.group.braces variable.other.readwrite#ABB2BF—
variable.language, meta.class variable.other.readwrite#3A8CC7—
variable.language.prototype#3A8CC7—
variable.function, entity.name.function, entity.name.function.arrow, meta.class-method.js entity.name.function.js, meta.method.property.js entity.name.function.js#ff4a98—
variable.function.constructor#fdcf76—
keyword.control, keyword.operator.new, keyword.operator.module, variable.language.super#7F83FF—
meta.preprocessor, entity.name.function.preprocessor#7F83FF—
entity.name.function.preprocessor#fdcf76—
meta.namespace.identifier entity.name.type, entity.name.variable#fdcf76—
cs.meta.namespace.function.identifier.body.class.method#05B4E5—
keyword, keyword.other.namespace, storage.modifier#7F83FF—
keyword.other.substitution.begin, keyword.other.substitution.end#56B6C2—
keyword.operator.accessor#ABB2BF—
keyword.operator, constant.other.color, punctuation.separator.key-value#56B6C2—
keyword.regexp, keyword.operator.quantifier.regexp, keyword.operator.or.regexp, keyword.control.anchor.regexp#98C379—
storage.type#7F83FF
entity.name.class, meta.class.extends variable.other.readwrite#fdcf76
entity.other.inherited-class#fdcf76italic underline
variable.parameter#ABB2BF
entity.name.tag#3A8CC7—
entity.other.attribute-name.html, entity.other.attribute-name.js, entity.other.attribute-name.jsx#D19A66italic
selector.css.entity.other.attribute-name#fdcf76—
support.function, support.class support.function#56B6C2
support.constant#D19A66
support.type, support.class#fdcf76
css.property-list.property-name#56B6C2
invalid#FFFFFF—
invalid.deprecated#523D14—
meta.structure.dictionary.json support.type.property-name#3A8CC7—
meta.structure.dictionary.json string.quoted.double.json#98C379—
meta.structure.dictionary.json string.quoted.double.detected-link#7F83FF—
markup.heading#3A8CC7—
string.other.link.title.markdown, string.other.link.description.markdown, meta.paragraph.markdown entity.name.tag.inline.any#05B4E5—
markup.underline.link.markdown, markup.underline.link.image.markdown#7F83FF—
markup.bold.markdown—bold
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown, punctuation.definition.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.raw.markdown, meta.paragraph.markdown punctuation.definition.tag#56B6C2—
markdown.fenced_code.block.markdown constant.numeric, markdown.fenced.code.block.markdown constant.numeric, markdown.fenced_code.block.markdown constant.language, markdown.fenced.code.block.markdown constant.language#D19A66—
markdown.block.fenced.code.string, markdown.block.fenced.code.string.quote#98C379—
markup.fenced_code.block.markdown keyword.operator, markup.fenced.code.block.markdown keyword.operator, markup.fenced_code.block.markdown keyword.control, markup.fenced.code.block.markdown keyword.control, markup.fenced_code.block.markdown storage.type, markup.fenced_code.block.markdown storage.type.function.lambda, markdown.block.fenced.code.lambda.storage.type#05B4E5—
markdown.block.fenced.code.operator.assignment#ABB2BF—
markdown.block.variable.parameter#D19A66—
meta.diff, meta.diff.header#75715E—
markup.deleted#F92672—
markup.inserted#A6E22E—
markup.changed#E6DB74—
constant.numeric.line-number.find-in-files - match#AE81FFA0—
entity.name.filename.find-in-files#E6DB74—
token.info-token#6796e6—
token.warn-token#cd9731—
token.error-token#f44747—
token.debug-token#b267e6—