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#c4cbd9
  • activityBar.foreground#3957a3
  • activityBar.inactiveForeground#7e87a0
  • activityBarBadge.background#3957a3
  • activityBarBadge.foreground#eef2fb
  • editor.background#d4dae5
  • editor.foreground#3a4258
  • editor.lineHighlightBackground#c8cfdc
  • editor.selectionBackground#3957a340
  • editorBracketHighlight.foreground1#3957a3
  • editorBracketHighlight.foreground2#0d6470
  • editorBracketHighlight.foreground3#456cc4
  • editorBracketHighlight.foreground4#6b3fb5
  • editorCursor.background#d4dae5
  • editorCursor.foreground#3957a3
  • editorGroup.border#b8bfcd
  • editorGroupHeader.tabsBackground#c4cbd9
  • editorGroupHeader.tabsBorder#b8bfcd
  • editorLineNumber.activeForeground#3957a3
  • editorLineNumber.foreground#9aa3b8
  • list.activeSelectionBackground#a8b3c8
  • list.activeSelectionForeground#1f2a44
  • list.hoverBackground#bcc4d2
  • list.inactiveSelectionBackground#bfc6d3
  • menu.background#dde2eb
  • menu.foreground#3a4258
  • menu.selectionBackground#3957a3
  • menu.selectionForeground#eef2fb
  • menu.separatorBackground#b8bfcd
  • panel.background#cdd3df
  • panel.border#b8bfcd
  • pickerGroup.border#b8bfcd
  • pickerGroup.foreground#3957a3
  • quickInput.background#dde2eb
  • quickInput.foreground#3a4258
  • quickInputList.focusBackground#3957a3
  • quickInputList.focusForeground#eef2fb
  • scrollbarSlider.background#3957a340
  • scrollbarSlider.hoverBackground#3957a380
  • sideBar.background#cdd3df
  • sideBar.border#b8bfcd
  • sideBar.foreground#3a4258
  • sideBarSectionHeader.background#c4cbd9
  • sideBarSectionHeader.foreground#3957a3
  • sideBarTitle.foreground#3957a3
  • statusBar.background#3957a3
  • statusBar.foreground#eef2fb
  • tab.activeBackground#d4dae5
  • tab.activeBorder#3957a3
  • tab.activeBorderTop#3957a3
  • tab.activeForeground#1f2a44
  • tab.border#b8bfcd
  • tab.hoverBackground#bcc4d2
  • tab.inactiveBackground#c4cbd9
  • tab.inactiveForeground#6b7388
  • tab.unfocusedActiveBorder#3957a388
  • tab.unfocusedActiveBorderTop#3957a388
  • terminal.ansiBlue#3957a3
  • terminal.ansiBrightBlue#456cc4
  • terminal.ansiBrightCyan#177c8a
  • terminal.ansiBrightGreen#508f4b
  • terminal.ansiBrightMagenta#7e51c9
  • terminal.ansiBrightRed#bf3e38
  • terminal.ansiBrightYellow#a37e26
  • terminal.ansiCyan#0d6470
  • terminal.ansiGreen#3f7d3a
  • terminal.ansiMagenta#6b3fb5
  • terminal.ansiRed#a3322c
  • terminal.ansiYellow#8a6a1d
  • terminal.background#d4dae5
  • terminal.foreground#3a4258
  • titleBar.activeBackground#c4cbd9
  • titleBar.activeForeground#1f2a44
  • titleBar.inactiveBackground#cdd3df
  • titleBar.inactiveForeground#6b7388

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7e87a0italic
variable, string constant.other.placeholder#3a4258
constant.other.color#1f2a44
invalid, invalid.illegal#a3322c
keyword, storage.type, storage.modifier#6b3fb5
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#0d6470
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#a13561
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#3957a3
meta.block variable.other#a13561
support.other.variable, string.other.link#a13561
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#a85027
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#3f7d3a
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#8a6a1d
support.type#177c8a
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#177c8a
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#a3322c
variable.language#a3322citalic
entity.name.method.js#3957a3italic
meta.class-method.js entity.name.function.js, variable.function.constructor#3957a3
entity.other.attribute-name#6b3fb5
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#8a6a1ditalic
entity.other.attribute-name.class#8a6a1d
source.sass keyword.control#3957a3
markup.inserted#3f7d3a
markup.deleted#a3322c
markup.changed#6b3fb5
string.regexp#0d6470
constant.character.escape#0d6470
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#3957a3italic
source.js constant.other.object.key.js string.unquoted.label.js#a3322citalic
source.json meta.structure.dictionary.json support.type.property-name.json#6b3fb5
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8a6a1d
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#a85027
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#a3322c
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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#7c5712
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 meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#3957a3
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 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#a13561
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 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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#6b3fb5
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 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 meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#3f7d3a
text.html.markdown, punctuation.definition.list_item.markdown#3a4258
text.html.markdown markup.inline.raw.markdown#6b3fb5
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#7e87a0
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#3f7d3a
markup.italic#a13561italic
markup.bold, markup.bold string#a13561bold
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#a13561bold
markup.underline#a85027underline
markup.quote punctuation.definition.blockquote.markdown#7e87a0
markup.quoteitalic
string.other.link.title.markdown#3957a3
string.other.link.description.title.markdown#6b3fb5
constant.other.reference.link.markdown#8a6a1d
markup.raw.block#6b3fb5
markup.raw.block.fenced.markdown#00000020
punctuation.definition.fenced.markdown#00000020
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#3a4258
variable.language.fenced.markdown#7e87a0
meta.separator#7e87a0bold
markup.table#3a4258