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#b4b4b3
  • activityBar.background#111111
  • activityBar.foreground#59595a
  • activityBarBadge.background#443dd7
  • activityBarBadge.foreground#dbdcdc
  • badge.background#443dd7
  • badge.foreground#dbdcdc
  • breadcrumb.activeSelectionForeground#b4b4b3
  • breadcrumb.background#111111
  • breadcrumb.focusForeground#b4b4b3
  • breadcrumb.foreground#404040
  • button.background#464ad4
  • button.border#dbdcdc00
  • button.foreground#dbdcdc
  • button.hoverBackground#4b52d6
  • editor.background#111111
  • editor.findMatchBackground#361da2
  • editor.findMatchBorder#be6e36
  • editor.findMatchHighlightBackground#361da2
  • editor.foldBackground#191817
  • editor.foreground#b4b4b3
  • editor.hoverHighlightBackground#2a2929
  • editor.lineHighlightBackground#161616
  • editor.selectionBackground#361da2
  • editor.wordHighlightBackground#2a2929
  • editor.wordHighlightStrongBackground#361da3
  • editorCursor.foreground#443dd7
  • editorError.foreground#d74b5b
  • editorGroupHeader.tabsBackground#111111
  • editorLineNumber.activeForeground#a6a7a7
  • editorLineNumber.foreground#414141
  • editorLink.activeForeground#505cd9
  • editorSuggestWidget.background#1d1d1d
  • editorSuggestWidget.foreground#b4b4b3
  • editorSuggestWidget.selectedBackground#361da3
  • editorWarning.foreground#d2a04c
  • focusBorder#1d1d1d
  • foreground#b4b4b3
  • gitDecoration.addedResourceForeground#219b73
  • gitDecoration.conflictingResourceForeground#bd994e
  • gitDecoration.deletedResourceForeground#a91944
  • gitDecoration.ignoredResourceForeground#404040
  • gitDecoration.modifiedResourceForeground#505cd9
  • gitDecoration.submoduleResourceForeground#443dd7
  • gitDecoration.untrackedResourceForeground#219b73
  • icon.foreground#b4b4b3
  • input.background#1d1d1d
  • input.border#1d1d1d
  • input.foreground#b4b4b3
  • input.placeholderForeground#5f6060
  • list.activeSelectionBackground#191817
  • list.activeSelectionForeground#b4b4b3
  • list.focusForeground#b4b4b3
  • list.highlightForeground#8255d5
  • list.hoverBackground#202020
  • list.hoverForeground#b4b4b3
  • list.inactiveFocusBackground#191817
  • list.inactiveSelectionBackground#191817
  • menu.background#1d1d1d
  • menu.foreground#a6a7a7
  • menu.selectionBackground#361da3
  • menu.selectionForeground#b4b4b3
  • menu.separatorBackground#232323
  • minimapSlider.background#19181746
  • panelTitle.activeForeground#b4b4b3
  • panelTitle.inactiveForeground#5f6060
  • peekView.border#361da3
  • peekViewEditor.matchHighlightBackground#361da3
  • peekViewEditorGutter.background#191817
  • peekViewResult.background#191817
  • peekViewResult.matchHighlightBackground#361da3
  • peekViewTitle.background#191817
  • progressBar.background#443dd7
  • quickInputList.focusBackground#202020
  • scrollbar.shadow#1d1d1dCC
  • scrollbarSlider.background#19181746
  • searchEditor.findMatchBackground#be6e36
  • sideBar.background#111111
  • sideBar.border#1d1d1d
  • sideBar.foreground#919090
  • sideBarSectionHeader.foreground#b4b4b3
  • sideBarTitle.foreground#7a7979
  • statusBar.background#111111
  • statusBar.debuggingBackground#443dd7
  • statusBar.debuggingForeground#b4b4b3
  • statusBar.foreground#b4b4b3
  • statusBar.noFolderBackground#111111
  • statusBar.noFolderForeground#5f6060
  • tab.activeBackground#151515
  • tab.activeBorder#222222
  • tab.activeBorderTop#111111
  • tab.activeForeground#b4b4b3
  • tab.border#111111
  • tab.inactiveBackground#111111
  • tab.unfocusedActiveBackground#111111
  • terminal.ansiBlack#1c1f24
  • terminal.ansiBlue#596fd8
  • terminal.ansiBrightBlack#3f4149
  • terminal.ansiBrightBlue#596fd8
  • terminal.ansiBrightCyan#d5794c
  • terminal.ansiBrightGreen#4cc694
  • terminal.ansiBrightMagenta#d77fbf
  • terminal.ansiBrightRed#c95159
  • terminal.ansiBrightWhite#adb0b6
  • terminal.ansiBrightYellow#d3b673
  • terminal.ansiCyan#d5794c
  • terminal.ansiGreen#4cc694
  • terminal.ansiMagenta#d77fbf
  • terminal.ansiRed#c95159
  • terminal.ansiWhite#9299a2
  • terminal.ansiYellow#d3b673
  • terminal.background#111111
  • terminal.foreground#9299a2
  • terminalCursor.background#9299a2
  • terminalCursor.foreground#9299a2
  • textBlockQuote.background#361da2
  • textCodeBlock.background#361da2
  • titleBar.activeBackground#111111
  • titleBar.activeForeground#b4b4b3
  • titleBar.inactiveBackground#111111
  • titleBar.inactiveForeground#5f6060

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.tag#8678d4
punctuation.definition.tag.begin, punctuation.definition.tag.end#5f6060
meta.attribute.href#d77fbf
entity.name.tag.reference#8678d4bold
entity.other.attribute-name, punctuation.definition.entity#8678d4italic
entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity#7f89d6
variable#8678d4
variable.parameteritalic
variable.other.object#d3b673
variable.other.readwrite#8678d4
variable.other.constant.property, variable.other.object.property, variable.other.constant.object.property, support.variable.property, meta.block variable.other.property#8678d4
meta.object-literal.key variable.other.property#d77fbf
variable.other.constant#d3b673
meta.object-literal.key#8678d4
keyword.expressions-and-types.swift, keyword.other.this, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special#c95159italic
comment, punctuation.definition.comment#696969italic
constant.numeric#c27055
entity.name.function, meta.require, support.function.any-method, variable.function, keyword.operator.expression.import#7f89d6
support.function
invalid#d77fbf
*url*, *link*, *uri*underline
punctuation, meta.brace.square, meta.brace.round#a6a7a7
punctuation.section.embedded#d5794c
string, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end#d77fbf
string.regexp punctuation.definition.string, punctuation.definition.template-expression#d5794c
keyword.operator.quantifier.regexp#c27055
string.regexp#7f89d6
entity.name.type, storage.type, keyword.primitive-datatypes, keyword.type.cs, meta.protocol-list.objc, meta.return-type.objc, source.powershell entity.other.attribute-name, storage.class.std.rust, storage.type.attribute.swift, support.type.primitive#4cc694italic
storage.type
storage.type.template#d5794c
storage.type.function#d5794c
entity.other.inherited-class#4cc694italic
entity.name.type.class, entity.name.class#4cc694
support#4cc694
support.class.component, meta.tag.custom entity.name.tag#4cc694
support.constant#8678d4
support.variable
entity.name.type.interface#4cc694italic
keyword, keyword.operator.ternary, keyword.operator.decrement, keyword.operator.increment, keyword.operator.cast.static_cast, keyword.operator.expression, keyword.operator.logical, punctuation.definition.keyword, storage.type.class, storage.type.function.arrow#d5794c
keyword.control.new, keyword.operator.new#d5794cbold
keyword.other.template, keyword.other.substitution#b4b4b3
keyword.operator#a6a7a7
entity.name.namespace#d3b673
storage, storage.type.interface, storage.type.type, storage.type.namespace, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#d5794c
constant.character.escape, constant.character.string.escape, constant.regexp#d5794c
constant, variable.other.constant#d3b673
constant.language#c27055
constant.other.rgb-value#c27055
meta.object.member, meta.block, meta.parameters#b4b4b3
comment.block.documentation entity.name.type#4cc694italic
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#d5794c
source.js storage.type, source.ts storage.type, source.jsx storage.type, source.tsx storage.type#d5794c
meta.tag.metadata.doctype.html entity.name.tag.html#4cc694
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element punctuation.definition.entity, entity.other.attribute-name.pseudo-class punctuation.definition.entity#4bbcb5italic
meta.at-rule.mixin, meta.at-rule.extend, source.css meta.property-value meta.function, source.css meta.property-value support.function, source.css meta.property-value support.function.any-method#8678d4
source.css variable, source.css variable.other, source.css punctuation.definition.variable#676fd8
source.css meta.property-list entity.name.tag#8678d4
source.css meta.property-value support.constant.mathematical-symbols#b4b4b3
source.css keyword.operator#b4b4b3
source.css keyword.other.unit#c27055
source.css meta.property-value keyword.other.important, source.css keyword.control.at-rule punctuation.definition.keyword, source.css keyword.control.at-rule, meta.tag.metadata.doctype.html entity.name.tag.html, keyword.extend.css, keyword.global.css#4cc694
source.css support.constant.property-value#d77fbf
source.css support.type.property-name#b4b4b3
source.css entity.other.attribute-name, punctuation.definition.entity
punctuation.definition.constant.css, constant.other.color.rgb-value.hex#c27055
entity.name.tag.template, entity.name.tag.script, entity.name.tag.style, source.vue meta.block.template, source.vue meta.block.script, source.vue meta.block.style#8678d4italic
meta.tag.structure invalid.illegal.character-not-allowed-here.html#5f6060
meta.tag.other.unrecognized.html.derivative entity.name.tag.html#4cc694
meta.using-namespace.cpp keyword.other.using.directive, meta.using-namespace.c keyword.other.using.directive#676fd8
punctuation.definition.directive.c, punctuation.definition.directive.cpp#d5794c
variable.other.property.cpp, variable.other.property.c#8678d4
source.c keyword.operator, source.cpp keyword.operator#d5794c
meta.function.c,meta.function.cpp#8678d4
support.type.posix-reserved.c, support.type.posix-reserved.cpp#4cc694
storage.modifier.import.java,storage.type.java,storage.type.generic.java#d3b673
token.variable.parameter.java#a91944
source.python punctuation.definition.decorator#7f89d6bold
source.ini keyword.other.definition.ini#8678d4
source.ini entity.name.section.group-title.ini#7f89d6
source.ini punctuation.definition.entity.ini#d5794c
source.json meta.structure.dictionary.json support.type.property-name.json#8678d4
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#676fd8
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#4cc694
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#d66884
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#d3b673
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#d5794c
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#a91944
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#c27055
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#4bbcb5
text.html.markdown, punctuation.definition.list_item.markdown#b4b4b3
text.html.markdown markup.inline.raw.markdown#8678d4
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#575c72
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#8678d4
markup.quote punctuation.definition.blockquote.markdown#575c72
string.other.link.title.markdown#d5794c
string.other.link.description.title.markdown#8678d4
constant.other.reference.link.markdown#d3b673
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#b4b4b3
variable.language.fenced.markdown#575c72
meta.separator#575c72bold
markup.underline.link#d5794c
markup.inline.raw.string.markdown#7f89d6
text.html.markdown punctuation.definition.list#d3b673
markup.quote.markdown#5f6060
entity.name.section.markdown#8678d4