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#82dfff10
  • activityBar.activeBorder#43c8ffff
  • activityBar.activeFocusBorder#43c8ffff
  • activityBar.background#17212B
  • activityBar.border#00060eff
  • activityBar.foreground#23a8f2ff
  • activityBar.inactiveForeground#61bef260
  • activityBarBadge.background#ffd49cc0
  • activityBarBadge.foreground#000000
  • badge.background#ffd49cc0
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#23a8f2a0
  • breadcrumb.background#181e26ff
  • breadcrumb.focusForeground#23A8F2
  • breadcrumb.foreground#23a8f2a0
  • button.background#141a22ff
  • button.foreground#efe9e1ff
  • button.hoverBackground#181e26ff
  • descriptionForeground#efe9e1ff
  • dropdown.background#2e343cff
  • dropdown.border#10161E
  • dropdown.foreground#b0b6beff
  • dropdown.listBackground#2e343cff
  • editor.background#10161E
  • editor.findMatchBackground#ffb47f1e
  • editor.findMatchHighlightBackground#ffb47f3c
  • editor.findRangeHighlightBackground#5789ff23
  • editor.foreground#82dfff60
  • editor.lineHighlightBackground#62bfdf20
  • editor.selectionBackground#23a8f240
  • editor.selectionHighlightBackground#23aaf249
  • editor.selectionHighlightBorder#23a8f240
  • editor.wordHighlightStrongBackground#23aaf249
  • editor.wordHighlightStrongBorder#23a8f2a0
  • editorBracketMatch.background#ff336660
  • editorBracketMatch.border#ff336660
  • editorError.foreground#ff0033
  • editorGroup.border#00060eff
  • editorGroupHeader.border#00060eff
  • editorGroupHeader.noTabsBackground#141a22ff
  • editorGroupHeader.tabsBackground#141a22ff
  • editorGroupHeader.tabsBorder#61bef260
  • editorGutter.background#10161E
  • editorGutter.modifiedBackground#23A8F2
  • editorHoverWidget.border#429fbf60
  • editorIndentGuide.activeBackground#23a8f249
  • editorIndentGuide.background#181e26ff
  • editorLineNumber.activeForeground#9cddffa0
  • editorLineNumber.foreground#8ccdf240
  • editorOverviewRuler.errorForeground#ff0033
  • editorOverviewRuler.findMatchForeground#23a8f240
  • editorOverviewRuler.warningForeground#cc884478
  • editorOverviewRuler.wordHighlightForeground#23aaf249
  • editorPane.background#080e16ff
  • editorSuggestWidget.background#10161E
  • editorSuggestWidget.border#429fbf60
  • editorSuggestWidget.selectedBackground#20262eff
  • editorUnnecessaryCode.border#10161e80
  • editorUnnecessaryCode.opacity#10161e80
  • editorWidget.background#141a22ff
  • editorWidget.border#23A8F2
  • editorWidget.foreground#23a8f2ff
  • errorForeground#23A8F2
  • focusBorder#429fbf60
  • foreground#82dfff60
  • gitDecoration.untrackedResourceForeground#99bb33
  • icon.foreground#23a8f2ff
  • input.background#20262eff
  • input.border#10161E
  • input.foreground#9cddffa0
  • input.placeholderForeground#6cadd240
  • inputOption.activeBackground#1ba0ea3c
  • inputOption.activeBorder#1ba0ea4b
  • list.activeSelectionBackground#23a8f22a
  • list.activeSelectionForeground#fec67cff
  • list.dropBackground#2e343cff
  • list.errorForeground#ff4b7eff
  • list.focusBackground#23a8f22a
  • list.focusForeground#86e3fff0
  • list.highlightForeground#1ba0ea80
  • list.hoverBackground#10161E
  • list.hoverForeground#86e3fff0
  • list.inactiveSelectionBackground#10161E
  • list.inactiveSelectionForeground#d8a869ff
  • list.invalidItemForeground#f58fffff
  • list.warningForeground#feba76ff
  • listFilterWidget.outline#00060eff
  • menu.background#141a22f0
  • menu.border#141a22f0
  • menu.foreground#82dfff80
  • menu.selectionBackground#23a8f240
  • menu.selectionBorder#23a8f240
  • menu.selectionForeground#86e3fff0
  • menu.separatorBackground#23a8f280
  • menubar.selectionBackground#23a8f240
  • menubar.selectionBorder#23a8f240
  • menubar.selectionForeground#82dfff80
  • minimap.background#10161E
  • minimap.errorHighlight#ff003378
  • minimap.selectionHighlight#23a8f240
  • minimap.warningHighlight#cc884478
  • notificationCenter.border#10161E
  • notificationCenterHeader.background#181e26ff
  • notificationCenterHeader.foreground#82dfff60
  • notificationLink.foreground#1ba0eaff
  • notifications.background#181e26f0
  • notifications.border#23a8f2f0
  • notifications.foreground#82dfff60
  • notificationsErrorIcon.foreground#ff003378
  • notificationsInfoIcon.foreground#23a8f2ff
  • notificationsWarningIcon.foreground#cc884478
  • notificationToast.border#23a8f2f0
  • panel.background#10161E
  • panel.border#82dfff20
  • panelTitle.activeBorder#bcfdff40
  • panelTitle.activeForeground#bcfdff40
  • panelTitle.inactiveForeground#8ccdf240
  • pickerGroup.foreground#fec67cff
  • progressBar.background#181e26ff
  • quickInput.foreground#82dfff60
  • scrollbar.shadow#00060eff
  • scrollbarSlider.activeBackground#23a8f280
  • scrollbarSlider.background#23a8f240
  • scrollbarSlider.hoverBackground#23a8f240
  • selection.background#23a8f240
  • settings.checkboxBackground#20262eff
  • settings.checkboxBorder#10161E
  • settings.dropdownBorder#10161E
  • settings.dropdownListBorder#10161E
  • settings.headerForeground#23A8F2
  • settings.modifiedItemIndicator#61bef260
  • settings.numberInputBorder#10161E
  • settings.textInputBorder#10161E
  • sideBar.background#11161dff
  • sideBar.border#0c121aff
  • sideBar.dropBackground#61bef260
  • sideBar.foreground#82dfff60
  • sideBarSectionHeader.background#17212B
  • sideBarSectionHeader.border#82dfff20
  • sideBarSectionHeader.foreground#75c9e660
  • sideBarTitle.foreground#61bef260
  • statusBar.background#141a22ff
  • statusBar.border#82dfff20
  • statusBar.debuggingBackground#3bc0ffff
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#82dfff60
  • statusBar.noFolderBackground#23a8f280
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#23a8f280
  • statusBarItem.hoverBackground#23a8f240
  • statusBarItem.prominentBackground#23a8f280
  • statusBarItem.prominentHoverBackground#23a8f240
  • statusBarItem.remoteBackground#141a22ff
  • statusBarItem.remoteForeground#23A8F2
  • tab.activeBackground#181e26ff
  • tab.activeBorder#181e26ff
  • tab.activeBorderTop#23A8F2
  • tab.activeForeground#ffffff
  • tab.activeModifiedBorder#23A8F2
  • tab.border#00060eff
  • tab.hoverBackground#23a8f210
  • tab.hoverBorder#ffd49cc0
  • tab.hoverForeground#23a8f2a0
  • tab.inactiveBackground#141a22ff
  • tab.inactiveForeground#ffffff80
  • tab.inactiveModifiedBorder#ffd49cff
  • tab.lastPinnedBorder#61bef240
  • tab.unfocusedActiveBorder#181e26ff
  • tab.unfocusedActiveBorderTop#23a8f2a0
  • tab.unfocusedActiveForeground#ffffffa0
  • tab.unfocusedActiveModifiedBorder#23a8f2a0
  • tab.unfocusedHoverForeground#23a8f260
  • tab.unfocusedInactiveBackground#141a22ff
  • tab.unfocusedInactiveForeground#ffffff40
  • tab.unfocusedInactiveModifiedBorder#ffd49ca0
  • terminal.ansiBlack#3F3F3F
  • terminal.ansiBlue#7CB8BB
  • terminal.ansiBrightBlack#4F4F4F
  • terminal.ansiBrightBlue#7CB8BB
  • terminal.ansiBrightCyan#93E0E3
  • terminal.ansiBrightGreen#5F7F5F
  • terminal.ansiBrightMagenta#DC8CC3
  • terminal.ansiBrightRed#DCA3A3
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#E0CF9F
  • terminal.ansiCyan#93E0E3
  • terminal.ansiGreen#5F7F5F
  • terminal.ansiMagenta#DC8CC3
  • terminal.ansiRed#DCA3A3
  • terminal.ansiWhite#DCDCCC
  • terminal.ansiYellow#E0CF9F
  • terminal.background#11161dff
  • terminal.border#00060eff
  • terminal.foreground#3b6172
  • terminal.selectionBackground#23a8f240
  • terminalCursor.foreground#3b6172
  • textBlockQuote.border#23a8f280
  • textCodeBlock.background#23a8f280
  • textLink.activeForeground#3bc0ffff
  • textLink.foreground#1ba0eaff
  • textSeparator.foreground#23a8f280
  • titleBar.activeBackground#080e16ff
  • titleBar.activeForeground#82dfffc0
  • titleBar.border#00060eff
  • titleBar.inactiveBackground#10161eff
  • titleBar.inactiveForeground#5b9cb380
  • welcomePage.background#10161E
  • welcomePage.buttonBackground#141a22ff
  • welcomePage.buttonHoverBackground#181e26ff
  • welcomePage.progress.foreground#23A8F2
  • window.activeBorder#61bef260
  • window.inactiveBorder#5b9cb380

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment,comment.block.html#97b4d4ee
punctuation.definition.comment, punctuation.whitespace.comment#7c8b99ee
string, string.unquoted#a4b296ee
string.unquoted.heredoc#e5f4e5ee
keyword.other.phpdoc, storage.type.class.jsdoc, comment.block.documentantion.ts#e0d534ee
punctuation.section.embedded#f499a8ee
source.ruby.embedded#dadca8ee
meta.preprocessor, punctuation.definition.preprocessor#f5cfa6ee
keyword.other.directive#ecececee
keyword.other.directive.line-number
support.constant.numeric, constant.numeric#ffa87eee
constant, support.constant#84c0c0ee
constant.character, constant.other#dadca8ee
variable.other.constant#e5c0c0ee
keyword, keyword.control, meta.selector.css, entity.other.attribute-name#a3f9ffee
variable.other.readwrite.instance#ffe7c1ee
entity.name.module, support.other.module#ff9620ee
keyword.operator#7ed5c9ee
keyword.operator.symbol.infix.floating-point
source.ocaml, keyword.operator.symbol.prefix.floating-point
storage.type, storage.modifier, support.type#ffb920ee
entity.name.class.variant#8baae9ee
entity.other#e5e5e5ee
entity.other.inherited-class#e67e39ee
storage.type.user-defined, meta.property-list#cf5f48ee
entity.name.type, entity.name.type.class, entity.other.attribute-name.class.css, support.class, entity.name.class#ff8c3dee
invalid#ebffdcee
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#77b4b4ee
support.function.construct#e9cb4bee
punctuation.definition.variable#e7b090ee
meta.function-name, entity.name.function#a1c7d5ee
support.function#fb9999ee
meta.brace#f8d984ee
punctuation.definition.string.begin, punctuation.definition.string.end#ffba57ee
entity.name.tag.yaml#ffe7c1ee
punctuation.definition.entry#e5e5e5ee
keyword.other.DML.sql, keyword.other.data-integrity.sql#c8c8c8ee
source.sql, constant.other.database-name.sql, constant.other.table-name.sql, keyword.operator.star#a9d9ffee
source.diff, meta.diff.comment, meta.toc-list.comment.diff#ffffffee
meta.diff.header.from-file#d9da88ee
meta.diff.header.to-file#bb8ee7ee
meta.diff.range.unified#a1a3e2ee
markup.inserted.diff#b78de0ee
markup.deleted.diff#d9da88ee
string.regexp#d7ae5cee
string.regexp.arbitrary-repitition#b1a877ee
punctuation.definition.arbitrary-repitition#ffffffee
string.regexp.character-class#dbd097ee
punctuation.definition.character-class#ffffffee
markup.raw.inline.markdown#ffe7c1ee
markup.heading.markdown, punctuation.definition.heading#ffffffee
markup.list#ecececee
sublimelinter.mark.warning#eb4620ee
sublimelinter.gutter-mark#ffffffee
sublimelinter.mark.error#e9d458ee
meta.doctype, meta.tag.sgml-declaration.doctype, meta.tag.sgml.doctype#ffee49ee
entity#b0aee7ee
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.tag.structure.any.html#ffcc20ee
entity.other.attribute-name.html#b0aee7ee
entity.name.tag#e6c1c2ee
meta.tag#dfc55fee
meta.tag.inline source, text.html.php.source#aebb55ee
meta.tag.other, entity.name.tag.style, entity.name.tag.script, meta.tag.block.script, source.js.embedded punctuation.definition.tag.html, source.css.embedded punctuation.definition.tag.html#ac89b5ee
entity.other.attribute-name, meta.tag punctuation.definition.string#dfc55fee
meta.tag string -source -punctuation, text source text meta.tag string -punctuation#789ec6ee
punctuation.section.embedded -(source string source punctuation.section.embedded), meta.brace.erb.html#dfc55fee
meta.toc-list.id#aebb55ee
string.quoted.double.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html#aebb55ee
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end#789ec6ee
meta.selector.css entity.other.attribute-name.id#ac89b5ee
support.type.property-name.css#7f807fee
hyperlink#6d7cb3ee
invisibles#ffffffee
level0#5f405fee
level1#405f5fee
level10#5c5c7bee
level2#5f4040ee
level3#405f40ee
level4#40405fee
level5#7b7b5cee
level6#7b5c7bee
level7#5c7b7bee
level8#7b5c5cee
level9#5c7b5cee
markup#e2e2e2ee
match#ffad7eee
meta#cdc0b3ee
none#8c927eee
property#9cb5c7ee
punctuation#ffdc82ee
source#eaeaeaee
storage#74935cee
support#b8fcbdee
text#eaeaeaee
variable#f0e1cdee
wordhighlight#ff30acee
token.info-token#7faaf4ee
token.warn-token#ddab4dee
token.error-token#ff6161ee
token.debug-token#c47ff4ee

Shiki preview

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

Loading...

Apophis Dark Matter Theme by Nicola Granata - VS Code Theme