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#3f312891
  • activityBar.activeBorder#b35118d8
  • activityBar.background#1c1c1c
  • activityBar.dropBorder#b35118d8
  • activityBar.foreground#aca490
  • activityBar.inactiveForeground#aca4906e
  • activityBarBadge.background#b35118d8
  • activityBarBadge.foreground#ffdeb4
  • badge.background#b35118d8
  • badge.foreground#ffffffbe
  • breadcrumb.background#2e2e2e
  • button.background#b35118d8
  • button.foreground#ffffffe3
  • dropdown.background#181818
  • dropdown.border#333333
  • dropdown.foreground#aca490
  • dropdown.listBackground#181818
  • editor.background#222222
  • editor.foreground#aca490
  • editor.inactiveSelectionBackground#b3511848
  • editor.lineHighlightBackground#2c2c2c
  • editor.selectionBackground#b3511860
  • editor.selectionHighlightBackground#8f503d46
  • editor.wordHighlightBackground#3c38369f
  • editorBracketMatch.background#363636
  • editorBracketMatch.border#423f3b
  • editorCursor.foreground#ffb300da
  • editorError.foreground#cf7c7c
  • editorGroup.dropBackground#3c38369f
  • editorGroupHeader.border#2e2e2e
  • editorGroupHeader.tabsBackground#1e1e1e
  • editorGutter.background#222222
  • editorHint.foreground#9c9c9c
  • editorIndentGuide.activeBackground#423f3b
  • editorIndentGuide.background#2e2d2d
  • editorLineNumber.activeForeground#de7e50
  • editorLineNumber.foreground#928a83a2
  • editorLink.activeForeground#3a9c93
  • editorOverviewRuler.errorForeground#8a4848
  • editorSuggestWidget.background#1c1c1c
  • editorSuggestWidget.border#2e2e2e
  • editorSuggestWidget.foreground#aca490
  • editorSuggestWidget.highlightForeground#c58961
  • editorSuggestWidget.selectedBackground#3f312891
  • focusBorder#2e2e2e00
  • foreground#aca490d3
  • gitDecoration.addedResourceForeground#3a9c93
  • gitDecoration.conflictingResourceForeground#df6a9bf1
  • gitDecoration.deletedResourceForeground#e26a6ae1
  • gitDecoration.ignoredResourceForeground#aca4907a
  • gitDecoration.modifiedResourceForeground#c1a960df
  • gitDecoration.submoduleResourceForeground#699bdb
  • gitDecoration.untrackedResourceForeground#6ec07cde
  • input.background#181818
  • input.foreground#aca490
  • input.placeholderForeground#b8b8b89b
  • list.activeSelectionBackground#3f312891
  • list.activeSelectionForeground#aca490
  • list.errorForeground#cf7c7c
  • list.focusBackground#b35118d8
  • list.focusForeground#cfcfcf
  • list.highlightForeground#de7e50
  • list.hoverBackground#2e2e2ec4
  • list.inactiveFocusBackground#3f312891
  • list.inactiveSelectionBackground#3f312891
  • list.inactiveSelectionForeground#aca490
  • list.warningForeground#d39a69
  • menu.background#181818
  • menu.border#2e2e2e
  • menu.foreground#d3cac1a8
  • menu.selectionBackground#3f312891
  • menu.selectionForeground#aca490
  • menu.separatorBackground#333333
  • minimap.errorHighlight#8a4848
  • minimap.selectionHighlight#8f503d71
  • minimapSlider.activeBackground#7540257e
  • minimapSlider.background#5d3c2b5d
  • minimapSlider.hoverBackground#5f3a287e
  • panel.dropBorder#b35118d8
  • panelTitle.activeBorder#b35118d8
  • panelTitle.activeForeground#aca490
  • peekView.border#b35118d8
  • peekViewEditor.background#33312e
  • peekViewEditor.matchHighlightBackground#8f503d46
  • peekViewResult.background#1c1c1c
  • peekViewResult.fileForeground#a3a3a3
  • peekViewResult.lineForeground#a3a3a3
  • peekViewResult.selectionBackground#3f312891
  • peekViewResult.selectionForeground#aca490
  • peekViewTitleDescription.foreground#de7e50
  • peekViewTitleLabel.foreground#aca490
  • pickerGroup.foreground#de7e50
  • problemsErrorIcon.foreground#cf7c7c
  • problemsWarningIcon.foreground#d39a69
  • quickInputList.focusBackground#b35118d8
  • scrollbar.shadow#111111b2
  • scrollbarSlider.activeBackground#b351188c
  • scrollbarSlider.background#6d46335d
  • scrollbarSlider.hoverBackground#6d442c8c
  • selection.background#af4f17a1
  • settings.checkboxBackground#181818
  • settings.checkboxBorder#2e2e2e
  • settings.checkboxForeground#ff7c30d8
  • settings.dropdownBackground#181818
  • settings.dropdownBorder#2e2e2e
  • settings.dropdownForeground#aca490
  • settings.dropdownListBorder#333333
  • settings.headerForeground#b4926ce7
  • settings.modifiedItemIndicator#b35118d8
  • sideBar.background#202020
  • sideBar.border#2e2e2e
  • sideBar.foreground#979797
  • sideBarSectionHeader.background#1c1c1c
  • sideBarSectionHeader.border#202020
  • sideBarSectionHeader.foreground#b4926ce7
  • sideBarTitle.foreground#b4926ce7
  • statusBar.background#1e1e1e
  • statusBar.debuggingBackground#b32f18d8
  • statusBar.debuggingForeground#ccb6b6ef
  • statusBar.foreground#bbb8b896
  • statusBar.noFolderBackground#1e1e1e
  • statusBarItem.activeBackground#353535
  • statusBarItem.hoverBackground#2e2e2e
  • symbolIcon.arrayForeground#9c9c9c
  • symbolIcon.booleanForeground#cf7c7c
  • symbolIcon.classForeground#59ae8b
  • symbolIcon.constantForeground#cf7c7c
  • symbolIcon.constructorForeground#d39a69
  • symbolIcon.fieldForeground#92b4b1
  • symbolIcon.functionForeground#c1a860
  • symbolIcon.interfaceForeground#3a9c93
  • symbolIcon.methodForeground#c1a860
  • symbolIcon.moduleForeground#9c9c9c
  • symbolIcon.namespaceForeground#d39a69
  • symbolIcon.numberForeground#cf7c7c
  • symbolIcon.objectForeground#cf7c9f
  • symbolIcon.propertyForeground#92b4b1
  • symbolIcon.stringForeground#53ab62
  • symbolIcon.variableForeground#92b4b1
  • tab.activeBackground#2e2e2e
  • tab.activeForeground#b6b5b4
  • tab.activeModifiedBorder#b47125a4
  • tab.hoverForeground#b6b5b4
  • tab.inactiveBackground#1e1e1e
  • tab.inactiveForeground#bbb8b896
  • terminal.ansiBlack#3a3a3a
  • terminal.ansiBlue#4975af
  • terminal.ansiBrightBlack#838383
  • terminal.ansiBrightBlue#699bdb
  • terminal.ansiBrightCyan#7ab8b2
  • terminal.ansiBrightGreen#6ec07b
  • terminal.ansiBrightMagenta#df6a9a
  • terminal.ansiBrightRed#e26a6a
  • terminal.ansiBrightWhite#c0b699
  • terminal.ansiBrightYellow#d39a69
  • terminal.ansiCyan#3a9c93
  • terminal.ansiGreen#53ab62
  • terminal.ansiMagenta#bd688b
  • terminal.ansiRed#cf7c7c
  • terminal.ansiWhite#bebebe
  • terminal.ansiYellow#c1a860
  • terminal.foreground#aca490
  • terminal.selectionBackground#6d65616c
  • terminalCursor.foreground#ffb300da
  • textLink.activeForeground#df793ed8
  • textLink.foreground#d3723bd8
  • textPreformat.foreground#cf7c7c
  • titleBar.activeBackground#181818
  • titleBar.activeForeground#d3cac1a8
  • titleBar.inactiveBackground#181818
  • titleBar.inactiveForeground#d3cac1a8
  • widget.shadow#111111b2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword.operator.logical.soil#CF7C7C
function.parameter.type.soil#CF7C9F
comment, punctuation.definition.comment#928a83italic
variable.other.object.cs#83b364
variable, string constant.other.placeholder, variable.other.object#92b4b1
constant.other.color#aca490
invalid, invalid.illegal#e3798b
comment.block.documentation keyword.other#9a836f
punctuation#9c9c9c
punctuation.section.embedded, meta.tag.metadata.doctype entity.name.tag#3a9c93
punctuation.definition.variable, punctuation.definition.string, keyword.operator.heredoc, constant.other.color.rgb-value.hex, variable.other.property, meta.return.type entity.name, variable.scss, variable.other.object.property.cs#3a9c93
keyword, storage.type, storage.modifier, support.function, keyword.other, source.css keyword.operator.logical, keyword.operator.expression.typeof#cf7c9f
keyword.operator#858585
entity.name.type.namespace, support.other.namespace, meta.attribute.name entity.other.attribute-name, keyword.operator.new#d39a69
entity.other.inherited-class#59ae8b
storage.type.function, support.function.magic#cf7c7c
constant.other.color, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, keyword.other.template, keyword.other.substitution, support.type.vendored.property-name#9c9c9c
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#cf7c9f
entity.name.function, meta.function-call, variable.function, keyword.other.special-method, meta.attribute.data-x entity.other.attribute-name, meta.attribute.unrecognized entity.other.attribute-name, meta.tag.metadata.doctype entity.other.attribute-name, entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity#c1a860
meta.block variable.other, meta.arrow variable.parameter#92b4b1
support.other.variable, string.other.link#92b4b1
constant.numeric#de7e50
constant.language, support.constant, constant.character, constant.escape, constant.other, keyword.other.unit#cf7c7c
string, constant.other.symbol, constant.other.key, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, punctuation.definition.string, entity.other.attribute-name.placeholder, meta.attribute-selector#53ab62
entity.name, support.type, support.class, meta.use.php, markup.changed.git_gutter, support.type.sys-types, meta.function.parameter.typehinted storage.type, meta.function storage.type#59ae8b
support.type#59ae8b
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#92B4B1
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF5370
variable.language.this punctuation.definition.variable#B16286
variable.language#CF7C9F
entity.name.method.js#82AAFFitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#82AAFF
entity.other.attribute-name#cf7c7c
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FFCB6Bitalic
entity.other.attribute-name.class, punctuation.definition.entity#59ae8b
source.sass keyword.control#82AAFF
markup.inserted#C3E88D
markup.deleted#FF5370
markup.changed#C792EA
string.regexp#cf7c7c
constant.character.escape#cf7c7c
*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#92b4b1
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c1a860
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#de7e50
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#cf7c9f
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#d39a69
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#59ae8b
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#cf7c7c
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#3a9c93
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#92b4b1
text.html.markdown, punctuation.definition.list_item.markdown#aca490
text.html.markdown markup.inline.raw.markdown#cf7c9f
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown, markup.inline.raw punctuation.definition.raw#9c9c9c
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, markup.inline.raw.string#c1a860
markup.italic#92b4b1italic
markup.bold, markup.bold string#92b4b1bold
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#92b4b1bold
markup.underline#92b4b1underline
markup.quote punctuation.definition.quote#b16286
markup.quote#ACA490
string.other.link.title.markdown#c1a860
string.other.link.description.title.markdown#53ab62
constant.other.reference.link.markdown#c1a860
markup.raw.block#cf7c9f
markup.raw.block.fenced.markdown#aca490
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#aca490
variable.language.fenced.markdown#92b4b1
meta.separator#9c9c9cbold
markup.list punctuation.definition.list#3a9c93