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#92ffff10
  • activityBar.activeBorder#55fbffff
  • activityBar.activeFocusBorder#55fbffff
  • activityBar.background#141719ff
  • activityBar.border#121416ff
  • activityBar.foreground#35dbffff
  • activityBar.inactiveForeground#71e5ff60
  • activityBarBadge.background#208399c0
  • activityBarBadge.foreground#ffffff
  • badge.background#208399c0
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#35dbffa0
  • breadcrumb.background#212527ff
  • breadcrumb.focusForeground#35dbffff
  • breadcrumb.foreground#35dbffa0
  • 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#ff94911e
  • editor.findMatchHighlightBackground#ff94913c
  • editor.findRangeHighlightBackground#69b4ff23
  • editor.foreground#92ffff60
  • editor.lineHighlightBackground#72dfdf20
  • editor.selectionBackground#35dbff40
  • editor.selectionHighlightBackground#35ddff49
  • editor.selectionHighlightBorder#35dbff40
  • editor.wordHighlightStrongBackground#35ddff49
  • editor.wordHighlightStrongBorder#35dbffa0
  • editorBracketMatch.background#ff336660
  • editorBracketMatch.border#ff336660
  • editorError.foreground#ff0033
  • editorGroup.border#121416ff
  • editorGroupHeader.border#121416ff
  • editorGroupHeader.noTabsBackground#1d2123ff
  • editorGroupHeader.tabsBackground#1d2123ff
  • editorGroupHeader.tabsBorder#71e5ff60
  • editorGutter.background#191d1f
  • editorGutter.modifiedBackground#35dbffff
  • editorHoverWidget.border#52bfbf60
  • editorIndentGuide.activeBackground#35dbff49
  • editorIndentGuide.background#212527ff
  • editorLineNumber.activeForeground#abfcffa0
  • editorLineNumber.foreground#9becff40
  • editorOverviewRuler.errorForeground#ff0033
  • editorOverviewRuler.findMatchForeground#35dbff40
  • editorOverviewRuler.warningForeground#cc884478
  • editorOverviewRuler.wordHighlightForeground#35ddff49
  • editorPane.background#15191aff
  • editorSuggestWidget.background#191d1f
  • editorSuggestWidget.border#52bfbf60
  • editorSuggestWidget.selectedBackground#292d2fff
  • editorUnnecessaryCode.border#191d1f80
  • editorUnnecessaryCode.opacity#191d1f80
  • editorWidget.background#1d2123ff
  • editorWidget.border#35dbffff
  • editorWidget.foreground#35dbffff
  • errorForeground#35dbffff
  • focusBorder#52bfbf60
  • foreground#92ffff60
  • gitDecoration.untrackedResourceForeground#99bb33
  • icon.foreground#35dbffff
  • input.background#292d2fff
  • input.border#191d1f
  • input.foreground#abfcffa0
  • input.placeholderForeground#7bccdf40
  • inputOption.activeBackground#2dd3f73c
  • inputOption.activeBorder#2dd3f74b
  • list.activeSelectionBackground#35dbff2a
  • list.activeSelectionForeground#f5c07bff
  • list.dropBackground#373b3dff
  • list.errorForeground#ff4b7eff
  • list.focusBackground#35dbff2a
  • list.focusForeground#96fffff0
  • list.highlightForeground#2dd3f780
  • list.hoverBackground#15bbdf2a
  • list.hoverForeground#96fffff0
  • list.inactiveSelectionBackground#15bbdf2a
  • list.inactiveSelectionForeground#d0a369ff
  • list.invalidItemForeground#f58fffff
  • list.warningForeground#feba76ff
  • listFilterWidget.outline#121416ff
  • menu.background#1d2123f0
  • menu.border#1d2123f0
  • menu.foreground#92ffff80
  • menu.selectionBackground#35dbff40
  • menu.selectionBorder#35dbff40
  • menu.selectionForeground#96fffff0
  • menu.separatorBackground#35dbff80
  • menubar.selectionBackground#35dbff40
  • menubar.selectionBorder#35dbff40
  • menubar.selectionForeground#92ffff80
  • minimap.background#191d1f
  • minimap.errorHighlight#ff003378
  • minimap.selectionHighlight#35dbff40
  • minimap.warningHighlight#cc884478
  • notificationCenter.border#191d1f
  • notificationCenterHeader.background#212527ff
  • notificationCenterHeader.foreground#92ffff60
  • notificationLink.foreground#2dd3f7ff
  • notifications.background#212527f0
  • notifications.border#35dbfff0
  • notifications.foreground#92ffff60
  • notificationsErrorIcon.foreground#ff003378
  • notificationsInfoIcon.foreground#35dbffff
  • notificationsWarningIcon.foreground#cc884478
  • notificationToast.border#35dbfff0
  • panel.background#171a1cff
  • panel.border#92ffff20
  • panelTitle.activeBorder#cbffff40
  • panelTitle.activeForeground#cbffff40
  • panelTitle.inactiveForeground#9becff40
  • pickerGroup.foreground#f5c07bff
  • progressBar.background#212527ff
  • quickInput.foreground#92ffff60
  • scrollbar.shadow#090d0fff
  • scrollbarSlider.activeBackground#35dbff80
  • scrollbarSlider.background#35dbff40
  • scrollbarSlider.hoverBackground#35dbff40
  • selection.background#35dbff40
  • settings.checkboxBackground#292d2fff
  • settings.checkboxBorder#191d1f
  • settings.dropdownBorder#191d1f
  • settings.dropdownListBorder#191d1f
  • settings.headerForeground#35dbffff
  • settings.modifiedItemIndicator#71e5ff60
  • settings.numberInputBorder#191d1f
  • settings.textInputBorder#191d1f
  • sideBar.background#191d1f
  • sideBar.border#121416ff
  • sideBar.dropBackground#71e5ff60
  • sideBar.foreground#92ffff60
  • sideBarSectionHeader.background#191d1f
  • sideBarSectionHeader.border#92ffff20
  • sideBarSectionHeader.foreground#83e6e660
  • sideBarTitle.foreground#71e5ff60
  • statusBar.background#1d2123ff
  • statusBar.border#92ffff20
  • statusBar.debuggingBackground#4df3ffff
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#92ffff60
  • statusBar.noFolderBackground#35dbff80
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#35dbff80
  • statusBarItem.hoverBackground#35dbff40
  • statusBarItem.prominentBackground#35dbff80
  • statusBarItem.prominentHoverBackground#35dbff40
  • statusBarItem.remoteBackground#1d2123ff
  • statusBarItem.remoteForeground#35dbffff
  • tab.activeBackground#212527ff
  • tab.activeBorder#212527ff
  • tab.activeBorderTop#35dbffff
  • tab.activeForeground#ffffff
  • tab.activeModifiedBorder#35dbffff
  • tab.border#121416ff
  • tab.hoverBackground#35dbff10
  • tab.hoverBorder#208399c0
  • tab.hoverForeground#35dbffa0
  • tab.inactiveBackground#191d1f
  • tab.inactiveForeground#ffffff80
  • tab.inactiveModifiedBorder#208399ff
  • tab.lastPinnedBorder#71e5ff40
  • tab.unfocusedActiveBorder#212527ff
  • tab.unfocusedActiveBorderTop#35dbffa0
  • tab.unfocusedActiveForeground#ffffffa0
  • tab.unfocusedActiveModifiedBorder#35dbffa0
  • tab.unfocusedHoverForeground#35dbff60
  • tab.unfocusedInactiveBackground#191d1f
  • tab.unfocusedInactiveForeground#ffffff40
  • tab.unfocusedInactiveModifiedBorder#208399a0
  • 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#467273
  • terminal.selectionBackground#35dbff40
  • terminalCursor.foreground#467273
  • textBlockQuote.border#35dbff80
  • textCodeBlock.background#35dbff80
  • textLink.activeForeground#4df3ffff
  • textLink.foreground#2dd3f7ff
  • textSeparator.foreground#35dbff80
  • titleBar.activeBackground#15191aff
  • titleBar.activeForeground#55fbff60
  • titleBar.border#121416ff
  • titleBar.inactiveBackground#1d2122ff
  • titleBar.inactiveForeground#66b3b380
  • welcomePage.background#191d1f
  • welcomePage.buttonBackground#1d2123ff
  • welcomePage.buttonHoverBackground#212527ff
  • welcomePage.progress.foreground#35dbffff
  • window.activeBorder#71e5ff60
  • window.inactiveBorder#66b3b380

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment,comment.block.html#87b3e2cc
punctuation.definition.comment, punctuation.whitespace.comment#6f859bcc
string, string.unquoted#9db288ff
string.unquoted.heredoc#e3f8e3ff
keyword.other.phpdoc, storage.type.class.jsdoc, comment.block.documentantion.ts#e8d800ff
punctuation.section.embedded#ff879dff
source.ruby.embedded#dbde93ff
meta.preprocessor, punctuation.definition.preprocessor#ffcb8fff
keyword.other.directive#eeeeeeff
keyword.other.directive.line-number
support.constant.numeric, constant.numeric#ff9a5cff
constant, support.constant#6cc4c4ff
constant.character, constant.other#dbde93ff
variable.other.constant#f0babaff
keyword, keyword.control, meta.selector.css, entity.other.attribute-name#85ffffff
variable.other.readwrite.instance#ffe7b0ff
entity.name.module, support.other.module#ff8400ff
keyword.operator#5ddeccff
keyword.operator.symbol.infix.floating-point
source.ocaml, keyword.operator.symbol.prefix.floating-point
storage.type, storage.modifier, support.type#ffb100ff
entity.name.class.variant#78a6ffff
entity.other#e6e6e6ff
entity.other.inherited-class#ff6903ff
storage.type.user-defined, meta.property-list#e84322ff
entity.name.type, entity.name.type.class, entity.other.attribute-name.class.css, support.class, entity.name.class#ff7704ff
invalid#eaffd3ff
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#5eb7b7ff
support.function.construct#f5ca0eff
punctuation.definition.variable#f7a678ff
meta.function-name, entity.name.function#91c8deff
support.function#ff8787ff
meta.brace#ffd85cff
punctuation.definition.string.begin, punctuation.definition.string.end#ffb121ff
entity.name.tag.yaml#ffe7b0ff
punctuation.definition.entry#e6e6e6ff
keyword.other.DML.sql, keyword.other.data-integrity.sql#c7c7c7ff
source.sql, constant.other.database-name.sql, constant.other.table-name.sql, keyword.operator.star#96dcffff
source.diff, meta.diff.comment, meta.toc-list.comment.diff#ffffffff
meta.diff.header.from-file#dcdd65ff
meta.diff.header.to-file#bf7effff
meta.diff.range.unified#989bf8ff
markup.inserted.diff#bb7cf7ff
markup.deleted.diff#dcdd65ff
string.regexp#e4a72fff
string.regexp.arbitrary-repitition#b2a55dff
punctuation.definition.arbitrary-repitition#ffffffff
string.regexp.character-class#e0d07cff
punctuation.definition.character-class#ffffffff
markup.raw.inline.markdown#ffe7b0ff
markup.heading.markdown, punctuation.definition.heading#ffffffff
markup.list#eeeeeeff
sublimelinter.mark.warning#ff1d00ff
sublimelinter.gutter-mark#ffffffff
sublimelinter.mark.error#f4d51fff
meta.doctype, meta.tag.sgml-declaration.doctype, meta.tag.sgml.doctype#fff301ff
entity#aaa7fbff
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.tag.structure.any.html#ffc900ff
entity.other.attribute-name.html#aaa7fbff
entity.name.tag#f0babcff
meta.tag#eac32dff
meta.tag.inline source, text.html.php.source#aabd28ff
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#af7cbcff
entity.other.attribute-name, meta.tag punctuation.definition.string#eac32dff
meta.tag string -source -punctuation, text source text meta.tag string -punctuation#639bd5ff
punctuation.section.embedded -(source string source punctuation.section.embedded), meta.brace.erb.html#eac32dff
meta.toc-list.id#aabd28ff
string.quoted.double.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html#aabd28ff
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end#639bd5ff
meta.selector.css entity.other.attribute-name.id#af7cbcff
support.type.property-name.css#777877ff
hyperlink#5d73c4ff
invisibles#ffffffff
level0#5b2d5bff
level1#2a5858ff
level10#4f4f7dff
level2#5d2f2fff
level3#2b592bff
level4#31315fff
level5#747446ff
level6#794c79ff
level7#487676ff
level8#7b4d4dff
level9#4a774aff
markup#e3e3e3ff
match#ffa05bff
meta#d0bdaaff
none#848e70ff
property#8fb4cdff
punctuation#ffdb57ff
source#ecececff
storage#649241ff
support#a5ffadff
text#ecececff
variable#f7e1c3ff
wordhighlight#ff00adff
token.info-token#67a6ffff
token.warn-token#eca31aff
token.error-token#ff3e3eff
token.debug-token#cd68ffff

Shiki preview

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

Loading...