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#000
  • activityBarBadge.background#0FA3EC
  • activityBarBadge.foreground#ffffff
  • badge.background#0FA3EC
  • button.background#293331
  • dropdown.background#293331
  • editor.background#000
  • editor.lineHighlightBackground#262e2d
  • editor.selectionBackground#63a69844
  • editor.wordHighlightStrongBackground#63a69844
  • editorGroupHeader.tabsBackground#000
  • editorSuggestWidget.highlightForeground#0FA3EC
  • editorWidget.background#33403e
  • focusBorder#293331
  • input.background#1f2625
  • input.border#33403e
  • list.activeSelectionBackground#33403e
  • list.dropBackground#475957
  • list.focusBackground#475957
  • list.hoverBackground#33403e
  • list.inactiveSelectionBackground#33403e
  • menu.background#1d2625
  • pickerGroup.foreground#293331
  • progressBar.background#fd4b00
  • selection.background#63a69844
  • sideBar.background#000
  • sideBarSectionHeader.background#000
  • statusBar.background#1d1135
  • statusBar.debuggingBackground#4b8b3b
  • statusBar.noFolderBackground#4b8b3b
  • tab.activeBackground#33403e
  • tab.activeBorder#293331
  • tab.inactiveBackground#000
  • textLink.foreground#293331
  • titleBar.activeBackground#000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#FFFitalic
variable, string constant.other.placeholder, meta.object-literal.key.js#c0eb75
constant.other.color#ffffff
invalid, invalid.illegal#fd5d78
keyword, storage.type, storage.modifier
punctuation.definition.block.tag.jsdoc
punctuation.definition.string#0FA3EC
punctuation.definition.bracket.curly.begin.jsdoc, punctuation.definition.bracket.curly.end.jsdoc#c0eb75
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#e67700
punctuation#EEFFFF
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#c0eb75
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#0FA3EC
meta.block variable.other#0FA3EC
support.other.variable, string.other.link#fd5d78
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#fd5d78
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#fd5d78
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#c0eb75
support.type#c0eb75
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#0FA3EC
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#fd5d78
variable.language#0FA3ECitalic
entity.name.method.js#0FA3ECitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#0FA3EC
entity.other.attribute-name#c0eb75
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#c0eb75italic
entity.other.attribute-name.class#c0eb75
source.sass keyword.control#0FA3EC
markup.inserted#C3E88D
markup.deleted#FF5370
markup.changed#0FA3EC
string.regexp#0FA3EC
constant.character.escape#0FA3EC
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#0FA3ECitalic
source.js constant.other.object.key.js string.unquoted.label.js#fd5d78italic

Shiki preview

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

Loading...