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#d1d1d0
  • activityBar.background#4f4f4f
  • activityBar.foreground#828282
  • activityBarBadge.background#4a40ff
  • activityBarBadge.foreground#FFFFFF
  • badge.background#4a40ff
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#d1d1d0
  • breadcrumb.background#4f4f4f
  • breadcrumb.focusForeground#d1d1d0
  • breadcrumb.foreground#747474
  • button.background#4d51fb
  • button.border#FFFFFF00
  • button.foreground#FFFFFF
  • button.hoverBackground#535bfe
  • editor.background#4f4f4f
  • editor.findMatchBackground#5032c0
  • editor.findMatchBorder#e2833d
  • editor.findMatchHighlightBackground#5032c0
  • editor.foldBackground#575757
  • editor.foreground#d1d1d0
  • editor.hoverHighlightBackground#646464
  • editor.lineHighlightBackground#555353
  • editor.selectionBackground#5032c0
  • editor.wordHighlightBackground#646464
  • editor.wordHighlightStrongBackground#5032c0
  • editorCursor.foreground#4a40ff
  • editorError.foreground#ff5366
  • editorGroupHeader.tabsBackground#4f4f4f
  • editorLineNumber.activeForeground#c2c2c2
  • editorLineNumber.foreground#737473
  • editorLink.activeForeground#5866ff
  • editorSuggestWidget.background#5b5b5b
  • editorSuggestWidget.foreground#d1d1d0
  • editorSuggestWidget.selectedBackground#5032c0
  • editorWarning.foreground#f9bd53
  • focusBorder#5b5b5b
  • foreground#d1d1d0
  • gitDecoration.addedResourceForeground#28be8e
  • gitDecoration.conflictingResourceForeground#e0b658
  • gitDecoration.deletedResourceForeground#ca184e
  • gitDecoration.ignoredResourceForeground#747474
  • gitDecoration.modifiedResourceForeground#5866ff
  • gitDecoration.submoduleResourceForeground#4a40ff
  • gitDecoration.untrackedResourceForeground#28be8e
  • icon.foreground#d1d1d0
  • input.background#5b5b5b
  • input.border#5b5b5b
  • input.foreground#d1d1d0
  • input.placeholderForeground#868586
  • list.activeSelectionBackground#575757
  • list.activeSelectionForeground#d1d1d0
  • list.focusForeground#d1d1d0
  • list.highlightForeground#955efb
  • list.hoverBackground#5d5d5d
  • list.hoverForeground#d1d1d0
  • list.inactiveFocusBackground#575757
  • list.inactiveSelectionBackground#575757
  • menu.background#5b5b5b
  • menu.foreground#c2c2c2
  • menu.selectionBackground#5032c0
  • menu.selectionForeground#d1d1d0
  • menu.separatorBackground#606060
  • minimapSlider.background#57575746
  • panelTitle.activeForeground#d1d1d0
  • panelTitle.inactiveForeground#868586
  • peekView.border#5032c0
  • peekViewEditor.matchHighlightBackground#5032c0
  • peekViewEditorGutter.background#575757
  • peekViewResult.background#575757
  • peekViewResult.matchHighlightBackground#5032c0
  • peekViewTitle.background#575757
  • progressBar.background#4a40ff
  • quickInputList.focusBackground#5d5d5d
  • scrollbar.shadow#5b5b5bCC
  • scrollbarSlider.background#57575746
  • searchEditor.findMatchBackground#e2833d
  • sideBar.background#4f4f4f
  • sideBar.border#5b5b5b
  • sideBar.foreground#acacac
  • sideBarSectionHeader.foreground#d1d1d0
  • sideBarTitle.foreground#989798
  • statusBar.background#4f4f4f
  • statusBar.debuggingBackground#4a40ff
  • statusBar.debuggingForeground#d1d1d0
  • statusBar.foreground#d1d1d0
  • statusBar.noFolderBackground#4f4f4f
  • statusBar.noFolderForeground#868586
  • tab.activeBackground#525353
  • tab.activeBorder#5f5f5f
  • tab.activeBorderTop#4f4f4f
  • tab.activeForeground#d1d1d0
  • tab.border#4f4f4f
  • tab.inactiveBackground#4f4f4f
  • tab.unfocusedActiveBackground#4f4f4f
  • terminal.ansiBlack#5a5d64
  • terminal.ansiBlue#627eff
  • terminal.ansiBrightBlack#72767e
  • terminal.ansiBrightBlue#627eff
  • terminal.ansiBrightCyan#ff8f58
  • terminal.ansiBrightGreen#52eaad
  • terminal.ansiBrightMagenta#ff93e2
  • terminal.ansiBrightRed#ef5d66
  • terminal.ansiBrightWhite#c8cbd4
  • terminal.ansiBrightYellow#f9d582
  • terminal.ansiCyan#ff8f58
  • terminal.ansiGreen#52eaad
  • terminal.ansiMagenta#ff93e2
  • terminal.ansiRed#ef5d66
  • terminal.ansiWhite#abb3bf
  • terminal.ansiYellow#f9d582
  • terminal.background#4f4f4f
  • terminal.foreground#abb3bf
  • terminalCursor.background#abb3bf
  • terminalCursor.foreground#abb3bf
  • textBlockQuote.background#5032c0
  • textCodeBlock.background#5032c0
  • titleBar.activeBackground#4f4f4f
  • titleBar.activeForeground#d1d1d0
  • titleBar.inactiveBackground#4f4f4f
  • titleBar.inactiveForeground#868586

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.tag#9b88fc
punctuation.definition.tag.begin, punctuation.definition.tag.end#868586
meta.attribute.href#ff93e2
entity.name.tag.reference#9b88fcbold
entity.other.attribute-name, punctuation.definition.entity#9b88fcitalic
entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity#95a2ff
variable#9b88fc
variable.parameteritalic
variable.other.object#f9d582
variable.other.readwrite#9b88fc
variable.other.constant.property, variable.other.object.property, variable.other.constant.object.property, support.variable.property, meta.block variable.other.property#9b88fc
meta.object-literal.key variable.other.property#ff93e2
variable.other.constant#f9d582
meta.object-literal.key#9b88fc
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#ef5d66italic
comment, punctuation.definition.comment#8b8c8bitalic
constant.numeric#ec8865
entity.name.function, meta.require, support.function.any-method, variable.function, keyword.operator.expression.import#95a2ff
support.function
invalid#ff93e2
*url*, *link*, *uri*underline
punctuation, meta.brace.square, meta.brace.round#c2c2c2
punctuation.section.embedded#ff8f58
string, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end#ff93e2
string.regexp punctuation.definition.string, punctuation.definition.template-expression#ff8f58
keyword.operator.quantifier.regexp#ec8865
string.regexp#95a2ff
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#52eaaditalic
storage.type
storage.type.template#ff8f58
storage.type.function#ff8f58
entity.other.inherited-class#52eaaditalic
entity.name.type.class, entity.name.class#52eaad
support#52eaad
support.class.component, meta.tag.custom entity.name.tag#52eaad
support.constant#9b88fc
support.variable
entity.name.type.interface#52eaaditalic
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#ff8f58
keyword.control.new, keyword.operator.new#ff8f58bold
keyword.other.template, keyword.other.substitution#d1d1d0
keyword.operator#c2c2c2
entity.name.namespace#f9d582
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#ff8f58
constant.character.escape, constant.character.string.escape, constant.regexp#ff8f58
constant, variable.other.constant#f9d582
constant.language#ec8865
constant.other.rgb-value#ec8865
meta.object.member, meta.block, meta.parameters#d1d1d0
comment.block.documentation entity.name.type#52eaaditalic
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#ff8f58
source.js storage.type, source.ts storage.type, source.jsx storage.type, source.tsx storage.type#ff8f58
meta.tag.metadata.doctype.html entity.name.tag.html#52eaad
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#54ded6italic
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#9b88fc
source.css variable, source.css variable.other, source.css punctuation.definition.variable#747eff
source.css meta.property-list entity.name.tag#9b88fc
source.css meta.property-value support.constant.mathematical-symbols#d1d1d0
source.css keyword.operator#d1d1d0
source.css keyword.other.unit#ec8865
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#52eaad
source.css support.constant.property-value#ff93e2
source.css support.type.property-name#d1d1d0
source.css entity.other.attribute-name, punctuation.definition.entity
punctuation.definition.constant.css, constant.other.color.rgb-value.hex#ec8865
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#9b88fcitalic
meta.tag.structure invalid.illegal.character-not-allowed-here.html#868586
meta.tag.other.unrecognized.html.derivative entity.name.tag.html#52eaad
meta.using-namespace.cpp keyword.other.using.directive, meta.using-namespace.c keyword.other.using.directive#747eff
punctuation.definition.directive.c, punctuation.definition.directive.cpp#ff8f58
variable.other.property.cpp, variable.other.property.c#9b88fc
source.c keyword.operator, source.cpp keyword.operator#ff8f58
meta.function.c,meta.function.cpp#9b88fc
support.type.posix-reserved.c, support.type.posix-reserved.cpp#52eaad
storage.modifier.import.java,storage.type.java,storage.type.generic.java#f9d582
token.variable.parameter.java#ca184e
source.python punctuation.definition.decorator#95a2ffbold
source.ini keyword.other.definition.ini#9b88fc
source.ini entity.name.section.group-title.ini#95a2ff
source.ini punctuation.definition.entity.ini#ff8f58
source.json meta.structure.dictionary.json support.type.property-name.json#9b88fc
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#747eff
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#52eaad
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#ff789a
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#f9d582
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#ff8f58
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#ca184e
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#ec8865
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#54ded6
text.html.markdown, punctuation.definition.list_item.markdown#d1d1d0
text.html.markdown markup.inline.raw.markdown#9b88fc
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#7d839d
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#9b88fc
markup.quote punctuation.definition.blockquote.markdown#7d839d
string.other.link.title.markdown#ff8f58
string.other.link.description.title.markdown#9b88fc
constant.other.reference.link.markdown#f9d582
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#d1d1d0
variable.language.fenced.markdown#7d839d
meta.separator#7d839dbold
markup.underline.link#ff8f58
markup.inline.raw.string.markdown#95a2ff
text.html.markdown punctuation.definition.list#f9d582
markup.quote.markdown#868586
entity.name.section.markdown#9b88fc