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#1a2332
  • activityBar.border#2a3b4d
  • activityBar.foreground#89c4f4
  • activityBar.inactiveForeground#6b7c8f
  • activityBarBadge.background#7fb069
  • activityBarBadge.foreground#1a2332
  • button.background#7fb069
  • button.foreground#1a2332
  • button.hoverBackground#89c4f4
  • dropdown.background#2a3b4d
  • dropdown.border#4a5d70
  • dropdown.foreground#d4c5b9
  • editor.background#1a2332
  • editor.findMatchBackground#7fb069aa
  • editor.findMatchHighlightBackground#7fb06955
  • editor.findRangeHighlightBackground#5a7a3d33
  • editor.foreground#d4c5b9
  • editor.hoverHighlightBackground#354b6644
  • editor.inactiveSelectionBackground#2a4562
  • editor.lineHighlightBackground#243447
  • editor.selectionBackground#3d5a7a
  • editor.selectionHighlightBackground#354b66
  • editor.wordHighlightBackground#3d5a7a66
  • editor.wordHighlightStrongBackground#5a7a3d66
  • editorCursor.foreground#7fb069
  • editorGroupHeader.tabsBackground#1f2937
  • editorGroupHeader.tabsBorder#2a3b4d
  • editorHoverWidget.background#2a3b4d
  • editorHoverWidget.border#4a5d70
  • editorIndentGuide.activeBackground#5a6b7e
  • editorIndentGuide.background#3a4b5e
  • editorLineNumber.activeForeground#89c4f4
  • editorLineNumber.foreground#6b7c8f
  • editorLink.activeForeground#89c4f4
  • editorRuler.foreground#3a4b5e
  • editorWhitespace.foreground#4a5d70
  • input.background#2a3b4d
  • input.border#4a5d70
  • input.foreground#d4c5b9
  • input.placeholderForeground#6b7c8f
  • panel.background#1f2937
  • panel.border#2a3b4d
  • panelTitle.activeForeground#89c4f4
  • panelTitle.inactiveForeground#6b7c8f
  • scrollbarSlider.activeBackground#4a5d70bb
  • scrollbarSlider.background#4a5d7066
  • scrollbarSlider.hoverBackground#4a5d7099
  • sideBar.background#1f2937
  • sideBar.border#2a3b4d
  • sideBar.foreground#c9ada7
  • sideBarSectionHeader.background#2a3b4d
  • sideBarSectionHeader.foreground#89c4f4
  • sideBarTitle.foreground#89c4f4
  • statusBar.background#7fb069
  • statusBar.debuggingBackground#d4a574
  • statusBar.debuggingForeground#1a2332
  • statusBar.foreground#1a2332
  • statusBar.noFolderBackground#6b7c8f
  • tab.activeBackground#1a2332
  • tab.activeBorder#7fb069
  • tab.activeForeground#d4c5b9
  • tab.border#2a3b4d
  • tab.inactiveBackground#1f2937
  • tab.inactiveForeground#89a4c4
  • terminal.ansiBlack#1a2332
  • terminal.ansiBlue#89c4f4
  • terminal.ansiCyan#7fb0d3
  • terminal.ansiGreen#7fb069
  • terminal.ansiMagenta#c9ada7
  • terminal.ansiRed#d4a574
  • terminal.ansiWhite#d4c5b9
  • terminal.ansiYellow#e9c46a
  • terminal.background#1a2332
  • terminal.foreground#d4c5b9
  • titleBar.activeBackground#1a2332
  • titleBar.activeForeground#d4c5b9
  • titleBar.border#2a3b4d
  • titleBar.inactiveBackground#1f2937
  • titleBar.inactiveForeground#6b7c8f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6b7c8fitalic
variable, string constant.other.placeholder#d4c5b9
constant.other.color#89c4f4
invalid, invalid.illegal#d4a574
keyword, storage.type, storage.modifier#7fb069
punctuation, punctuation.separator.inheritance.php, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#6a8caf
punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.xml, meta.tag#7fb069
entity.name.tag, entity.name.tag.html, entity.name.tag.xml, meta.tag.sgml, markup.deleted.git_gutter#85c1e8bold
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#89c4f4
meta.block variable.other#c9ada7
support.other.variable, string.other.link#c9ada7
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#e9c46a
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#a8dadc
string.quoted.double.js, string.quoted.single.js, string.template.js, string.quoted.double.ts, string.quoted.single.ts, string.template.ts#a8dadc
string.quoted.double.css, string.quoted.single.css, support.constant.property-value.css#a8dadc
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#d4a574
support.type#89c4f4
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#89c4f4
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#d4a574
variable.language#d4a574italic
entity.name.method.js#89c4f4italic
meta.class-method.js entity.name.function.js, variable.function.constructor#89c4f4
entity.other.attribute-name#7fb069
entity.other.attribute-name, text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.xml#f4a261italic
string.quoted.double.html, string.quoted.single.html, string.quoted.double.xml, string.quoted.single.xml, meta.attribute-with-value.html string, meta.attribute-with-value.xml string#a8dadc
entity.other.attribute-name.class#d4a574
source.sass keyword.control#89c4f4
markup.inserted#7fb069
markup.deleted#d4a574
markup.changed#7fb0d3
string.regexp#7fb0d3
constant.character.escape#7fb0d3
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#89c4f4italic
source.js constant.other.object.key.js string.unquoted.label.js#d4a574italic
source.json meta.structure.dictionary.json support.type.property-name.json#7fb069
support.class.component.jsx, support.class.component.tsx, entity.name.tag.jsx, entity.name.tag.tsx#85c1e8bold
entity.other.attribute-name.jsx, entity.other.attribute-name.tsx#f4a261italic
meta.function.python entity.name.function.python, meta.function.decorator.python#89c4f4bold
entity.name.class.python#d4a574bold
variable.language.special.self.python#c9ada7italic
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#85c1e8
support.type.property-name.css#7fb069
variable.other.readwrite.js, variable.other.readwrite.ts, variable.other.object.js, variable.other.object.ts#d4c5b9
variable.other.constant.js, variable.other.constant.ts#e9c46a
string.template.js, string.template.ts#a8dadc
meta.template.expression.js, meta.template.expression.ts#89c4f4
markup.heading.markdown, entity.name.section.markdown#85c1e8bold
markup.bold.markdown#d4c5b9bold
markup.italic.markdown#d4c5b9italic
markup.inline.raw.markdown, markup.raw.block.markdown#7fb069
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#d4a574
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#89c4f4
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#c9ada7
text.html.markdown, punctuation.definition.list_item.markdown#d4c5b9
text.html.markdown markup.inline.raw.markdown#7fb0d3
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#6b7c8f
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#7fb069
markup.italic#c9ada7italic
markup.bold, markup.bold string#c9ada7bold
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#c9ada7bold
markup.underline#d4a574underline
markup.quote punctuation.definition.blockquote.markdown#6b7c8f
markup.quoteitalic
string.other.link.title.markdown#89c4f4
string.other.link.description.title.markdown#7fb0d3
constant.other.reference.link.markdown#d4a574
markup.raw.block#7fb0d3
markup.raw.block.fenced.markdown#d4c5b9
punctuation.definition.fenced.markdown#d4c5b9
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#d4c5b9
variable.language.fenced.markdown#6b7c8f
meta.separator#6b7c8fbold
markup.table#d4c5b9