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.activeBorder#4e4e7e
  • activityBar.background#111127
  • activityBarBadge.background#9e9edf
  • activityBarBadge.foreground#000
  • breadcrumb.activeSelectionForeground#9e9edf
  • breadcrumb.background#14142c
  • breadcrumb.focusForeground#6e6eae
  • breadcrumb.foreground#474781
  • button.background#4b4bd6
  • debugToolBar.background#1c1c42
  • debugToolBar.border#39397b
  • dropdown.background#1c1c42
  • dropdown.border#2a2a5c
  • editor.background#14142c
  • editor.findMatchBackground#4a05b9
  • editor.findMatchHighlightBackground#3a078db6
  • editor.foreground#9e9edf
  • editor.lineHighlightBorder#17173d
  • editor.selectionBackground#6600ec59
  • editorBracketHighlight.foreground1#6a6a97
  • editorBracketHighlight.foreground2#b2b787
  • editorBracketHighlight.foreground3#8e628f
  • editorBracketHighlight.foreground4#6565f2
  • editorGroup.border#2a2a5799
  • editorGroupHeader.tabsBackground#14142c
  • editorGutter.addedBackground#8af19383
  • editorGutter.deletedBackground#e7050583
  • editorGutter.modifiedBackground#2657f89b
  • editorIndentGuide.activeBackground1#5050b9
  • editorIndentGuide.background1#2a2a57
  • editorLineNumber.activeForeground#4c4c80
  • editorLineNumber.foreground#4c4c8044
  • editorOverviewRuler.findMatchForeground#4a05b922
  • editorWidget.background#1c1c42
  • editorWidget.border#30306d
  • editorWidget.foreground#9e9edf
  • focusBorder#434380
  • gitDecoration.ignoredResourceForeground#47477577
  • gitDecoration.modifiedResourceForeground#4b4bd6
  • input.background#1c1c42
  • input.border#2a2a5c
  • list.activeSelectionBackground#25254977
  • list.activeSelectionForeground#9e9edf
  • list.focusBackground#25254977
  • list.focusOutline#121230
  • list.hoverBackground#23234d
  • list.inactiveSelectionBackground#25254977
  • list.inactiveSelectionForeground#9e9edf
  • listFilterWidget.background#0e0125
  • listFilterWidget.noMatchesOutline#52000094
  • panel.background#111127
  • panelTitle.activeBorder#333362
  • panelTitle.activeForeground#9e9edf
  • scrollbar.shadow#080813
  • searchEditor.findMatchBackground#4a05b9
  • settings.modifiedItemIndicator#447df6
  • sideBar.background#111127
  • sideBar.foreground#4e4e7e
  • sideBarSectionHeader.background#14142c
  • sideBarTitle.foreground#9e9edf
  • statusBar.background#14142c
  • statusBar.debuggingBackground#6d6db1
  • statusBar.foreground#333362
  • statusBar.noFolderBackground#6d6db1
  • statusBarItem.errorBackground#0000
  • statusBarItem.errorForeground#e54d4d
  • statusBarItem.warningBackground#0000
  • statusBarItem.warningForeground#7e7f3a
  • tab.activeBackground#25254977
  • tab.activeBorder#4e4e7e
  • tab.activeForeground#9e9edf
  • tab.border#1c1c3a22
  • tab.inactiveBackground#14142c
  • tab.inactiveForeground#44447e
  • terminal.ansiBlue#6b8dff
  • terminal.ansiBrightBlack#6161a1
  • terminal.ansiBrightBlue#6b8dff
  • terminal.ansiBrightGreen#58dd80
  • terminal.ansiBrightMagenta#d8d8ff
  • terminal.ansiBrightRed#d85555
  • terminal.ansiBrightWhite#f5f5f5
  • terminal.ansiBrightYellow#d8f17d
  • terminal.ansiCyan#4ad8d8
  • terminal.ansiGreen#7de686
  • terminal.ansiMagenta#d8d8ff
  • terminal.ansiRed#e66868
  • terminal.ansiWhite#f5f5f5
  • terminal.ansiYellow#eff688
  • terminal.foreground#9e9edf
  • textLink.foreground#8080ec
  • titleBar.activeBackground#14142c
  • tree.indentGuidesStroke#262646
  • widget.shadow#000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#474781italic
variable, string constant.other.placeholder#aab4ec
invalid, invalid.illegal#FF5370
keyword, storage.type, storage.modifier#6977f3
keyword.operator#7eb0ff
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, punctuation.definition.tag#7878e7
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#e97a7a
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#82AAFF
meta.block variable.other#aab4ec
support.other.variable, string.other.link#aab4ec
support.variable.property, meta.jsx.children#9298be
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other#dbb987
meta.block, punctuation.definition.block, punctuation.definition.parameters#747495
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#adcea1
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, support.type.primitive#d6b295
support.type#B2CCD6
meta.object-literal.key#8b96d4
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#b1b9f1
constant.other.color.rgb-value.hex.css#9fa9f1
support.constant.property-value.css#f1d09f
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF5370
variable.language#aab4ecitalic
entity.name.method.js#82AAFFitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#82AAFF
entity.other.attribute-name#a991eb
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FFCB6Bitalic
entity.other.attribute-name.class#f1d09f
source.sass keyword.control#82AAFF
markup.inserted#C3E88D
markup.deleted#FF5370
markup.changed#C792EA
string.regexp#89DDFF
constant.character.escape#89DDFF
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#82AAFFitalic
source.js constant.other.object.key.js string.unquoted.label.js#FF5370italic
source.json meta.structure.dictionary.json support.type.property-name.json#C792EA
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FFCB6B
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#F78C6C
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#FF5370
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#C17E70
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#82AAFF
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#f07178
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#C792EA
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#C3E88D
text.html.markdown, punctuation.definition.list_item.markdown#93a2f8
text.html.markdown markup.inline.raw.markdown#C792EA
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737E
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#C3E88D
markup.italic#b1b9f1italic
markup.bold, markup.bold string#b1b9f1bold
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#b1b9f1bold
markup.underline#d6a393underline
markup.quote punctuation.definition.blockquote.markdown#65737E
markup.quoteitalic
string.other.link.title.markdown#b1b9f1
string.other.link.description.title.markdown#C792EA
constant.other.reference.link.markdown#FFCB6B
markup.raw.block#C792EA
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#EEFFFF
variable.language.fenced.markdown#65737E
meta.separator#65737Ebold
markup.table#EEFFFF