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.activeBackground#ffffff25
  • activityBar.background#8e62b3
  • activityBarBadge.background#f16283
  • activityBarBadge.foreground#f9ebff
  • badge.background#f16283
  • badge.foreground#f9ebff
  • button.background#f16283
  • button.foreground#f9ebff
  • button.hoverBackground#f1446d
  • button.secondaryBackground#f9cea8
  • button.secondaryForeground#644326
  • commandCenter.activeBackground#b17edc25
  • debugToolBar.background#ffe7c1
  • debugToolBar.border#e9a9b8
  • dropdown.listBackground#ffd899
  • editor.background#ffd899
  • editor.foldBackground#8e62b330
  • editor.foreground#073a3a
  • editor.hoverHighlightBackground#ff00d045
  • editor.lineHighlightBackground#fcd78915
  • editor.selectionBackground#ff00d045
  • editor.selectionHighlightBackground#ff400045
  • editor.wordHighlightBackground#ff000015
  • editor.wordHighlightStrongBackground#2fa80e15
  • editorGroupHeader.tabsBackground#fae2ba
  • editorHoverWidget.background#ffd29e
  • editorHoverWidget.border#f16283
  • editorHoverWidget.highlightForeground#ff00d045
  • editorStickyScroll.border#ff000015
  • editorStickyScroll.shadow#ff000015
  • editorStickyScrollHover.background#ff000015
  • editorSuggestWidget.background#fae2ba
  • editorSuggestWidget.border#f16283
  • editorWidget.background#ffe7c1
  • editorWidget.border#f16283
  • editorWidget.foreground#5a3677
  • focusBorder#f8a862
  • gitDecoration.ignoredResourceForeground#796c85
  • gitDecoration.untrackedResourceForeground#1e6e08
  • icon.foreground#5a3677
  • inlineEdit.originalChangedTextBackground#ff0000
  • input.background#ffd899
  • input.placeholderForeground#5a367790
  • inputOption.hoverBackground#ffe7c1
  • list.activeSelectionBackground#f8a862
  • list.hoverBackground#f9cea8
  • list.inactiveSelectionBackground#f9cea8
  • listFilterWidget.background#ffd899
  • menu.background#ffe7c1
  • menu.foreground#5a3677
  • menu.separatorBackground#dfb088
  • minimap.background#ff400010
  • minimapSlider.activeBackground#ff400055
  • minimapSlider.background#ff400030
  • minimapSlider.hoverBackground#ff400030
  • notifications.background#ffd899
  • notifications.foreground#073a3a
  • notificationsInfoIcon.foreground#f16283
  • notificationToast.border#f16283
  • peekView.border#f16283
  • peekViewEditor.background#fcdca9
  • peekViewEditor.matchHighlightBackground#fcc224
  • peekViewEditor.matchHighlightBorder#fcb824
  • peekViewEditorGutter.background#fcdca9
  • peekViewResult.background#ffe7c1
  • peekViewResult.fileForeground#5a3677
  • peekViewResult.lineForeground#f16283
  • peekViewTitle.background#ffe7c1
  • peekViewTitleLabel.foreground#5a3677
  • quickInput.background#ffe7c1
  • quickInput.foreground#5a3677
  • settings.checkboxBackground#ffe7c1
  • settings.checkboxBorder#ffc088
  • settings.checkboxForeground#5a3677
  • settings.dropdownBackground#ffe7c1
  • settings.dropdownBorder#ffc088
  • settings.dropdownForeground#5a3677
  • settings.focusedRowBorder#f16283
  • settings.modifiedItemIndicator#f16283
  • settings.textInputBackground#ffe7c1
  • settings.textInputBorder#ffc088
  • settings.textInputForeground#5a3677
  • sideBar.background#fae2ba
  • sideBar.foreground#5a3677
  • sideBarSectionHeader.background#ffd899
  • sideBarSectionHeader.foreground#5a3677
  • sideBarTitle.background#f9cea8
  • statusBar.background#9243d3
  • statusBarItem.warningBackground#fbce2a71
  • tab.activeBackground#ffd899
  • tab.border#dfb088
  • tab.hoverBackground#fbd7b8
  • tab.inactiveBackground#f9cea8
  • textLink.activeForeground#f12f5c
  • textLink.foreground#f16283
  • titleBar.activeBackground#8e62b3
  • titleBar.activeForeground#f9ebff
  • toolbar.hoverBackground#ff400030
  • tree.indentGuidesStroke#f16283

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#74607eitalic
variable, string constant.other.placeholder#606d17
constant.other.color#606d17
invalid, invalid.illegal#b92714bold
keyword, storage.type, storage.modifier#5e6815
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#714397
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#92574c
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#099f90
meta.block variable.other#c1412b
support.other.variable, string.other.link#ca3038
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#db6642
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#5e5535
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#c75040
support.type#406db1italic
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#406db1
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#707e19
variable.language#FF5370italic
entity.name.method.js#82AAFFitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#82AAFF
entity.other.attribute-name#846897
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#d89416italic
entity.other.attribute-name.class#d89416
source.sass keyword.control#677ca1
markup.inserted#846897
markup.deleted#FF5370
markup.changed#C792EA
string.regexp#dea661
constant.character.escape#9d56dc
*url*, *link*, *uri*italic underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#707e19italic
source.js constant.other.object.key.js string.unquoted.label.js#FF5370italic
source.json meta.structure.dictionary.json support.type.property-name.json#794f9e
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#2a7a11
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#9b716a
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#9e3731
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#f34826
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#ffb9b9
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#f4aaae
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#c171f7
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#f1d9b1
text.html.markdown, punctuation.definition.list_item.markdown#5e5535
text.html.markdown markup.inline.raw.markdown#406db1
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#846897
markup.italic#f07178italic
markup.bold, markup.bold string#f07178bold
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#f07178bold
markup.underline#ca3038underline
markup.quote punctuation.definition.blockquote.markdown#65737E
markup.quoteitalic
string.other.link.title.markdown#406db1
string.other.link.description.title.markdown#c171f7
constant.other.reference.link.markdown#d89416
markup.raw.block#c171f7
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#2ae2e2
variable.language.fenced.markdown#65737E
meta.separator#65737Ebold
markup.table#6e8080