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#1E2128
  • activityBar.foreground#D8DEE9
  • activityBarBadge.background#88C0D0
  • editor.background#1E2128
  • editor.findMatchBackground#d19a6644
  • editor.findMatchBorder#ffffff5a
  • editor.findMatchHighlightBackground#ffffff22
  • editor.foreground#D8DEE9
  • editor.lineHighlightBackground#3B4252
  • editor.selectionBackground#434C5E
  • editor.wordHighlightBackground#d2e0ff2f
  • editor.wordHighlightBorder#7f848e
  • editor.wordHighlightStrongBackground#abb2bf26
  • editor.wordHighlightStrongBorder#7f848e
  • editorBracketHighlight.foreground1#D8DEE9
  • editorBracketHighlight.foreground2#D8DEE9
  • editorBracketHighlight.foreground3#56b6c2
  • editorBracketMatch.background#515a6b
  • editorBracketMatch.border#515a6b
  • editorCursor.foreground#D8DEE9
  • editorGroupHeader.tabsBackground#1E2128
  • editorGutter.addedBackground#109868
  • editorGutter.deletedBackground#9A353D
  • editorGutter.modifiedBackground#948B60
  • editorIndentGuide.activeBackground1#c8c8c859
  • editorIndentGuide.background1#3b4048
  • editorLineNumber.activeForeground#abb2bf
  • editorLineNumber.foreground#495162
  • editorOverviewRuler.addedBackground#109868
  • editorOverviewRuler.deletedBackground#9A353D
  • editorOverviewRuler.modifiedBackground#948B60
  • gitDecoration.ignoredResourceForeground#636b78
  • list.activeSelectionBackground#434C5E
  • list.inactiveSelectionBackground#3B4252
  • minimapGutter.addedBackground#109868
  • minimapGutter.deletedBackground#9A353D
  • minimapGutter.modifiedBackground#948B60
  • sideBar.background#1E2128
  • sideBarTitle.foreground#D8DEE9
  • statusBar.background#3B4252
  • statusBar.foreground#D8DEE9
  • tab.activeBackground#3B4252
  • tab.activeForeground#D8DEE9
  • tab.inactiveBackground#1E2128
  • tab.inactiveForeground#81A1C1
  • titleBar.activeBackground#1E2128
  • titleBar.activeForeground#D8DEE9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5C6370italic
variable, string constant.other.placeholder#D8DEE9
constant.other.color#ECEFF4
invalid, invalid.illegal#BF616A
keyword, storage.type, storage.modifier#C678DD
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#81A1C1
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#BF616A
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#6F96FF
meta.block variable.other#D8DEE9
support.other.variable, string.other.link#BF616A
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit#D08770
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#9ABE6A
entity.name, support.other.namespace.use.php#C678DD
entity.name, support.type, support.class#EBCB8B
support.type#8FBCBB
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#8FBCBB
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#BF616A
variable.language#BF616Aitalic
entity.name.method.js#88C0D0italic
meta.class-method.js entity.name.function.js, variable.function.constructor#88C0D0
entity.other.attribute-name#D08770
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#EBCB8Bitalic
markup.inserted#9ABE6A
markup.deleted#BF616A
markup.changed#B48EAD
string.regexp#88C0D0
constant.character.escape#88C0D0
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#88C0D0italic
source.json meta.structure.dictionary.json support.type.property-name.json#88C0D0
text.html.markdown, punctuation.definition.list_item.markdown#D8DEE9
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#EBCB8B
markup.italic, markup.italic string#D8DEE9italic
markup.bold, markup.bold string#D8DEE9bold
string.other.link.title.markdown#88C0D0
keyword.other.namespace, keyword.control.import, entity.name.namespace, keyword.control.return, keyword.other.use#C678DD
keyword.other.namespace#C678DD
keyword.other.new, keyword.operator#78D5FE
murora by Muhammad Mwinchande - VS Code Theme