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#090d11ff
  • activityBar.activeBorder#b9b0c2ff
  • activityBar.activeFocusBorder#b9b0c2ff
  • activityBar.background#090d11ff
  • activityBar.border#060a0eff
  • activityBar.foreground#a48ebaff
  • activityBar.inactiveForeground#a48eba60
  • activityBarBadge.background#a988cbc0
  • activityBarBadge.foreground#000000ff
  • badge.background#a988cbc0
  • badge.foreground#000000ff
  • breadcrumb.activeSelectionForeground#a48ebaa0
  • breadcrumb.background#151a1fff
  • breadcrumb.focusForeground#a48ebaff
  • breadcrumb.foreground#a48ebaa0
  • button.background#11161bff
  • button.foreground#e2ddd8ff
  • button.hoverBackground#151a1fff
  • descriptionForeground#e2ddd8ff
  • dropdown.background#2b3035ff
  • dropdown.border#0b0f15ff
  • dropdown.foreground#adb2b7ff
  • dropdown.listBackground#2b3035ff
  • editor.background#0d1217ff
  • editor.findMatchBackground#f6f6e91e
  • editor.findMatchHighlightBackground#f6f6e93c
  • editor.findRangeHighlightBackground#edc4ec23
  • editor.foreground#7d7585ff
  • editor.lineHighlightBackground#5d556520
  • editor.selectionBackground#a48eba40
  • editor.selectionHighlightBackground#a48eba49
  • editor.selectionHighlightBorder#a48eba40
  • editor.wordHighlightStrongBackground#a48eba49
  • editor.wordHighlightStrongBorder#a48ebaa0
  • editorBracketMatch.background#d8496d60
  • editorBracketMatch.border#d8496d60
  • editorError.foreground#d62947ff
  • editorGroup.border#060a0eff
  • editorGroupHeader.border#060a0eff
  • editorGroupHeader.noTabsBackground#11161bff
  • editorGroupHeader.tabsBackground#11161bff
  • editorGroupHeader.tabsBorder#a48eba60
  • editorGutter.background#0d1217ff
  • editorGutter.modifiedBackground#a48ebaff
  • editorHoverWidget.border#3d3545ff
  • editorIndentGuide.activeBackground#a48eba49
  • editorIndentGuide.background#151a1fff
  • editorLineNumber.activeForeground#b9b0c2ff
  • editorLineNumber.foreground#b9b0c255
  • editorOverviewRuler.errorForeground#d62947ff
  • editorOverviewRuler.findMatchForeground#a48eba40
  • editorOverviewRuler.warningForeground#b5865678
  • editorOverviewRuler.wordHighlightForeground#a48eba49
  • editorPane.background#0a0e13ff
  • editorSuggestWidget.background#0d1217ff
  • editorSuggestWidget.border#3d3545ff
  • editorSuggestWidget.selectedBackground#1d2227ff
  • editorUnnecessaryCode.border#0d121780
  • editorUnnecessaryCode.opacity#0d121780
  • editorWidget.background#11161bff
  • editorWidget.border#a48ebaff
  • editorWidget.foreground#a48ebaff
  • errorForeground#a48ebaff
  • focusBorder#3d3545ff
  • foreground#7d7585ff
  • gitDecoration.untrackedResourceForeground#95ad4eff
  • icon.foreground#a48ebaff
  • input.background#1d2227ff
  • input.border#0d1217ff
  • input.foreground#b9b0c2ff
  • input.placeholderForeground#9990a255
  • inputOption.activeBackground#9c86b23c
  • inputOption.activeBorder#9c86b24b
  • list.activeSelectionBackground#a48eba2a
  • list.activeSelectionForeground#e6bf8cff
  • list.dropBackground#2b3035ff
  • list.errorForeground#da5c80ff
  • list.focusBackground#a48eba2a
  • list.focusForeground#a48ebaa0
  • list.highlightForeground#9c86b280
  • list.hoverBackground#846e9a2a
  • list.hoverForeground#a48ebaa0
  • list.inactiveSelectionBackground#846e9a2a
  • list.inactiveSelectionForeground#c2a176ff
  • list.invalidItemForeground#de96e5ff
  • list.warningForeground#e7b788ff
  • listFilterWidget.outline#060a0eff
  • menu.background#151a1ff0
  • menu.border#151a1ff0
  • menu.foreground#7d758580
  • menu.selectionBackground#a48eba20
  • menu.selectionBorder#a48eba20
  • menu.selectionForeground#a48ebaa0
  • menu.separatorBackground#a48eba80
  • menubar.selectionBackground#a48eba20
  • menubar.selectionBorder#a48eba20
  • menubar.selectionForeground#7d758580
  • minimap.background#0d1217ff
  • minimap.errorHighlight#d6294778
  • minimap.selectionHighlight#a48eba40
  • minimap.warningHighlight#b5865678
  • notificationCenter.border#0d1217ff
  • notificationCenterHeader.background#151a1fff
  • notificationCenterHeader.foreground#7d7585ff
  • notificationLink.foreground#9c86b2ff
  • notifications.background#151a1ff0
  • notifications.border#a48ebaf0
  • notifications.foreground#7d7585ff
  • notificationsErrorIcon.foreground#d6294778
  • notificationsInfoIcon.foreground#a48ebaff
  • notificationsWarningIcon.foreground#b5865678
  • notificationToast.border#a48ebaf0
  • panel.background#0b0f15ff
  • panel.border#7d758520
  • panelTitle.activeBorder#a48ebaa0
  • panelTitle.activeForeground#a48ebaa0
  • panelTitle.inactiveForeground#a48eba60
  • pickerGroup.foreground#e6bf8cff
  • progressBar.background#151a1fff
  • quickInput.foreground#7d7585ff
  • scrollbar.shadow#010308ff
  • scrollbarSlider.activeBackground#a48eba80
  • scrollbarSlider.background#a48eba40
  • scrollbarSlider.hoverBackground#a48eba40
  • selection.background#a48eba40
  • settings.checkboxBackground#1d2227ff
  • settings.checkboxBorder#0d1217ff
  • settings.dropdownBorder#0d1217ff
  • settings.dropdownListBorder#0d1217ff
  • settings.headerForeground#a48ebaff
  • settings.modifiedItemIndicator#a48eba60
  • settings.numberInputBorder#0d1217ff
  • settings.textInputBorder#0d1217ff
  • sideBar.background#0d1217ff
  • sideBar.border#060a0eff
  • sideBar.dropBackground#a48eba60
  • sideBar.foreground#7d7585a0
  • sideBarSectionHeader.background#0d1217ff
  • sideBarSectionHeader.border#7d758520
  • sideBarSectionHeader.foreground#a48ebaa0
  • sideBarTitle.foreground#a48ebaa0
  • statusBar.background#11161bff
  • statusBar.border#7d758520
  • statusBar.debuggingBackground#a988cbc0
  • statusBar.debuggingForeground#000000a0
  • statusBar.foreground#a48ebaa0
  • statusBar.noFolderBackground#a48eba80
  • statusBar.noFolderForeground#f7f7f7ff
  • statusBarItem.activeBackground#a48eba80
  • statusBarItem.hoverBackground#a48eba40
  • statusBarItem.prominentBackground#a48eba80
  • statusBarItem.prominentHoverBackground#a48eba40
  • statusBarItem.remoteBackground#11161bff
  • statusBarItem.remoteForeground#a48ebaff
  • tab.activeBackground#151a1fff
  • tab.activeBorder#151a1fff
  • tab.activeBorderTop#a48ebaff
  • tab.activeForeground#b9b0c2ff
  • tab.activeModifiedBorder#a48ebaff
  • tab.border#060a0eff
  • tab.hoverBackground#a48eba10
  • tab.hoverBorder#a48eba80
  • tab.hoverForeground#a48ebaa0
  • tab.inactiveBackground#11161bff
  • tab.inactiveForeground#b9b0c260
  • tab.inactiveModifiedBorder#a48eba80
  • tab.lastPinnedBorder#a48eba40
  • tab.unfocusedActiveBorder#151a1fff
  • tab.unfocusedActiveBorderTop#a48ebaa0
  • tab.unfocusedActiveForeground#b9b0c2a0
  • tab.unfocusedActiveModifiedBorder#a48ebaa0
  • tab.unfocusedHoverForeground#a48eba60
  • tab.unfocusedInactiveBackground#11161bff
  • tab.unfocusedInactiveForeground#b9b0c240
  • tab.unfocusedInactiveModifiedBorder#a48ebaa0
  • terminal.ansiBlack#373737ff
  • terminal.ansiBlue#81abaeff
  • terminal.ansiBrightBlack#474747ff
  • terminal.ansiBrightBlue#81abaeff
  • terminal.ansiBrightCyan#9cd2d4ff
  • terminal.ansiBrightGreen#5d735dff
  • terminal.ansiBrightMagenta#c68eb5ff
  • terminal.ansiBrightRed#c9a1a1ff
  • terminal.ansiBrightWhite#f7f7f7ff
  • terminal.ansiBrightYellow#d3c7a6ff
  • terminal.ansiCyan#9cd2d4ff
  • terminal.ansiGreen#5d735dff
  • terminal.ansiMagenta#c68eb5ff
  • terminal.ansiRed#c9a1a1ff
  • terminal.ansiWhite#d3d3c8ff
  • terminal.ansiYellow#d3c7a6ff
  • terminal.background#0d1217ff
  • terminal.border#060a0eff
  • terminal.foreground#7d7585ff
  • terminal.selectionBackground#a48eba40
  • terminalCursor.foreground#7d7585ff
  • textBlockQuote.border#a48eba80
  • textCodeBlock.background#a48eba80
  • textLink.activeForeground#bca5d2ff
  • textLink.foreground#9c86b2ff
  • textSeparator.foreground#a48eba80
  • titleBar.activeBackground#0a0e13ff
  • titleBar.activeForeground#a48ebaa0
  • titleBar.border#060a0eff
  • titleBar.inactiveBackground#12161bff
  • titleBar.inactiveForeground#ae9fbe80
  • welcomePage.background#0d1217ff
  • welcomePage.buttonBackground#11161bff
  • welcomePage.buttonHoverBackground#151a1fff
  • welcomePage.progress.foreground#a48ebaff
  • window.activeBorder#a48eba60
  • window.inactiveBorder#ae9fbe80

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment,comment.block.html#98b5d4c6
punctuation.definition.comment, punctuation.whitespace.comment#798896c6
string, string.unquoted#a5b296c6
string.unquoted.heredoc#ebf9ebc6
keyword.other.phpdoc, storage.type.class.jsdoc, comment.block.documentantion.ts#e3d83bc6
punctuation.section.embedded#f49caac6
source.ruby.embedded#dedfadc6
meta.preprocessor, punctuation.definition.preprocessor#f9d3abc6
keyword.other.directive#f2f2f2c6
keyword.other.directive.line-number
support.constant.numeric, constant.numeric#f9ab81c6
constant, support.constant#86c0c0c6
constant.character, constant.other#dedfadc6
variable.other.constant#e7c3c3c6
keyword, keyword.control, meta.selector.css, entity.other.attribute-name#a9fdfdc6
variable.other.readwrite.instance#fdecc7c6
entity.name.module, support.other.module#f79724c6
keyword.operator#81d6cbc6
keyword.operator.symbol.infix.floating-point
source.ocaml, keyword.operator.symbol.prefix.floating-point
storage.type, storage.modifier, support.type#f9bb26c6
entity.name.class.variant#8baae7c6
entity.other#eaeaeac6
entity.other.inherited-class#e37e3ac6
storage.type.user-defined, meta.property-list#ca5d46c6
entity.name.type, entity.name.type.class, entity.other.attribute-name.class.css, support.class, entity.name.class#f78d40c6
invalid#f2fee2c6
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#78b3b3c6
support.function.construct#ebce51c6
punctuation.definition.variable#e8b293c6
meta.function-name, entity.name.function#a3c8d6c6
support.function#f89c9cc6
meta.brace#fcdd8ac6
punctuation.definition.string.begin, punctuation.definition.string.end#fabc5cc6
entity.name.tag.yaml#fdecc7c6
punctuation.definition.entry#eaeaeac6
keyword.other.DML.sql, keyword.other.data-integrity.sql#cbcbcbc6
source.sql, constant.other.database-name.sql, constant.other.table-name.sql, keyword.operator.star#addcfbc6
source.diff, meta.diff.comment, meta.toc-list.comment.diff#ffffffc6
meta.diff.header.from-file#dcdd8dc6
meta.diff.header.to-file#ba8fe5c6
meta.diff.range.unified#a1a3e1c6
markup.inserted.diff#b68ddfc6
markup.deleted.diff#dcdd8dc6
string.regexp#d7af5fc6
string.regexp.arbitrary-repitition#b1a878c6
punctuation.definition.arbitrary-repitition#ffffffc6
string.regexp.character-class#ded39bc6
punctuation.definition.character-class#ffffffc6
markup.raw.inline.markdown#fdecc7c6
markup.heading.markdown, punctuation.definition.heading#ffffffc6
markup.list#f2f2f2c6
sublimelinter.mark.warning#e74520c6
sublimelinter.gutter-mark#ffffffc6
sublimelinter.mark.error#ecd85ec6
meta.doctype, meta.tag.sgml-declaration.doctype, meta.tag.sgml.doctype#fdf352c6
entity#b1afe7c6
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.tag.structure.any.html#fbcf27c6
entity.other.attribute-name.html#b1afe7c6
entity.name.tag#e8c4c5c6
meta.tag#e1c763c6
meta.tag.inline source, text.html.php.source#aebb58c6
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#aa88b3c6
entity.other.attribute-name, meta.tag punctuation.definition.string#e1c763c6
meta.tag string -source -punctuation, text source text meta.tag string -punctuation#789cc3c6
punctuation.section.embedded -(source string source punctuation.section.embedded), meta.brace.erb.html#e1c763c6
meta.toc-list.id#aebb58c6
string.quoted.double.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html#aebb58c6
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end#789cc3c6
meta.selector.css entity.other.attribute-name.id#aa88b3c6
support.type.property-name.css#7b7c7bc6
hyperlink#6a78aec6
invisibles#ffffffc6
level0#573957c6
level1#3a5858c6
level10#555574c6
level2#573838c6
level3#395839c6
level4#373756c6
level5#777758c6
level6#755775c6
level7#577676c6
level8#755656c6
level9#577657c6
markup#e7e7e7c6
match#f9af81c6
meta#cfc2b6c6
none#89907cc6
property#9db5c7c6
punctuation#fce088c6
source#f0f0f0c6
storage#718f59c6
support#bdfcc3c6
text#f0f0f0c6
variable#f5e6d2c6
wordhighlight#f531aac6
token.info-token#80aaf2c6
token.warn-token#ddac50c6
token.error-token#f56262c6
token.debug-token#c37ff2c6

Shiki preview

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

Loading...