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#1d142e
  • activityBar.activeBorder#F5BA51
  • activityBar.activeFocusBorder#ecae7f
  • activityBar.background#1d142e
  • activityBar.dropBorder#b573b4
  • activityBar.inactiveForeground#a49fa8
  • activityBarBadge.background#ce5b94
  • activityBarBadge.foreground#2C2140
  • badge.background#F2A162
  • badge.foreground#2C2140
  • button.background#9165c3
  • button.foreground#000000
  • button.hoverBackground#78519d
  • checkbox.background#393050
  • diffEditor.insertedTextBackground#6575bd30
  • diffEditor.removedTextBackground#7c151535
  • dropdown.background#393050
  • dropdown.border#40365a
  • editor.background#2b203f
  • editor.findMatchBorder#b573b4
  • editor.findMatchHighlightBackground#d6cfdb30
  • editor.foldBackground#bcaee530
  • editor.foreground#c0bbcb
  • editor.lineHighlightBackground#393050
  • editor.selectionBackground#b573b430
  • editor.selectionHighlightBorder#8a68b3
  • editorBracketMatch.background#2c253e
  • editorBracketMatch.border#825381
  • editorCursor.background#000000
  • editorCursor.foreground#b573b4
  • editorError.foreground#f070a3
  • editorGroup.border#1d142e
  • editorGroup.dropBackground#b573b430
  • editorGroupHeader.noTabsBackground#393050
  • editorGroupHeader.tabsBackground#251e35
  • editorGutter.addedBackground#8b65bd
  • editorGutter.deletedBackground#f07186
  • editorGutter.modifiedBackground#d6bc83
  • editorHoverWidget.border#42375d
  • editorIndentGuide.activeBackground#7D5F92
  • editorIndentGuide.background#42375d
  • editorInfo.foreground#8572e6
  • editorInlayHint.background#00000036
  • editorInlayHint.foreground#9881a8
  • editorLineNumber.activeForeground#ada2c8
  • editorLineNumber.foreground#614e83
  • editorLink.activeForeground#b573b4
  • editorMarkerNavigation.background#2b203f
  • editorMarkerNavigationError.background#f070a3
  • editorMarkerNavigationInfo.background#5437e6
  • editorMarkerNavigationWarning.background#fad13d
  • editorOverviewRuler.addedForeground#5d37e6
  • editorOverviewRuler.border#42375d
  • editorOverviewRuler.bracketMatchForeground#b573b4
  • editorOverviewRuler.deletedForeground#df7a68
  • editorOverviewRuler.errorForeground#f070a3
  • editorOverviewRuler.infoForeground#5437e6
  • editorOverviewRuler.modifiedForeground#e6a937
  • editorOverviewRuler.selectionHighlightForeground#b573b4
  • editorOverviewRuler.warningForeground#fa3d7c
  • editorPane.background#292239
  • editorRuler.foreground#42375d
  • editorSuggestWidget.background#393050
  • editorSuggestWidget.border#42375d
  • editorSuggestWidget.highlightForeground#bcaee5
  • editorWarning.foreground#fad13d
  • editorWhitespace.foreground#544676
  • editorWidget.background#2b203f
  • editorWidget.resizeBorder#42375d
  • errorForeground#f070a3
  • extensionButton.prominentBackground#c36586
  • extensionButton.prominentForeground#000000
  • extensionButton.prominentHoverBackground#904b63
  • focusBorder#9773b5
  • foreground#c0bbcb
  • gitDecoration.addedResourceForeground#ba93f0
  • gitDecoration.deletedResourceForeground#F07171
  • gitDecoration.ignoredResourceForeground#7f7588
  • gitDecoration.modifiedResourceForeground#e0bc58
  • gitDecoration.stageDeletedResourceForeground#F07171
  • gitDecoration.stageModifiedResourceForeground#e0bc58
  • gitDecoration.untrackedResourceForeground#79cfb3
  • input.background#393050
  • input.border#40365a
  • inputValidation.errorBackground#f070a390
  • inputValidation.errorBorder#f070a3
  • inputValidation.errorForeground#000000
  • inputValidation.infoBackground#5437e690
  • inputValidation.infoBorder#5437e6
  • inputValidation.infoForeground#ffffff
  • inputValidation.warningBackground#fad13d90
  • inputValidation.warningBorder#fad13d
  • inputValidation.warningForeground#000000
  • list.activeSelectionBackground#b573b420
  • list.errorForeground#f070a3
  • list.focusBackground#b573b430
  • list.highlightForeground#bcaee5
  • list.hoverBackground#3b3253
  • list.inactiveSelectionBackground#b573b425
  • list.warningForeground#fad13d
  • menu.background#2b203f
  • menu.foreground#d6cfdb
  • menu.selectionBackground#b573b4DD
  • menu.selectionForeground#000000
  • menu.separatorBackground#544676
  • minimap.background#2b203f
  • minimap.errorHighlight#f07970
  • minimap.selectionHighlight#8c73b580
  • minimap.warningHighlight#fad13d
  • minimapGutter.addedBackground#6452cc
  • minimapGutter.deletedBackground#F07171
  • minimapGutter.modifiedBackground#e0bc58
  • notifications.background#2b203f
  • notificationsErrorIcon.foreground#f070a3
  • notificationsInfoIcon.foreground#4e36c7
  • notificationsWarningIcon.foreground#fad13d
  • panel.dropBorder#b573b4
  • panelTitle.activeBorder#b573b4
  • peekView.border#563ba3
  • peekViewEditor.background#20163b
  • peekViewEditor.matchHighlightBackground#a471b862
  • peekViewEditorGutter.background#20163b
  • peekViewResult.background#393050
  • peekViewResult.matchHighlightBackground#a471b862
  • peekViewTitle.background#1d142e
  • pickerGroup.border#1e192a
  • pickerGroup.foreground#b573b4
  • problemsErrorIcon.foreground#f070a3
  • problemsInfoIcon.foreground#8d79f0
  • problemsWarningIcon.foreground#fad13d
  • progressBar.background#b573b4
  • scrollbar.shadow#0e091452
  • scrollbarSlider.activeBackground#54467640
  • scrollbarSlider.background#67569050
  • scrollbarSlider.hoverBackground#7965a940
  • selection.background#a273b580
  • settings.modifiedItemIndicator#dfc05a
  • sideBar.background#1d142e
  • sideBarSectionHeader.background#1d142e
  • statusBar.background#1d142e
  • statusBar.debuggingBackground#5b498d
  • statusBar.foreground#c0bbcb
  • statusBar.noFolderBackground#1d142e
  • statusBarItem.hoverBackground#74429b
  • statusBarItem.prominentBackground#b573b4
  • statusBarItem.prominentForeground#000000
  • statusBarItem.prominentHoverBackground#9c639a
  • statusBarItem.remoteBackground#ecae7f
  • statusBarItem.remoteForeground#272036
  • tab.activeBackground#2b203f
  • tab.activeBorder#df9f9f00
  • tab.activeBorderTop#F5BA51
  • tab.activeModifiedBorder#e0bc58
  • tab.border#00000000
  • tab.hoverBackground#2b203f
  • tab.inactiveBackground#221c30
  • tab.lastPinnedBorder#b573b450
  • terminal.selectionBackground#b573b4
  • terminalCursor.background#000000
  • terminalCursor.foreground#b573b4
  • textLink.activeForeground#bcaee5
  • textLink.foreground#bba5d4
  • textPreformat.foreground#bcaee5
  • textSeparator.foreground#1e192a
  • titleBar.activeBackground#1d142e
  • titleBar.border#1d142e
  • titleBar.inactiveBackground#1d142e
  • 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#c07cff
variable.parameter, parameter.variable, meta.function.parameter variable, source.rust meta.type_params.rust#c07cff
entity.name.function, support.class, support.function, new.expr entity.name.type, entity.other.inherited-class#e678e8
markup.inline.raw#e678e8
comment, punctuation.definition.comment#73688d
string, punctuation.definition.string#e6be7d
constant.character.escape#bba5d4
keyword, constant.language.import-export-all#c7a8ed
keyword.control, keyword.operator, storage, support.type, keyword.operator.expression, keyword.operator.new#c7a8ed
entity.name.type, support.type.primitive, support.type.builtin, meta.type.annotation entity.name.type, meta.type.parameters entity.name.type#5aa1db
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#fc6a9d
punctuation, meta.brace#98939b
variable.language.this, variable.language.special.self#bba5d4
entity.name.tag#bba5d4
entity.name.section.markdown, markup.heading.setext#8c76c0
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#c36586
entity.name.tag.css, entity.name.tag.wildcard#FBD089
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