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#b4a26110
  • activityBar.activeBorder#b3a056ff
  • activityBar.activeFocusBorder#b3a056ff
  • activityBar.background#241e15ff
  • activityBar.border#100b07ff
  • activityBar.foreground#938140ff
  • activityBar.inactiveForeground#92834b60
  • activityBarBadge.background#c0ac5fc0
  • activityBarBadge.foreground#000000ff
  • badge.background#c0ac5fc0
  • badge.foreground#000000ff
  • breadcrumb.activeSelectionForeground#938140a0
  • breadcrumb.background#282218ff
  • breadcrumb.focusForeground#938140ff
  • breadcrumb.foreground#938140a0
  • button.background#241e15ff
  • button.foreground#e3d9a0ff
  • button.hoverBackground#282218ff
  • descriptionForeground#e3d9a0ff
  • dropdown.background#3e3728ff
  • dropdown.border#201b12ff
  • dropdown.foreground#c2b382ff
  • dropdown.listBackground#3e3728ff
  • editor.background#201b12ff
  • editor.findMatchBackground#c3c0ac1e
  • editor.findMatchHighlightBackground#c3c0ac3c
  • editor.findRangeHighlightBackground#b7bb6523
  • editor.foreground#b4a26160
  • editor.lineHighlightBackground#93844b20
  • editor.selectionBackground#93814040
  • editor.selectionHighlightBackground#93804049
  • editor.selectionHighlightBorder#93814040
  • editor.wordHighlightStrongBackground#93804049
  • editor.wordHighlightStrongBorder#938140a0
  • editorBracketMatch.background#ff173c60
  • editorBracketMatch.border#ff173c60
  • editorError.foreground#ff000cff
  • editorGroup.border#100b07ff
  • editorGroupHeader.border#100b07ff
  • editorGroupHeader.noTabsBackground#241e15ff
  • editorGroupHeader.tabsBackground#241e15ff
  • editorGroupHeader.tabsBorder#92834b60
  • editorGutter.background#201b12ff
  • editorGutter.modifiedBackground#938140ff
  • editorHoverWidget.border#73663460
  • editorIndentGuide.activeBackground#93814049
  • editorIndentGuide.background#282218ff
  • editorLineNumber.activeForeground#a2935da0
  • editorLineNumber.foreground#92845260
  • editorOverviewRuler.errorForeground#ff000cff
  • editorOverviewRuler.findMatchForeground#93814040
  • editorOverviewRuler.warningForeground#d97c1a78
  • editorOverviewRuler.wordHighlightForeground#93804049
  • editorPane.background#18130dff
  • editorSuggestWidget.background#201b12ff
  • editorSuggestWidget.border#73663460
  • editorSuggestWidget.selectedBackground#302a1dff
  • editorUnnecessaryCode.border#201b1280
  • editorUnnecessaryCode.opacity#201b1280
  • editorWidget.background#241e15ff
  • editorWidget.border#938140ff
  • editorWidget.foreground#938140ff
  • errorForeground#938140ff
  • focusBorder#73663460
  • foreground#b4a26160
  • gitDecoration.untrackedResourceForeground#97b607ff
  • icon.foreground#938140ff
  • input.background#302a1dff
  • input.border#201b12ff
  • input.foreground#a2935da0
  • input.placeholderForeground#71663c60
  • inputOption.activeBackground#8a7a3a3c
  • inputOption.activeBorder#8a7a3a4b
  • list.activeSelectionBackground#9381402a
  • list.activeSelectionForeground#fab445ff
  • list.dropBackground#3e3728ff
  • list.errorForeground#ff3250ff
  • list.focusBackground#9381402a
  • list.focusForeground#b8a664f0
  • list.highlightForeground#8a7a3a80
  • list.hoverBackground#72632a2a
  • list.hoverForeground#b8a664f0
  • list.inactiveSelectionBackground#72632a2a
  • list.inactiveSelectionForeground#d49a3bff
  • list.invalidItemForeground#ff7dc1ff
  • list.warningForeground#ffac3eff
  • listFilterWidget.outline#100b07ff
  • menu.background#241e15f0
  • menu.border#241e15f0
  • menu.foreground#b4a26180
  • menu.selectionBackground#93814040
  • menu.selectionBorder#93814040
  • menu.selectionForeground#b8a664f0
  • menu.separatorBackground#93814080
  • menubar.selectionBackground#93814040
  • menubar.selectionBorder#93814040
  • menubar.selectionForeground#b4a26180
  • minimap.background#201b12ff
  • minimap.errorHighlight#ff000c78
  • minimap.selectionHighlight#93814040
  • minimap.warningHighlight#d97c1a78
  • notificationCenter.border#201b12ff
  • notificationCenterHeader.background#282218ff
  • notificationCenterHeader.foreground#b4a26160
  • notificationLink.foreground#8a7a3aff
  • notifications.background#282218f0
  • notifications.border#938140f0
  • notifications.foreground#b4a26160
  • notificationsErrorIcon.foreground#ff000c78
  • notificationsInfoIcon.foreground#938140ff
  • notificationsWarningIcon.foreground#d97c1a78
  • notificationToast.border#938140f0
  • panel.background#201b12ff
  • panel.border#b4a26120
  • panelTitle.activeBorder#c2b27460
  • panelTitle.activeForeground#c2b27460
  • panelTitle.inactiveForeground#92845260
  • pickerGroup.foreground#fab445ff
  • progressBar.background#282218ff
  • quickInput.foreground#b4a26160
  • scrollbar.shadow#100b07ff
  • scrollbarSlider.activeBackground#93814080
  • scrollbarSlider.background#93814040
  • scrollbarSlider.hoverBackground#93814040
  • selection.background#93814040
  • settings.checkboxBackground#302a1dff
  • settings.checkboxBorder#201b12ff
  • settings.dropdownBorder#201b12ff
  • settings.dropdownListBorder#201b12ff
  • settings.headerForeground#938140ff
  • settings.modifiedItemIndicator#92834b60
  • settings.numberInputBorder#201b12ff
  • settings.textInputBorder#201b12ff
  • sideBar.background#201b12ff
  • sideBar.border#1c170fff
  • sideBar.dropBackground#92834b60
  • sideBar.foreground#b4a26160
  • sideBarSectionHeader.background#241e15ff
  • sideBarSectionHeader.border#b4a26120
  • sideBarSectionHeader.foreground#a2925660
  • sideBarTitle.foreground#92834b60
  • statusBar.background#241e15ff
  • statusBar.border#b4a26120
  • statusBar.debuggingBackground#ab9851ff
  • statusBar.debuggingForeground#000000ff
  • statusBar.foreground#b4a26160
  • statusBar.noFolderBackground#93814080
  • statusBar.noFolderForeground#fff2b3ff
  • statusBarItem.activeBackground#93814080
  • statusBarItem.hoverBackground#93814040
  • statusBarItem.prominentBackground#93814080
  • statusBarItem.prominentHoverBackground#93814040
  • statusBarItem.remoteBackground#241e15ff
  • statusBarItem.remoteForeground#938140ff
  • tab.activeBackground#282218ff
  • tab.activeBorder#282218ff
  • tab.activeBorderTop#938140ff
  • tab.activeForeground#fff2b3ff
  • tab.activeModifiedBorder#938140ff
  • tab.border#100b07ff
  • tab.hoverBackground#93814010
  • tab.hoverBorder#c0ac5fc0
  • tab.hoverForeground#938140a0
  • tab.inactiveBackground#241e15ff
  • tab.inactiveForeground#fff2b380
  • tab.inactiveModifiedBorder#d8d0b2ff
  • tab.lastPinnedBorder#92834b40
  • tab.unfocusedActiveBorder#282218ff
  • tab.unfocusedActiveBorderTop#938140a0
  • tab.unfocusedActiveForeground#fff2b3a0
  • tab.unfocusedActiveModifiedBorder#938140a0
  • tab.unfocusedHoverForeground#93814060
  • tab.unfocusedInactiveBackground#241e15ff
  • tab.unfocusedInactiveForeground#fff2b340
  • tab.unfocusedInactiveModifiedBorder#d8d0b2a0
  • terminal.ansiBlack#403c2cff
  • terminal.ansiBlue#74b388ff
  • terminal.ansiBrightBlack#504b37ff
  • terminal.ansiBrightBlue#74b388ff
  • terminal.ansiBrightCyan#88dba5ff
  • terminal.ansiBrightGreen#5c7c3eff
  • terminal.ansiBrightMagenta#ea7d8dff
  • terminal.ansiBrightRed#e8966dff
  • terminal.ansiBrightWhite#fff2b3ff
  • terminal.ansiBrightYellow#e6c563ff
  • terminal.ansiCyan#88dba5ff
  • terminal.ansiGreen#5c7c3eff
  • terminal.ansiMagenta#ea7d8dff
  • terminal.ansiRed#e8966dff
  • terminal.ansiWhite#dfd28cff
  • terminal.ansiYellow#e6c563ff
  • terminal.background#201b12ff
  • terminal.border#100b07ff
  • terminal.foreground#574d30ff
  • terminal.selectionBackground#93814040
  • terminalCursor.foreground#574d30ff
  • textBlockQuote.border#93814080
  • textCodeBlock.background#93814080
  • textLink.activeForeground#ab9851ff
  • textLink.foreground#8a7a3aff
  • textSeparator.foreground#93814080
  • titleBar.activeBackground#18130dff
  • titleBar.activeForeground#b4a261c0
  • titleBar.border#100b07ff
  • titleBar.inactiveBackground#201b12ff
  • titleBar.inactiveForeground#7d724480
  • welcomePage.background#201b12ff
  • welcomePage.buttonBackground#241e15ff
  • welcomePage.buttonHoverBackground#282218ff
  • welcomePage.progress.foreground#938140ff
  • window.activeBorder#92834b60
  • window.inactiveBorder#7d724480

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment,comment.block.html#819993ee
punctuation.definition.comment, punctuation.whitespace.comment#646e63ee
string, string.unquoted#909760ee
string.unquoted.heredoc#d6dba1ee
keyword.other.phpdoc, storage.type.class.jsdoc, comment.block.documentantion.ts#d1bb11ee
punctuation.section.embedded#e67d6fee
source.ruby.embedded#cac26fee
meta.preprocessor, punctuation.definition.preprocessor#e8b56eee
keyword.other.directive#ded3a7ee
keyword.other.directive.line-number
support.constant.numeric, constant.numeric#f88d4dee
constant, support.constant#6da583ee
constant.character, constant.other#cac26fee
variable.other.constant#d6a583ee
keyword, keyword.control, meta.selector.css, entity.other.attribute-name#8ee0bcee
variable.other.readwrite.instance#fecd83ee
entity.name.module, support.other.module#ff7a00ee
keyword.operator#66bb8aee
keyword.operator.symbol.infix.floating-point
source.ocaml, keyword.operator.symbol.prefix.floating-point
storage.type, storage.modifier, support.type#ff9e00ee
entity.name.class.variant#748fa4ee
entity.other#d6cba1ee
entity.other.inherited-class#d76114ee
storage.type.user-defined, meta.property-list#be4120ee
entity.name.type, entity.name.type.class, entity.other.attribute-name.class.css, support.class, entity.name.class#f46f18ee
invalid#ddf299ee
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#5f9979ee
support.function.construct#dab123ee
punctuation.definition.variable#d8945cee
meta.function-name, entity.name.function#8cac94ee
support.function#ee7d63ee
meta.brace#ebbf52ee
punctuation.definition.string.begin, punctuation.definition.string.end#f89f2dee
entity.name.tag.yaml#fecd83ee
punctuation.definition.entry#d6cba1ee
keyword.other.DML.sql, keyword.other.data-integrity.sql#b7ae89ee
source.sql, constant.other.database-name.sql, constant.other.table-name.sql, keyword.operator.star#95bfb6ee
source.diff, meta.diff.comment, meta.toc-list.comment.diff#fff2bfee
meta.diff.header.from-file#c9c055ee
meta.diff.header.to-file#a872a2ee
meta.diff.range.unified#8c879eee
markup.inserted.diff#a4709dee
markup.deleted.diff#c9c055ee
string.regexp#c79231ee
string.regexp.arbitrary-repitition#9e8d47ee
punctuation.definition.arbitrary-repitition#fff2bfee
string.regexp.character-class#cbb561ee
punctuation.definition.character-class#fff2bfee
markup.raw.inline.markdown#fecd83ee
markup.heading.markdown, punctuation.definition.heading#fff2bfee
markup.list#ded3a7ee
sublimelinter.mark.warning#dd2700ee
sublimelinter.gutter-mark#fff2bfee
sublimelinter.mark.error#dbba2eee
meta.doctype, meta.tag.sgml-declaration.doctype, meta.tag.sgml.doctype#ffd522ee
entity#9c92a2ee
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.tag.structure.any.html#ffb200ee
entity.other.attribute-name.html#9c92a2ee
entity.name.tag#d7a684ee
meta.tag#d0aa33ee
meta.tag.inline source, text.html.php.source#9aa02cee
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#986c7aee
entity.other.attribute-name, meta.tag punctuation.definition.string#d0aa33ee
meta.tag string -source -punctuation, text source text meta.tag string -punctuation#608287ee
punctuation.section.embedded -(source string source punctuation.section.embedded), meta.brace.erb.html#d0aa33ee
meta.toc-list.id#9aa02cee
string.quoted.double.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html#9aa02cee
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end#608287ee
meta.selector.css entity.other.attribute-name.id#986c7aee
support.type.property-name.css#67634dee
hyperlink#545f78ee
invisibles#fff2bfee
level0#452134ee
level1#234234ee
level10#413e4aee
level2#45211aee
level3#23421aee
level4#232134ee
level5#635e31ee
level6#633e4aee
level7#415e4aee
level8#633e31ee
level9#415e31ee
markup#d3c89eee
match#ff914dee
meta#bca578ee
none#75764dee
property#879a88ee
punctuation#ffc250ee
source#dcd1a5ee
storage#5b7731ee
support#a5e380ee
text#dcd1a5ee
variable#e2c88dee
wordhighlight#ff1072ee
token.info-token#678fadee
token.warn-token#cd8f25ee
token.error-token#f44335ee
token.debug-token#b262adee

Shiki preview

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

Loading...

Apophis Dark Matter Theme by Nicola Granata - VS Code Theme