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#c5afd110
  • activityBar.activeBorder#c0a0d0ff
  • activityBar.activeFocusBorder#c0a0d0ff
  • activityBar.background#0e0e12ff
  • activityBar.border#0d0d0fff
  • activityBar.foreground#a080b0ff
  • activityBar.inactiveForeground#a48eb060
  • activityBarBadge.background#c3dbb7c0
  • activityBarBadge.foreground#000000
  • badge.background#c3dbb7c0
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#a080b0a0
  • breadcrumb.background#1a1a1eff
  • breadcrumb.focusForeground#a080b0ff
  • breadcrumb.foreground#a080b0a0
  • button.background#16161aff
  • button.foreground#edede9ff
  • button.hoverBackground#1a1a1eff
  • descriptionForeground#edede9ff
  • dropdown.background#303034ff
  • dropdown.border#101014ff
  • dropdown.foreground#b2b2b6ff
  • dropdown.listBackground#303034ff
  • editor.background#121216
  • editor.findMatchBackground#ecffdc1e
  • editor.findMatchHighlightBackground#ecffdc3c
  • editor.findRangeHighlightBackground#e4b4dc23
  • editor.foreground#c5afd160
  • editor.lineHighlightBackground#a58fb120
  • editor.selectionBackground#a080b040
  • editor.selectionHighlightBackground#a080b049
  • editor.selectionHighlightBorder#a080b040
  • editor.wordHighlightStrongBackground#a080b049
  • editor.wordHighlightStrongBorder#a080b0a0
  • editorBracketMatch.background#ff336660
  • editorBracketMatch.border#ff336660
  • editorError.foreground#ff0033
  • editorGroup.border#0d0d0fff
  • editorGroupHeader.border#0d0d0fff
  • editorGroupHeader.noTabsBackground#16161aff
  • editorGroupHeader.tabsBackground#16161aff
  • editorGroupHeader.tabsBorder#a48eb060
  • editorGutter.background#121216
  • editorGutter.modifiedBackground#a080b0ff
  • editorHoverWidget.border#856f9160
  • editorIndentGuide.activeBackground#a080b049
  • editorIndentGuide.background#1a1a1eff
  • editorLineNumber.activeForeground#b7a8c0a0
  • editorLineNumber.foreground#a798b040
  • editorOverviewRuler.errorForeground#ff0033
  • editorOverviewRuler.findMatchForeground#a080b040
  • editorOverviewRuler.warningForeground#cc884478
  • editorOverviewRuler.wordHighlightForeground#a080b049
  • editorPane.background#0f0f13ff
  • editorSuggestWidget.background#121216
  • editorSuggestWidget.border#856f9160
  • editorSuggestWidget.selectedBackground#222226ff
  • editorUnnecessaryCode.border#12121680
  • editorUnnecessaryCode.opacity#12121680
  • editorWidget.background#16161aff
  • editorWidget.border#a080b0ff
  • editorWidget.foreground#a080b0ff
  • errorForeground#a080b0ff
  • focusBorder#856f9160
  • foreground#c5afd160
  • gitDecoration.untrackedResourceForeground#99bb33
  • icon.foreground#a080b0ff
  • input.background#222226ff
  • input.border#121216
  • input.foreground#b7a8c0a0
  • input.placeholderForeground#87789040
  • inputOption.activeBackground#9878a83c
  • inputOption.activeBorder#9878a84b
  • list.activeSelectionBackground#a080b02a
  • list.activeSelectionForeground#fcc980ff
  • list.dropBackground#303034ff
  • list.errorForeground#ff4b7eff
  • list.focusBackground#a080b02a
  • list.focusForeground#c9b3d5f0
  • list.highlightForeground#9878a880
  • list.hoverBackground#8060902a
  • list.hoverForeground#c9b3d5f0
  • list.inactiveSelectionBackground#8060902a
  • list.inactiveSelectionForeground#d6ab6dff
  • list.invalidItemForeground#f58fffff
  • list.warningForeground#feba76ff
  • listFilterWidget.outline#0d0d0fff
  • menu.background#16161af0
  • menu.border#16161af0
  • menu.foreground#c5afd180
  • menu.selectionBackground#a080b040
  • menu.selectionBorder#a080b040
  • menu.selectionForeground#c9b3d5f0
  • menu.separatorBackground#a080b080
  • menubar.selectionBackground#a080b040
  • menubar.selectionBorder#a080b040
  • menubar.selectionForeground#c5afd180
  • minimap.background#121216
  • minimap.errorHighlight#ff003378
  • minimap.selectionHighlight#a080b040
  • minimap.warningHighlight#cc884478
  • notificationCenter.border#121216
  • notificationCenterHeader.background#1a1a1eff
  • notificationCenterHeader.foreground#c5afd160
  • notificationLink.foreground#9878a8ff
  • notifications.background#1a1a1ef0
  • notifications.border#a080b0f0
  • notifications.foreground#c5afd160
  • notificationsErrorIcon.foreground#ff003378
  • notificationsInfoIcon.foreground#a080b0ff
  • notificationsWarningIcon.foreground#cc884478
  • notificationToast.border#a080b0f0
  • panel.background#101014ff
  • panel.border#c5afd120
  • panelTitle.activeBorder#d7c8e040
  • panelTitle.activeForeground#d7c8e040
  • panelTitle.inactiveForeground#a798b040
  • pickerGroup.foreground#fcc980ff
  • progressBar.background#1a1a1eff
  • quickInput.foreground#c5afd160
  • scrollbar.shadow#020206ff
  • scrollbarSlider.activeBackground#a080b080
  • scrollbarSlider.background#a080b040
  • scrollbarSlider.hoverBackground#a080b040
  • selection.background#a080b040
  • settings.checkboxBackground#222226ff
  • settings.checkboxBorder#121216
  • settings.dropdownBorder#121216
  • settings.dropdownListBorder#121216
  • settings.headerForeground#a080b0ff
  • settings.modifiedItemIndicator#a48eb060
  • settings.numberInputBorder#121216
  • settings.textInputBorder#121216
  • sideBar.background#121216
  • sideBar.border#0d0d0fff
  • sideBar.dropBackground#a48eb060
  • sideBar.foreground#c5afd160
  • sideBarSectionHeader.background#121216
  • sideBarSectionHeader.border#c5afd120
  • sideBarSectionHeader.foreground#b19ebc60
  • sideBarTitle.foreground#a48eb060
  • statusBar.background#16161aff
  • statusBar.border#c5afd120
  • statusBar.debuggingBackground#b898c8ff
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#c5afd160
  • statusBar.noFolderBackground#a080b080
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#a080b080
  • statusBarItem.hoverBackground#a080b040
  • statusBarItem.prominentBackground#a080b080
  • statusBarItem.prominentHoverBackground#a080b040
  • statusBarItem.remoteBackground#16161aff
  • statusBarItem.remoteForeground#a080b0ff
  • tab.activeBackground#1a1a1eff
  • tab.activeBorder#1a1a1eff
  • tab.activeBorderTop#a080b0ff
  • tab.activeForeground#ffffff
  • tab.activeModifiedBorder#a080b0ff
  • tab.border#0d0d0fff
  • tab.hoverBackground#a080b010
  • tab.hoverBorder#c3dbb7c0
  • tab.hoverForeground#a080b0a0
  • tab.inactiveBackground#121216
  • tab.inactiveForeground#ffffff80
  • tab.inactiveModifiedBorder#c3dbb7ff
  • tab.lastPinnedBorder#a48eb040
  • tab.unfocusedActiveBorder#1a1a1eff
  • tab.unfocusedActiveBorderTop#a080b0a0
  • tab.unfocusedActiveForeground#ffffffa0
  • tab.unfocusedActiveModifiedBorder#a080b0a0
  • tab.unfocusedHoverForeground#a080b060
  • tab.unfocusedInactiveBackground#121216
  • tab.unfocusedInactiveForeground#ffffff40
  • tab.unfocusedInactiveModifiedBorder#c3dbb7a0
  • 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#121216
  • terminal.border#0d0d0fff
  • terminal.foreground#554d5c
  • terminal.selectionBackground#a080b040
  • terminalCursor.foreground#554d5c
  • textBlockQuote.border#a080b080
  • textCodeBlock.background#a080b080
  • textLink.activeForeground#b898c8ff
  • textLink.foreground#9878a8ff
  • textSeparator.foreground#a080b080
  • titleBar.activeBackground#0f0f13ff
  • titleBar.activeForeground#c0a0d060
  • titleBar.border#0d0d0fff
  • titleBar.inactiveBackground#17171bff
  • titleBar.inactiveForeground#8a7b9280
  • welcomePage.background#121216
  • welcomePage.buttonBackground#16161aff
  • welcomePage.buttonHoverBackground#1a1a1eff
  • welcomePage.progress.foreground#a080b0ff
  • window.activeBorder#a48eb060
  • window.inactiveBorder#8a7b9280

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment,comment.block.html#81a1c4ccitalic
punctuation.definition.comment, punctuation.whitespace.comment#647484ccitalic
string, string.unquoted#909F80
string.unquoted.heredoc#d6e6d6
keyword.other.phpdoc, storage.type.class.jsdoc, comment.block.documentantion.ts#d1c516italic
punctuation.section.embedded#e68494
source.ruby.embedded#cacc94
meta.preprocessor, punctuation.definition.preprocessor#e8be92
keyword.other.directive#dedede
keyword.other.directive.line-numberunderline
support.constant.numeric, constant.numeric#f89466
constant, support.constant#6daeae
constant.character, constant.other#cacc94
variable.other.constant#d6aeae
keyword, keyword.control, meta.selector.css, entity.other.attribute-name#8eecfa
variable.other.readwrite.instance#fed8af
entity.name.module, support.other.module#ff8000
keyword.operator#66c5b8
keyword.operator.symbol.infix.floating-pointunderline
source.ocaml, keyword.operator.symbol.prefix.floating-pointunderline
storage.type, storage.modifier, support.type#ffa600
entity.name.class.variant#7496da
entity.other#d6d6d6
entity.other.inherited-class#d7661b
storage.type.user-defined, meta.property-list#be442b
entity.name.type, entity.name.type.class, entity.other.attribute-name.class.css, support.class, entity.name.class#f47520
invalid#ddffccitalic underline
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#5fa1a1
support.function.construct#daba2f
punctuation.definition.variable#d89c7a
meta.function-name, entity.name.function#8cb5c5
support.function#ee8484
meta.brace#ebc96d
punctuation.definition.string.begin, punctuation.definition.string.end#f8a73c
entity.name.tag.yaml#fed8af
punctuation.definition.entry#d6d6d6
keyword.other.DML.sql, keyword.other.data-integrity.sql#b7b7b7
source.sql, constant.other.database-name.sql, constant.other.table-name.sql, keyword.operator.star#95c9f3
source.diff, meta.diff.comment, meta.toc-list.comment.diff#ffffff
meta.diff.header.from-file#c9ca71
meta.diff.header.to-file#a878d8
meta.diff.range.unified#8c8ed3
markup.inserted.diff#a476d1
markup.deleted.diff#c9ca71
string.regexp#c79a41
string.regexp.arbitrary-repitition#9e945f
punctuation.definition.arbitrary-repitition#ffffff
string.regexp.character-class#cbbf81
punctuation.definition.character-class#ffffff
markup.raw.inline.markdown#fed8af
markup.heading.markdown, punctuation.definition.heading#ffffff
markup.list#dedede
sublimelinter.mark.warning#dd2900
sublimelinter.gutter-mark#ffffff
sublimelinter.mark.error#dbc43d
meta.doctype, meta.tag.sgml-declaration.doctype, meta.tag.sgml.doctype#ffe02d
entity#9c9ad8
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.tag.structure.any.html#ffbb00
entity.other.attribute-name.html#9c9ad8
entity.name.tag#d7afb0
meta.tag#D0B344
meta.tag.inline source, text.html.php.source#9AA83A
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#9872A2
entity.other.attribute-name, meta.tag punctuation.definition.string#D0B344
meta.tag string -source -punctuation, text source text meta.tag string -punctuation#6089B4
punctuation.section.embedded -(source string source punctuation.section.embedded), meta.brace.erb.html#D0B344
meta.toc-list.id#9AA83A
string.quoted.double.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html#9AA83A
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end#6089B4
meta.selector.css entity.other.attribute-name.id#9872A2
support.type.property-name.css#676867
hyperlink#5464a0
invisibles#ffffff
level0#452345
level1#234545
level10#414163
level2#452323
level3#234523
level4#232345
level5#636341
level6#634163
level7#416363
level8#634141
level9#416341
markup#d3d3d3
match#ff9966
meta#bcaea0
none#757c66
property#87a2b5
punctuation#ffcc6a
source#dcdcdc
storage#5b7d41
support#a5efab
text#dcdcdc
variable#e2d2bc
wordhighlight#ff1198
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6

Shiki preview

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

Loading...

Apophis Dark Matter Theme by Nicola Granata - VS Code Theme