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#051925ff
  • activityBar.activeBorder#ffdcb3ff
  • activityBar.activeFocusBorder#ffdcb3ff
  • activityBar.background#051925ff
  • activityBar.border#041621ff
  • activityBar.foreground#ffa53fff
  • activityBar.inactiveForeground#ffa53f73
  • activityBarBadge.background#ff9a00e6
  • activityBarBadge.foreground#000000ff
  • badge.background#ff9a00e6
  • badge.foreground#000000ff
  • breadcrumb.activeSelectionForeground#ffa53fc0
  • breadcrumb.background#0e2837ff
  • breadcrumb.focusForeground#ffa53fff
  • breadcrumb.foreground#ffa53fc0
  • button.background#0a2433ff
  • button.foreground#f8dfcfff
  • button.hoverBackground#0e2837ff
  • descriptionForeground#f8dfcfff
  • dropdown.background#253e4dff
  • dropdown.border#061c2bff
  • dropdown.foreground#a7c0cfff
  • dropdown.listBackground#253e4dff
  • editor.background#061f2fff
  • editor.findMatchBackground#a8eaff24
  • editor.findMatchHighlightBackground#a8eaff48
  • editor.findRangeHighlightBackground#e3ff752a
  • editor.foreground#b89370ff
  • editor.lineHighlightBackground#98735026
  • editor.selectionBackground#ffa53f4c
  • editor.selectionHighlightBackground#ffa24057
  • editor.selectionHighlightBorder#ffa53f4c
  • editor.wordHighlightStrongBackground#ffa24057
  • editor.wordHighlightStrongBorder#ffa53fc0
  • editorBracketMatch.background#ff1f5d73
  • editorBracketMatch.border#ff1f5d73
  • editorError.foreground#ff0021ff
  • editorGroup.border#041621ff
  • editorGroupHeader.border#041621ff
  • editorGroupHeader.noTabsBackground#0a2433ff
  • editorGroupHeader.tabsBackground#0a2433ff
  • editorGroupHeader.tabsBorder#ffa53f73
  • editorGutter.background#061f2fff
  • editorGutter.modifiedBackground#ffa53fff
  • editorHoverWidget.border#785230ff
  • editorIndentGuide.activeBackground#ffa53f57
  • editorIndentGuide.background#0e2837ff
  • editorLineNumber.activeForeground#ffdcb3ff
  • editorLineNumber.foreground#ffdcb366
  • editorOverviewRuler.errorForeground#ff0021ff
  • editorOverviewRuler.findMatchForeground#ffa53f4c
  • editorOverviewRuler.warningForeground#d6843390
  • editorOverviewRuler.wordHighlightForeground#ffa24057
  • editorPane.background#061a28ff
  • editorSuggestWidget.background#061f2fff
  • editorSuggestWidget.border#785230ff
  • editorSuggestWidget.selectedBackground#16303fff
  • editorUnnecessaryCode.border#061f2f99
  • editorUnnecessaryCode.opacity#061f2f99
  • editorWidget.background#0a2433ff
  • editorWidget.border#ffa53fff
  • editorWidget.foreground#ffa53fff
  • errorForeground#ffa53fff
  • focusBorder#785230ff
  • foreground#b89370ff
  • gitDecoration.untrackedResourceForeground#96bf1cff
  • icon.foreground#ffa53fff
  • input.background#16303fff
  • input.border#061f2fff
  • input.foreground#ffdcb3ff
  • input.placeholderForeground#e4bc9366
  • inputOption.activeBackground#ff9d3748
  • inputOption.activeBorder#ff9d375a
  • list.activeSelectionBackground#ffa53f32
  • list.activeSelectionForeground#ffbb62ff
  • list.dropBackground#253e4dff
  • list.errorForeground#ff3b78ff
  • list.focusBackground#ffa53f32
  • list.focusForeground#ffa53fc0
  • list.highlightForeground#ff9d3799
  • list.hoverBackground#eb851f32
  • list.hoverForeground#ffa53fc0
  • list.inactiveSelectionBackground#eb851f32
  • list.inactiveSelectionForeground#e19f54ff
  • list.invalidItemForeground#ff85ffff
  • list.warningForeground#ffb765ff
  • listFilterWidget.outline#041621ff
  • menu.background#122c3bff
  • menu.border#122c3bff
  • menu.foreground#f8ad60c0
  • menu.selectionBackground#ffa53f26
  • menu.selectionBorder#ffa53f26
  • menu.selectionForeground#ffa53fc0
  • menu.separatorBackground#ffa53f99
  • menubar.selectionBackground#ffa53f26
  • menubar.selectionBorder#ffa53f26
  • menubar.selectionForeground#f8ad60c0
  • minimap.background#061f2fff
  • minimap.errorHighlight#ff002190
  • minimap.selectionHighlight#ffa53f4c
  • minimap.warningHighlight#d6843390
  • notificationCenter.border#061f2fff
  • notificationCenterHeader.background#0e2837ff
  • notificationCenterHeader.foreground#b89370ff
  • notificationLink.foreground#ff9d37ff
  • notifications.background#0e2837ff
  • notifications.border#ffa53fff
  • notifications.foreground#b89370ff
  • notificationsErrorIcon.foreground#ff002190
  • notificationsInfoIcon.foreground#ffa53fff
  • notificationsWarningIcon.foreground#d6843390
  • notificationToast.border#ffa53fff
  • panel.background#061c2bff
  • panel.border#b8937026
  • panelTitle.activeBorder#ffa53fc0
  • panelTitle.activeForeground#ffa53fc0
  • panelTitle.inactiveForeground#ffa53f73
  • pickerGroup.foreground#ffbb62ff
  • progressBar.background#0e2837ff
  • quickInput.foreground#b89370ff
  • scrollbar.shadow#000f1fff
  • scrollbarSlider.activeBackground#ffa53f99
  • scrollbarSlider.background#ffa53f4c
  • scrollbarSlider.hoverBackground#ffa53f4c
  • selection.background#ffa53f4c
  • settings.checkboxBackground#16303fff
  • settings.checkboxBorder#061f2fff
  • settings.dropdownBorder#061f2fff
  • settings.dropdownListBorder#061f2fff
  • settings.headerForeground#ffa53fff
  • settings.modifiedItemIndicator#ffa53f73
  • settings.numberInputBorder#061f2fff
  • settings.textInputBorder#061f2fff
  • sideBar.background#061f2fff
  • sideBar.border#041621ff
  • sideBar.dropBackground#ffa53f73
  • sideBar.foreground#b89370c0
  • sideBarSectionHeader.background#061f2fff
  • sideBarSectionHeader.border#b8937026
  • sideBarSectionHeader.foreground#ffa53fc0
  • sideBarTitle.foreground#ffa53fc0
  • statusBar.background#0a2433ff
  • statusBar.border#b8937026
  • statusBar.debuggingBackground#ff9a00e6
  • statusBar.debuggingForeground#000000c0
  • statusBar.foreground#ffa53fc0
  • statusBar.noFolderBackground#ffa53f99
  • statusBar.noFolderForeground#ffffffff
  • statusBarItem.activeBackground#ffa53f99
  • statusBarItem.hoverBackground#ffa53f4c
  • statusBarItem.prominentBackground#ffa53f99
  • statusBarItem.prominentHoverBackground#ffa53f4c
  • statusBarItem.remoteBackground#0a2433ff
  • statusBarItem.remoteForeground#ffa53fff
  • tab.activeBackground#0e2837ff
  • tab.activeBorder#0e2837ff
  • tab.activeBorderTop#ffa53fff
  • tab.activeForeground#ffdcb3ff
  • tab.activeModifiedBorder#ffa53fff
  • tab.border#041621ff
  • tab.hoverBackground#ffa53f13
  • tab.hoverBorder#ffa53f99
  • tab.hoverForeground#ffa53fc0
  • tab.inactiveBackground#0a2433ff
  • tab.inactiveForeground#ffdcb373
  • tab.inactiveModifiedBorder#ffa53f99
  • tab.lastPinnedBorder#ffa53f4c
  • tab.unfocusedActiveBorder#0e2837ff
  • tab.unfocusedActiveBorderTop#ffa53f99
  • tab.unfocusedActiveForeground#ffdcb3c0
  • tab.unfocusedActiveModifiedBorder#ffa53f99
  • tab.unfocusedHoverForeground#ffa53f73
  • tab.unfocusedInactiveBackground#0a2433ff
  • tab.unfocusedInactiveForeground#ffdcb3c0
  • tab.unfocusedInactiveModifiedBorder#ffa53fc0
  • terminal.ansiBlack#3f3f3fff
  • terminal.ansiBlue#73bbbfff
  • terminal.ansiBrightBlack#4f4f4fff
  • terminal.ansiBrightBlue#73bbbfff
  • terminal.ansiBrightCyan#88e4e8ff
  • terminal.ansiBrightGreen#5b815bff
  • terminal.ansiBrightMagenta#e585c7ff
  • terminal.ansiBrightRed#e49f9fff
  • terminal.ansiBrightWhite#ffffffff
  • terminal.ansiBrightYellow#e3cf95ff
  • terminal.ansiCyan#88e4e8ff
  • terminal.ansiGreen#5b815bff
  • terminal.ansiMagenta#e585c7ff
  • terminal.ansiRed#e49f9fff
  • terminal.ansiWhite#dcdcc9ff
  • terminal.ansiYellow#e3cf95ff
  • terminal.background#061f2fff
  • terminal.border#041621ff
  • terminal.foreground#b89370ff
  • terminal.selectionBackground#ffa53f4c
  • terminalCursor.foreground#b89370ff
  • textBlockQuote.border#ffa53f99
  • textCodeBlock.background#ffa53f99
  • textLink.activeForeground#ffbf59ff
  • textLink.foreground#ff9d37ff
  • textSeparator.foreground#ffa53f99
  • titleBar.activeBackground#061a28ff
  • titleBar.activeForeground#ffa53fc0
  • titleBar.border#041621ff
  • titleBar.inactiveBackground#0e2230ff
  • titleBar.inactiveForeground#ffc07999
  • welcomePage.background#061f2fff
  • welcomePage.buttonBackground#0a2433ff
  • welcomePage.buttonHoverBackground#0e2837ff
  • welcomePage.progress.foreground#ffa53fff
  • window.activeBorder#ffa53f73
  • window.inactiveBorder#ffc07999

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment,comment.block.html#83aad4ff
punctuation.definition.comment, punctuation.whitespace.comment#697d90ff
string, string.unquoted#97a983ff
string.unquoted.heredoc#dcefdcff
keyword.other.phpdoc, storage.type.class.jsdoc, comment.block.documentantion.ts#ddcf00ff
punctuation.section.embedded#fa8598ff
source.ruby.embedded#d3d592ff
meta.preprocessor, punctuation.definition.preprocessor#f7c48fff
keyword.other.directive#e6e6e6ff
keyword.other.directive.line-number
support.constant.numeric, constant.numeric#ff965fff
constant, support.constant#6bb9b9ff
constant.character, constant.other#d3d592ff
variable.other.constant#e3b3b3ff
keyword, keyword.control, meta.selector.css, entity.other.attribute-name#88f8ffff
variable.other.readwrite.instance#ffdfaeff
entity.name.module, support.other.module#ff8000ff
keyword.operator#60d2c2ff
keyword.operator.symbol.infix.floating-point
source.ocaml, keyword.operator.symbol.prefix.floating-point
storage.type, storage.modifier, support.type#ffaa00ff
entity.name.class.variant#759ef0ff
entity.other#dededeff
entity.other.inherited-class#ee660cff
storage.type.user-defined, meta.property-list#d54224ff
entity.name.type, entity.name.type.class, entity.other.attribute-name.class.css, support.class, entity.name.class#ff740eff
invalid#e2ffceff
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#5dacacff
support.function.construct#e8c21bff
punctuation.definition.variable#e9a178ff
meta.function-name, entity.name.function#8ebfd2ff
support.function#ff8484ff
meta.brace#f9d062ff
punctuation.definition.string.begin, punctuation.definition.string.end#ffab2bff
entity.name.tag.yaml#ffdfaeff
punctuation.definition.entry#dededeff
keyword.other.DML.sql, keyword.other.data-integrity.sql#bfbfbfff
source.sql, constant.other.database-name.sql, constant.other.table-name.sql, keyword.operator.star#94d3ffff
source.diff, meta.diff.comment, meta.toc-list.comment.diff#ffffffff
meta.diff.header.from-file#d2d469ff
meta.diff.header.to-file#b47aedff
meta.diff.range.unified#9294e7ff
markup.inserted.diff#b079e6ff
markup.deleted.diff#d2d469ff
string.regexp#d6a036ff
string.regexp.arbitrary-repitition#a89c5dff
punctuation.definition.arbitrary-repitition#ffffffff
string.regexp.character-class#d6c77dff
punctuation.definition.character-class#ffffffff
markup.raw.inline.markdown#ffdfaeff
markup.heading.markdown, punctuation.definition.heading#ffffffff
markup.list#e6e6e6ff
sublimelinter.mark.warning#f92100ff
sublimelinter.gutter-mark#ffffffff
sublimelinter.mark.error#e8cd2bff
meta.doctype, meta.tag.sgml-declaration.doctype, meta.tag.sgml.doctype#ffe912ff
entity#a3a0ebff
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.tag.structure.any.html#ffc100ff
entity.other.attribute-name.html#a3a0ebff
entity.name.tag#e4b4b6ff
meta.tag#debb36ff
meta.tag.inline source, text.html.php.source#a2b32fff
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#a476b0ff
entity.other.attribute-name, meta.tag punctuation.definition.string#debb36ff
meta.tag string -source -punctuation, text source text meta.tag string -punctuation#6192c6ff
punctuation.section.embedded -(source string source punctuation.section.embedded), meta.brace.erb.html#debb36ff
meta.toc-list.id#a2b32fff
string.quoted.double.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html#a2b32fff
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end#6192c6ff
meta.selector.css entity.other.attribute-name.id#a476b0ff
support.type.property-name.css#6f706fff
hyperlink#586bb3ff
invisibles#ffffffff
level0#512851ff
level1#264f4fff
level10#484871ff
level2#512929ff
level3#274f27ff
level4#2a2a53ff
level5#6c6c43ff
level6#6f466fff
level7#446d6dff
level8#6f4747ff
level9#456e45ff
markup#dbdbdbff
match#ff9b5eff
meta#c6b5a5ff
none#7c856aff
property#8babc2ff
punctuation#ffd35dff
source#e4e4e4ff
storage#5f8840ff
support#a4fcabff
text#e4e4e4ff
variable#edd9bfff
wordhighlight#ff00a2ff
token.info-token#669efeff
token.warn-token#de9d22ff
token.error-token#ff4040ff
token.debug-token#c066ffff

Shiki preview

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

Loading...