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#33403e
  • activityBarBadge.background#0FA3EC
  • activityBarBadge.foreground#ffffff
  • badge.background#0FA3EC
  • button.background#293331
  • dropdown.background#293331
  • editor.background#222
  • editor.lineHighlightBackground#262e2d
  • editor.selectionBackground#63a69844
  • editor.wordHighlightStrongBackground#63a69844
  • editorGroupHeader.tabsBackground#1f2625
  • 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#293331
  • sideBarSectionHeader.background#293331
  • statusBar.background#1d1135
  • statusBar.debuggingBackground#4b8b3b
  • statusBar.noFolderBackground#4b8b3b
  • tab.activeBackground#33403e
  • tab.activeBorder#293331
  • tab.inactiveBackground#1f2625
  • textLink.foreground#293331
  • titleBar.activeBackground#33403e

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#77DD77
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#77DD77
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#fdfd96
punctuation#EEFFFF
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#77DD77
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#77DD77
support.type#77DD77
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#77DD77
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#77DD77italic
entity.other.attribute-name.class#77DD77
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...

Lunar Theme - Coding Theme