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#141719ff
  • activityBar.border#121416ff
  • activityBar.foreground#a080b0ff
  • activityBar.inactiveForeground#a48eb060
  • activityBarBadge.background#c3dbb7c0
  • activityBarBadge.foreground#000000
  • badge.background#c3dbb7c0
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#a080b0a0
  • breadcrumb.background#212527ff
  • breadcrumb.focusForeground#a080b0ff
  • breadcrumb.foreground#a080b0a0
  • button.background#1d2123ff
  • button.foreground#e6e2e0ff
  • button.hoverBackground#212527ff
  • descriptionForeground#e6e2e0ff
  • dropdown.background#373b3dff
  • dropdown.border#171a1cff
  • dropdown.foreground#b9bdbfff
  • dropdown.listBackground#373b3dff
  • editor.background#191d1f
  • 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#121416ff
  • editorGroupHeader.border#121416ff
  • editorGroupHeader.noTabsBackground#1d2123ff
  • editorGroupHeader.tabsBackground#1d2123ff
  • editorGroupHeader.tabsBorder#a48eb060
  • editorGutter.background#191d1f
  • editorGutter.modifiedBackground#a080b0ff
  • editorHoverWidget.border#856f9160
  • editorIndentGuide.activeBackground#a080b049
  • editorIndentGuide.background#212527ff
  • editorLineNumber.activeForeground#b7a8c0a0
  • editorLineNumber.foreground#a798b040
  • editorOverviewRuler.errorForeground#ff0033
  • editorOverviewRuler.findMatchForeground#a080b040
  • editorOverviewRuler.warningForeground#cc884478
  • editorOverviewRuler.wordHighlightForeground#a080b049
  • editorPane.background#15191aff
  • editorSuggestWidget.background#191d1f
  • editorSuggestWidget.border#856f9160
  • editorSuggestWidget.selectedBackground#292d2fff
  • editorUnnecessaryCode.border#191d1f80
  • editorUnnecessaryCode.opacity#191d1f80
  • editorWidget.background#1d2123ff
  • editorWidget.border#a080b0ff
  • editorWidget.foreground#a080b0ff
  • errorForeground#a080b0ff
  • focusBorder#856f9160
  • foreground#c5afd160
  • gitDecoration.untrackedResourceForeground#99bb33
  • icon.foreground#a080b0ff
  • input.background#292d2fff
  • input.border#191d1f
  • input.foreground#b7a8c0a0
  • input.placeholderForeground#87789040
  • inputOption.activeBackground#9878a83c
  • inputOption.activeBorder#9878a84b
  • list.activeSelectionBackground#a080b02a
  • list.activeSelectionForeground#f5c07bff
  • list.dropBackground#373b3dff
  • list.errorForeground#ff4b7eff
  • list.focusBackground#a080b02a
  • list.focusForeground#c9b3d5f0
  • list.highlightForeground#9878a880
  • list.hoverBackground#8060902a
  • list.hoverForeground#c9b3d5f0
  • list.inactiveSelectionBackground#8060902a
  • list.inactiveSelectionForeground#d0a369ff
  • list.invalidItemForeground#f58fffff
  • list.warningForeground#feba76ff
  • listFilterWidget.outline#121416ff
  • menu.background#1d2123f0
  • menu.border#1d2123f0
  • 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#191d1f
  • minimap.errorHighlight#ff003378
  • minimap.selectionHighlight#a080b040
  • minimap.warningHighlight#cc884478
  • notificationCenter.border#191d1f
  • notificationCenterHeader.background#212527ff
  • notificationCenterHeader.foreground#c5afd160
  • notificationLink.foreground#9878a8ff
  • notifications.background#212527f0
  • notifications.border#a080b0f0
  • notifications.foreground#c5afd160
  • notificationsErrorIcon.foreground#ff003378
  • notificationsInfoIcon.foreground#a080b0ff
  • notificationsWarningIcon.foreground#cc884478
  • notificationToast.border#a080b0f0
  • panel.background#171a1cff
  • panel.border#c5afd120
  • panelTitle.activeBorder#d7c8e040
  • panelTitle.activeForeground#d7c8e040
  • panelTitle.inactiveForeground#a798b040
  • pickerGroup.foreground#f5c07bff
  • progressBar.background#212527ff
  • quickInput.foreground#c5afd160
  • scrollbar.shadow#090d0fff
  • scrollbarSlider.activeBackground#a080b080
  • scrollbarSlider.background#a080b040
  • scrollbarSlider.hoverBackground#a080b040
  • selection.background#a080b040
  • settings.checkboxBackground#292d2fff
  • settings.checkboxBorder#191d1f
  • settings.dropdownBorder#191d1f
  • settings.dropdownListBorder#191d1f
  • settings.headerForeground#a080b0ff
  • settings.modifiedItemIndicator#a48eb060
  • settings.numberInputBorder#191d1f
  • settings.textInputBorder#191d1f
  • sideBar.background#191d1f
  • sideBar.border#121416ff
  • sideBar.dropBackground#a48eb060
  • sideBar.foreground#c5afd160
  • sideBarSectionHeader.background#191d1f
  • sideBarSectionHeader.border#c5afd120
  • sideBarSectionHeader.foreground#b19ebc60
  • sideBarTitle.foreground#a48eb060
  • statusBar.background#1d2123ff
  • 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#1d2123ff
  • statusBarItem.remoteForeground#a080b0ff
  • tab.activeBackground#212527ff
  • tab.activeBorder#212527ff
  • tab.activeBorderTop#a080b0ff
  • tab.activeForeground#ffffff
  • tab.activeModifiedBorder#a080b0ff
  • tab.border#121416ff
  • tab.hoverBackground#a080b010
  • tab.hoverBorder#c3dbb7c0
  • tab.hoverForeground#a080b0a0
  • tab.inactiveBackground#191d1f
  • tab.inactiveForeground#ffffff80
  • tab.inactiveModifiedBorder#c3dbb7ff
  • tab.lastPinnedBorder#a48eb040
  • tab.unfocusedActiveBorder#212527ff
  • tab.unfocusedActiveBorderTop#a080b0a0
  • tab.unfocusedActiveForeground#ffffffa0
  • tab.unfocusedActiveModifiedBorder#a080b0a0
  • tab.unfocusedHoverForeground#a080b060
  • tab.unfocusedInactiveBackground#191d1f
  • 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#191d1f
  • terminal.border#121416ff
  • terminal.foreground#595362
  • terminal.selectionBackground#a080b040
  • terminalCursor.foreground#595362
  • textBlockQuote.border#a080b080
  • textCodeBlock.background#a080b080
  • textLink.activeForeground#b898c8ff
  • textLink.foreground#9878a8ff
  • textSeparator.foreground#a080b080
  • titleBar.activeBackground#15191aff
  • titleBar.activeForeground#c0a0d060
  • titleBar.border#121416ff
  • titleBar.inactiveBackground#1d2122ff
  • titleBar.inactiveForeground#8a7b9280
  • welcomePage.background#191d1f
  • welcomePage.buttonBackground#1d2123ff
  • welcomePage.buttonHoverBackground#212527ff
  • welcomePage.progress.foreground#a080b0ff
  • window.activeBorder#a48eb060
  • window.inactiveBorder#8a7b9280

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment,comment.block.html#89a9ccdd
punctuation.definition.comment, punctuation.whitespace.comment#6c7c8cdd
string, string.unquoted#98a788dd
string.unquoted.heredoc#deeededd
keyword.other.phpdoc, storage.type.class.jsdoc, comment.block.documentantion.ts#d9cd1edd
punctuation.section.embedded#ee8c9cdd
source.ruby.embedded#d2d49cdd
meta.preprocessor, punctuation.definition.preprocessor#f0c69add
keyword.other.directive#e6e6e6dd
keyword.other.directive.line-number
support.constant.numeric, constant.numeric#ff9c6edd
constant, support.constant#75b6b6dd
constant.character, constant.other#d2d49cdd
variable.other.constant#deb6b6dd
keyword, keyword.control, meta.selector.css, entity.other.attribute-name#96f4ffdd
variable.other.readwrite.instance#ffe0b7dd
entity.name.module, support.other.module#ff8808dd
keyword.operator#6ecdc0dd
keyword.operator.symbol.infix.floating-point
source.ocaml, keyword.operator.symbol.prefix.floating-point
storage.type, storage.modifier, support.type#ffae08dd
entity.name.class.variant#7c9ee2dd
entity.other#dedededd
entity.other.inherited-class#df6e23dd
storage.type.user-defined, meta.property-list#c64c33dd
entity.name.type, entity.name.type.class, entity.other.attribute-name.class.css, support.class, entity.name.class#fc7d28dd
invalid#e5ffd4dd
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#67a9a9dd
support.function.construct#e2c237dd
punctuation.definition.variable#e0a482dd
meta.function-name, entity.name.function#94bdcddd
support.function#f68c8cdd
meta.brace#f3d175dd
punctuation.definition.string.begin, punctuation.definition.string.end#ffaf44dd
entity.name.tag.yaml#ffe0b7dd
punctuation.definition.entry#dedededd
keyword.other.DML.sql, keyword.other.data-integrity.sql#bfbfbfdd
source.sql, constant.other.database-name.sql, constant.other.table-name.sql, keyword.operator.star#9dd1fbdd
source.diff, meta.diff.comment, meta.toc-list.comment.diff#ffffffdd
meta.diff.header.from-file#d1d279dd
meta.diff.header.to-file#b080e0dd
meta.diff.range.unified#9496dbdd
markup.inserted.diff#ac7ed9dd
markup.deleted.diff#d1d279dd
string.regexp#cfa249dd
string.regexp.arbitrary-repitition#a69c67dd
punctuation.definition.arbitrary-repitition#ffffffdd
string.regexp.character-class#d3c789dd
punctuation.definition.character-class#ffffffdd
markup.raw.inline.markdown#ffe0b7dd
markup.heading.markdown, punctuation.definition.heading#ffffffdd
markup.list#e6e6e6dd
sublimelinter.mark.warning#e53108dd
sublimelinter.gutter-mark#ffffffdd
sublimelinter.mark.error#e3cc45dd
meta.doctype, meta.tag.sgml-declaration.doctype, meta.tag.sgml.doctype#ffe835dd
entity#a4a2e0dd
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.tag.structure.any.html#ffc308dd
entity.other.attribute-name.html#a4a2e0dd
entity.name.tag#dfb7b8dd
meta.tag#d8bb4cdd
meta.tag.inline source, text.html.php.source#a2b042dd
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#a07aaadd
entity.other.attribute-name, meta.tag punctuation.definition.string#d8bb4cdd
meta.tag string -source -punctuation, text source text meta.tag string -punctuation#6891bcdd
punctuation.section.embedded -(source string source punctuation.section.embedded), meta.brace.erb.html#d8bb4cdd
meta.toc-list.id#a2b042dd
string.quoted.double.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html#a2b042dd
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end#6891bcdd
meta.selector.css entity.other.attribute-name.id#a07aaadd
support.type.property-name.css#6f706fdd
hyperlink#5c6ca8dd
invisibles#ffffffdd
level0#4d2b4ddd
level1#2b4d4ddd
level10#49496bdd
level2#4d2b2bdd
level3#2b4d2bdd
level4#2b2b4ddd
level5#6b6b49dd
level6#6b496bdd
level7#496b6bdd
level8#6b4949dd
level9#496b49dd
markup#dbdbdbdd
match#ffa16edd
meta#c4b6a8dd
none#7d846edd
property#8faabddd
punctuation#ffd472dd
source#e4e4e4dd
storage#638549dd
support#adf7b3dd
text#e4e4e4dd
variable#eadac4dd
wordhighlight#ff19a0dd
token.info-token#6f9eeedd
token.warn-token#d59f39dd
token.error-token#fc4f4fdd
token.debug-token#ba6feedd

Shiki preview

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

Loading...