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#060c12
  • activityBar.border#ffffff09
  • activityBar.foreground#6e7d9a
  • activityBarBadge.background#ffffff09
  • activityBarBadge.foreground#6e7d9a
  • button.background#ff006a
  • button.foreground#ffffff
  • checkbox.border#ffffff09
  • diffEditor.border#ffffff09
  • dropdown.background#0a1016
  • dropdown.border#ffffff09
  • editor.background#0e141a
  • editor.foreground#ffffff
  • editorCursor.foreground#ff006a
  • editorGroup.border#ffffff09
  • editorGroupHeader.tabsBackground#0e141a
  • editorGroupHeader.tabsBorder#ffffff09
  • editorLineNumber.foreground#5a6986aa
  • editorRuler.foreground#ffffff09
  • editorSuggestWidget.background#0a1016
  • editorSuggestWidget.selectedBackground#ffffff15
  • editorWidget.background#0e141a
  • editorWidget.border#ffffff09
  • focusBorder#ff006a44
  • gitDecoration.ignoredResourceForeground#6e7d9abb
  • gitDecoration.modifiedResourceForeground#f5af19
  • gitDecoration.untrackedResourceForeground#aaed36
  • input.background#0c1116
  • input.border#ffffff09
  • input.foreground#ffffff
  • list.activeSelectionBackground#00000000
  • list.hoverBackground#00000000
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#00000000
  • list.inactiveSelectionForeground#ffffff
  • menu.border#ffffff09
  • menu.selectionBackground#ffffff15
  • panel.background#0a1016
  • panel.border#ffffff09
  • panelTitle.activeForeground#6e7d9abb
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#ffffff09
  • scrollbarSlider.background#ffffff04
  • scrollbarSlider.hoverBackground#ffffff09
  • sideBar.background#0a1016
  • sideBar.border#ffffff09
  • sideBar.foreground#6e7d9a
  • sideBarTitle.foreground#6e7d9abb
  • statusBar.background#0a1016
  • statusBar.border#ffffff09
  • statusBar.debuggingBackground#0a1016
  • statusBar.foreground#6e7d9abb
  • statusBar.noFolderBackground#0a1016
  • tab.activeBackground#0e141a
  • tab.activeBorderTop#ff006a
  • tab.border#00000000
  • tab.inactiveBackground#0e141a
  • tab.inactiveForeground#6e7d9abb
  • terminalCursor.foreground#ff006a
  • titleBar.activeBackground#0a1016
  • titleBar.activeForeground#6e7d9a
  • titleBar.border#ffffff09
  • titleBar.inactiveBackground#060c12
  • titleBar.inactiveForeground#6e7d9aaa
  • welcomePage.buttonBackground#0c1116
  • welcomePage.buttonHoverBackground#ffffff04
  • widget.shadow#ffffff09
  • window.activeBorder#0e141a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, fenced_code.block.language.markdown#5a6986aaitalic
entity.name.tag, constant.other.color, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, keyword.other.template, keyword.other.substitution, support.type, 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, meta.arrow.js.jsx, meta.brace.square.js.jsx, storage.type.function.arrow.js, keyword.operator.assignment.js, punctuation.terminator.rule.css, constant.language.symbol.hashkey.ruby, keyword.operator.comparison.ruby, punctuation.separator.other.ruby, punctuation.section.embedded.begin.erb, punctuation.section.embedded.end.erb, meta.object-literal.key.js.jsx, variable.language.this.js.jsx, meta.import.js string, meta.import.js variable, meta.import.js meta.block variable.other, meta.import.tsx, meta.import.tsx string, meta.import.tsx variable, meta.import.tsx meta.block variable.other, meta.import.ts, meta.import.ts string, meta.import.ts variable, meta.import.ts meta.block variable.other, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#6e7d9a
variable, string constant.other.placeholder, meta.block variable.other, entity.name.method.js, meta.class-method.js entity.name.function.js, variable.function.constructor, markup.changed, constant.character.escape, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, markup.inline.raw.string.markdown, entity.other.attribute-name.class.css, entity.other.inherited-class.ruby, keyword.control.pseudo-method.ruby#44dfff
keyword, entity.other.attribute-name, storage.type, constant.other.color, storage.modifier, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other, constant.other.symbol, constant.other.key, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, punctuation.section.embedded, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, meta.brace.round.js.jsx, variable.other.property.js.jsx, meta.array.literal.js.jsx#ffffff
invalid, invalid.illegal, entity.name.function, meta.tag.sgml, markup.deleted.git_gutter, keyword.control, meta.function-call, variable.function, support.function, support.other.variable, string.other.link, entity.name, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, entity.name.module.js, variable.import.parameter.js, variable.other.class.js, markup.deleted, source.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.tag, keyword.other.important.css, keyword.other.important.scss, keyword.control.ruby#ff006a
entity.other.attribute-name.pseudo-class.css, string, entity.other.inherited-class, keyword.other.special-method, markup.inserted.git_gutter, variable.language, source.sass keyword.control, string.regexp, source.js constant.other.object.key.js string.unquoted.label.js, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, entity.other.attribute-name.id, variable.parameter#aaed36
text.html.markdown, punctuation.definition.list_item.markdown, markup.italic#dddddd
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, keyword.operator.logical.js.jsx, constant.language.symbol.ruby#f5af19
markup.italicitalic
markup.bold, markup.bold string, entity.name, entity.other.inherited-class, entity.other.attribute-name.class.css, keyword.other.important.css, keyword.other.important.scss, support.class.ruby, meta.import.js variable, meta.import.js meta.block variable.other, meta.import.js stringbold
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#ccccccbold
markup.underline#65737Eunderline
markup.quote punctuation.definition.blockquote.markdown#65737E
markup.quote#65737Eitalic
string.other.link.title.markdown#44dfff
string.other.link.description.title.markdown#65737E
constant.other.reference.link.markdown#44dfff
markup.raw.block#cccccc
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#EEFFFF
variable.language.fenced.markdown#6e7d9a
meta.separator#6e7d9a
markup.table#6e7d9a
meta.import.js, punctuation.terminator.statement.js, keyword.control.import.js, keyword.control.from.js, keyword.control.import.tsx, keyword.control.from.tsx, keyword.control.import.ts, keyword.control.from.ts#5a6986aa