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#030e08
  • activityBar.foreground#a3e635
  • activityBarBadge.background#16a34a
  • activityBarBadge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#a3e635
  • breadcrumb.background#04120a
  • breadcrumb.focusForeground#4ade80
  • breadcrumb.foreground#3f6b52
  • editor.background#04120a
  • editor.foreground#dcfce7
  • editor.lineHighlightBackground#0a2414
  • editorGroup.emptyBackground#04120a
  • editorGroupHeader.tabsBackground#030e08
  • editorGroupHeader.tabsBorder#030e08
  • editorIndentGuide.activeBackground1#6ff0a3
  • editorIndentGuide.activeBackground2#56d985
  • editorIndentGuide.activeBackground3#41bf6b
  • editorIndentGuide.activeBackground4#35a558
  • editorIndentGuide.activeBackground5#2c8a49
  • editorIndentGuide.activeBackground6#1f6635
  • editorIndentGuide.background1#47d47a
  • editorIndentGuide.background2#39ab63
  • editorIndentGuide.background3#2b824b
  • editorIndentGuide.background4#206439
  • editorIndentGuide.background5#184b2b
  • editorIndentGuide.background6#11371f
  • sideBar.background#030e08
  • sideBarTitle.foreground#4ade80
  • statusBar.background#020b06
  • statusBar.foreground#dcfce7
  • tab.activeBackground#04120a
  • tab.activeBorderTop#22c55e
  • tab.activeForeground#a3e635
  • tab.inactiveBackground#03100a
  • tab.inactiveForeground#3f6b52
  • titleBar.activeBackground#030e08
  • titleBar.activeForeground#4ade80
  • titleBar.inactiveBackground#020b06
  • titleBar.inactiveForeground#3f6b52

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#3f6b52italic
variable, string constant.other.placeholder#dcfce7
constant.other.color#4ade80
invalid, invalid.illegal#22c55e
keyword, storage.type, storage.modifier#22c55e
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#84cc16
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#86efac
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#4ade80
meta.block variable.other#86efac
support.other.variable, string.other.link#86efac
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#a3e635
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#34d399
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#6ee7b7
support.type#dcfce7
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#6ee7b7
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#86efac
variable.language#86efacitalic
entity.name.method.js#4ade80italic
meta.class-method.js entity.name.function.js, variable.function.constructor#4ade80
entity.other.attribute-name#22c55e
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#6ee7b7italic
entity.other.attribute-name.class#86efac
source.sass keyword.control#4ade80
markup.inserted#4ade80
markup.deleted#34d399
markup.changed#22c55e
string.regexp#84cc16
constant.character.escape#84cc16
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#4ade80italic
source.js constant.other.object.key.js string.unquoted.label.js#86efacitalic
source.json meta.structure.dictionary.json support.type.property-name.json#22c55e
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#4ade80
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#a3e635
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#84cc16
text.html.markdown, punctuation.definition.list_item.markdown#dcfce7
text.html.markdown markup.inline.raw.markdown#22c55e
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#4ade80
markup.italic#86efacitalic
markup.bold, markup.bold string#86efacbold