Skip to main content
CodingTheme

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#141414
  • activityBar.activeBorder#6B71C4
  • activityBar.activeFocusBorder#6B71C4
  • activityBar.background#141414
  • activityBar.dropBorder#8573b5
  • activityBar.inactiveForeground#a49fa8
  • activityBarBadge.background#E5E1EE
  • activityBarBadge.foreground#2C2140
  • badge.background#A2AFCE
  • badge.foreground#2C2140
  • button.background#6B71C4
  • button.foreground#000000
  • button.hoverBackground#6e519d
  • checkbox.background#393050
  • diffEditor.insertedTextBackground#6575bd30
  • diffEditor.removedTextBackground#7c151535
  • dropdown.background#373050
  • dropdown.border#40365a
  • editor.background#1c1c1d
  • editor.findMatchBorder#8773b5
  • editor.findMatchHighlightBackground#d6cfdb30
  • editor.foldBackground#bcaee530
  • editor.foreground#c0bbcb
  • editor.lineHighlightBackground#2a2a2e
  • editor.selectionBackground#d0c5e230
  • editor.selectionHighlightBorder#7368b3
  • editorBracketMatch.background#2c253e
  • editorBracketMatch.border#825381
  • editorCursor.background#000000
  • editorCursor.foreground#c6bfdd
  • editorError.foreground#f070a3
  • editorGroup.border#272036
  • editorGroup.dropBackground#b573b430
  • editorGroupHeader.noTabsBackground#141414
  • editorGroupHeader.tabsBackground#141414
  • editorGutter.addedBackground#7f65bd
  • editorGutter.deletedBackground#f07186
  • editorGutter.modifiedBackground#c5a36b
  • editorHoverWidget.border#413a54
  • editorIndentGuide.activeBackground#6142ea
  • editorIndentGuide.background#282829
  • editorInfo.foreground#8572e6
  • editorInlayHint.background#0000003a
  • editorInlayHint.foreground#7e7e7e
  • editorLineNumber.activeForeground#d6d2eb
  • editorLineNumber.foreground#4c4a53
  • editorLink.activeForeground#b573b4
  • editorMarkerNavigation.background#302843
  • editorMarkerNavigationError.background#f070a3
  • editorMarkerNavigationInfo.background#5437e6
  • editorMarkerNavigationWarning.background#fad13d
  • editorOverviewRuler.addedForeground#876ee2
  • editorOverviewRuler.border#42375d
  • editorOverviewRuler.bracketMatchForeground#b573b4
  • editorOverviewRuler.deletedForeground#df7a68
  • editorOverviewRuler.errorForeground#f070a3
  • editorOverviewRuler.infoForeground#7f6be4
  • editorOverviewRuler.modifiedForeground#c5a36b
  • editorOverviewRuler.selectionHighlightForeground#8173b5
  • editorOverviewRuler.warningForeground#fa3d7c
  • editorPane.background#222223
  • editorRuler.foreground#42375d
  • editorSuggestWidget.background#1c1c1d
  • editorSuggestWidget.border#42375d
  • editorSuggestWidget.highlightForeground#bcaee5
  • editorWarning.foreground#fad13d
  • editorWhitespace.foreground#544676
  • editorWidget.background#1c1c1d
  • editorWidget.resizeBorder#42375d
  • errorForeground#f070a3
  • extensionButton.prominentBackground#6B71C4
  • extensionButton.prominentForeground#000000
  • extensionButton.prominentHoverBackground#904b63
  • focusBorder#8773b5
  • foreground#aba6b5
  • gitDecoration.addedResourceForeground#9c92fd
  • gitDecoration.deletedResourceForeground#F07171
  • gitDecoration.ignoredResourceForeground#7b7a80
  • gitDecoration.modifiedResourceForeground#e0bc58
  • gitDecoration.stageDeletedResourceForeground#F07171
  • gitDecoration.stageModifiedResourceForeground#c5a36b
  • gitDecoration.untrackedResourceForeground#79cfb3
  • input.background#2e2d31
  • input.border#40365a
  • inputValidation.errorBackground#f070a390
  • inputValidation.errorBorder#f070a3
  • inputValidation.errorForeground#000000
  • inputValidation.infoBackground#5437e690
  • inputValidation.infoBorder#5437e6
  • inputValidation.infoForeground#ffffff
  • inputValidation.warningBackground#c5a36b
  • inputValidation.warningBorder#c5a36b
  • inputValidation.warningForeground#000000
  • list.activeSelectionBackground#8c73b520
  • list.errorForeground#e06998
  • list.focusBackground#8773b530
  • list.highlightForeground#bcaee5
  • list.hoverBackground#3b3253
  • list.inactiveSelectionBackground#b573b425
  • list.warningForeground#c5a36b
  • menu.background#2f2c3d
  • menu.foreground#d6cfdb
  • menu.selectionBackground#7f73b5dd
  • menu.selectionForeground#000000
  • menu.separatorBackground#544676
  • minimap.background#1c1c1d
  • minimap.errorHighlight#f07970
  • minimap.selectionHighlight#8c73b580
  • minimap.warningHighlight#fad13d
  • minimapGutter.addedBackground#7763e9
  • minimapGutter.deletedBackground#F07171
  • minimapGutter.modifiedBackground#e0bc58
  • notifications.background#302843
  • notificationsErrorIcon.foreground#f070a3
  • notificationsInfoIcon.foreground#5437e6
  • notificationsWarningIcon.foreground#fad13d
  • panel.dropBorder#8573b5
  • panelTitle.activeBorder#6B71C4
  • peekView.border#272528
  • peekViewEditor.background#19181a
  • peekViewEditor.matchHighlightBackground#a471b862
  • peekViewEditorGutter.background#20163b
  • peekViewResult.background#312f36
  • peekViewResult.matchHighlightBackground#a471b862
  • peekViewTitle.background#2e2d30
  • pickerGroup.border#1e192a
  • pickerGroup.foreground#8773b5
  • problemsErrorIcon.foreground#f070a3
  • problemsInfoIcon.foreground#8d79f0
  • problemsWarningIcon.foreground#fad13d
  • progressBar.background#8573b5
  • scrollbar.shadow#0c091452
  • scrollbarSlider.activeBackground#54467640
  • scrollbarSlider.background#7f798c50
  • scrollbarSlider.hoverBackground#7965a940
  • selection.background#8773b580
  • settings.modifiedItemIndicator#dfc05a
  • sideBar.background#141414
  • sideBarSectionHeader.background#141414
  • statusBar.background#141414
  • statusBar.debuggingBackground#4c3d75
  • statusBar.foreground#9a989f
  • statusBar.noFolderBackground#363452
  • statusBarItem.hoverBackground#696277
  • statusBarItem.prominentBackground#b573b4
  • statusBarItem.prominentForeground#000000
  • statusBarItem.prominentHoverBackground#9c639a
  • statusBarItem.remoteBackground#c9c6cf
  • statusBarItem.remoteForeground#2D2B49
  • tab.activeBackground#1c1c1d
  • tab.activeBorder#df9f9f00
  • tab.activeBorderTop#FEC955
  • tab.activeModifiedBorder#e0bc58
  • tab.border#00000000
  • tab.hoverBackground#1c1c1d
  • tab.inactiveBackground#141414
  • tab.lastPinnedBorder#b573b450
  • terminal.selectionBackground#8173b5
  • terminalCursor.background#000000
  • terminalCursor.foreground#8173b5
  • textLink.activeForeground#bcaee5
  • textLink.foreground#b5a5d4
  • textPreformat.foreground#bcaee5
  • textSeparator.foreground#1e192a
  • titleBar.activeBackground#141414
  • titleBar.border#141414
  • titleBar.inactiveBackground#141414
  • widget.shadow#191523

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
invalid#f070a3
meta.embedded, source.groovy.embedded, meta.template.expression#d6cfdb
variable, punctuation.definition.variable, support.variable.property.dom, support.variable.dom, support.variable.property, punctuation.separator.parameter, string.interpolated.pug variable#9d8eff
variable.parameter, parameter.variable, meta.function.parameter variable, source.rust meta.type_params.rust#9d8eff
entity.name.function, support.class, support.function, new.expr entity.name.type, entity.other.inherited-class#c776dd
markup.inline.raw#c776dd
keyword, constant.language.import-export-all#bfbbcd
keyword.control, keyword.operator, storage, support.type, keyword.operator.expression, keyword.operator.new#bfbbcd
entity.name.type, support.type.primitive, support.type.builtin, meta.type.annotation entity.name.type, meta.type.parameters entity.name.type#6eace5
comment, punctuation.definition.comment#797782
string, punctuation.definition.string#c9a974
constant.character.escape#bba5d4
punctuation.definition.typeparameters, keyword.operator.type, keyword.operator.optional, punctuation.definition.template-expression, source.tsx punctuation.section.embedded, source.jsx punctuation.section.embedded#6C607A
constant#b573b4
constant.numeric, constant.language#ca616f
punctuation, meta.brace#98939b
variable.language.this, variable.language.special.self#bba5d4
comment.block.documentation entity.name.type#6C607A
variable.language.super#bcaee5
meta.tag.metadata.doctype entity.name.tag, meta.tag.metadata.doctype punctuation.definition.tag, meta.tag.metadata.doctype string, meta.tag.metadata.doctype entity.other.attribute-name.html, meta.tag.sgml.doctype#98939b
entity.name.tag#bba5d4
meta.tag string#FBD089
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#8c76c0
constant.character.entity, punctuation.definition.entity#6B71C4
entity.name.section.markdown, markup.heading.setext#a289dc
punctuation.definition.list#8c76c0
meta.separator.markdown#8c76c0
markup.boldbold
markup.italicitalic
meta.link punctuation.definition.string, meta.image punctuation.definition.string#98939b
link, markup.underline.link, constant.other.reference.link.markdown#bcaee5
markup.quote#6B71C4
entity.name.tag.css, entity.name.tag.wildcard#FBD089
entity.other.attribute-name.class, entity.other.attribute-name punctuation.definition.entity#8c76c0
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class, constant.other.color#bba5d4
entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity#bcaee5
source.css constant.numeric, source.less constant.numeric, source.scss constant.numeric#FBD089
meta.property-name, support.type.property-name#6B71C4
meta.property-value, meta.property-value constant.other, support.constant.property-value#bcaee5
variable.parameter.url#6B71C4
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#8c76c0
entity.name.section#bcaee5
support.type.property-name.json#967bd6
markup.inserted#96bd65
markup.changed#e0bc58
markup.deleted#d36666
meta.diff.header#375de6
meta.diff.range#bba5d4
quote, storage, this, comment, punctuation.definition.comment, modifieritalic

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Ancient One Dark by uetchy - VS Code Theme