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#82dfff10
  • activityBar.activeBorder#43c8ffff
  • activityBar.activeFocusBorder#43c8ffff
  • activityBar.background#202020ff
  • activityBar.border#0c0c0cff
  • activityBar.foreground#23a8f2ff
  • activityBar.inactiveForeground#61bef260
  • activityBarBadge.background#ffd49cc0
  • activityBarBadge.foreground#000000
  • badge.background#ffd49cc0
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#23a8f2a0
  • breadcrumb.background#242424ff
  • breadcrumb.focusForeground#23A8F2
  • breadcrumb.foreground#23a8f2a0
  • button.background#202020ff
  • button.foreground#e3e3e3ff
  • button.hoverBackground#242424ff
  • descriptionForeground#e3e3e3ff
  • dropdown.background#3a3a3aff
  • dropdown.border#1C1C1C
  • dropdown.foreground#bcbcbcff
  • dropdown.listBackground#3a3a3aff
  • editor.background#1C1C1C
  • editor.findMatchBackground#ffb47f1e
  • editor.findMatchHighlightBackground#ffb47f3c
  • editor.findRangeHighlightBackground#5789ff23
  • editor.foreground#82dfff60
  • editor.lineHighlightBackground#62bfdf20
  • editor.selectionBackground#23a8f240
  • editor.selectionHighlightBackground#23aaf249
  • editor.selectionHighlightBorder#23a8f240
  • editor.wordHighlightStrongBackground#23aaf249
  • editor.wordHighlightStrongBorder#23a8f2a0
  • editorBracketMatch.background#ff336660
  • editorBracketMatch.border#ff336660
  • editorError.foreground#ff0033
  • editorGroup.border#0c0c0cff
  • editorGroupHeader.border#0c0c0cff
  • editorGroupHeader.noTabsBackground#202020ff
  • editorGroupHeader.tabsBackground#202020ff
  • editorGroupHeader.tabsBorder#61bef260
  • editorGutter.background#1C1C1C
  • editorGutter.modifiedBackground#23A8F2
  • editorHoverWidget.border#429fbf60
  • editorIndentGuide.activeBackground#23a8f249
  • editorIndentGuide.background#242424ff
  • editorLineNumber.activeForeground#9cddffa0
  • editorLineNumber.foreground#8ccdf240
  • editorOverviewRuler.errorForeground#ff0033
  • editorOverviewRuler.findMatchForeground#23a8f240
  • editorOverviewRuler.warningForeground#cc884478
  • editorOverviewRuler.wordHighlightForeground#23aaf249
  • editorPane.background#141414ff
  • editorSuggestWidget.background#1C1C1C
  • editorSuggestWidget.border#429fbf60
  • editorSuggestWidget.selectedBackground#2c2c2cff
  • editorUnnecessaryCode.border#1c1c1c80
  • editorUnnecessaryCode.opacity#1c1c1c80
  • editorWidget.background#202020ff
  • editorWidget.border#23A8F2
  • editorWidget.foreground#23a8f2ff
  • errorForeground#23A8F2
  • focusBorder#429fbf60
  • foreground#82dfff60
  • gitDecoration.untrackedResourceForeground#99bb33
  • icon.foreground#23a8f2ff
  • input.background#2c2c2cff
  • input.border#1C1C1C
  • input.foreground#9cddffa0
  • input.placeholderForeground#6cadd240
  • inputOption.activeBackground#1ba0ea3c
  • inputOption.activeBorder#1ba0ea4b
  • list.activeSelectionBackground#23a8f22a
  • list.activeSelectionForeground#f2c17dff
  • list.dropBackground#3a3a3aff
  • list.errorForeground#ff4b7eff
  • list.focusBackground#23a8f22a
  • list.focusForeground#86e3fff0
  • list.highlightForeground#1ba0ea80
  • list.hoverBackground#0388d22a
  • list.hoverForeground#86e3fff0
  • list.inactiveSelectionBackground#0388d22a
  • list.inactiveSelectionForeground#cea46aff
  • list.invalidItemForeground#f58fffff
  • list.warningForeground#feba76ff
  • listFilterWidget.outline#0c0c0cff
  • menu.background#202020f0
  • menu.border#202020f0
  • menu.foreground#82dfff80
  • menu.selectionBackground#23a8f240
  • menu.selectionBorder#23a8f240
  • menu.selectionForeground#86e3fff0
  • menu.separatorBackground#23a8f280
  • menubar.selectionBackground#23a8f240
  • menubar.selectionBorder#23a8f240
  • menubar.selectionForeground#82dfff80
  • minimap.background#1C1C1C
  • minimap.errorHighlight#ff003378
  • minimap.selectionHighlight#23a8f240
  • minimap.warningHighlight#cc884478
  • notificationCenter.border#1C1C1C
  • notificationCenterHeader.background#242424ff
  • notificationCenterHeader.foreground#82dfff60
  • notificationLink.foreground#1ba0eaff
  • notifications.background#242424f0
  • notifications.border#23a8f2f0
  • notifications.foreground#82dfff60
  • notificationsErrorIcon.foreground#ff003378
  • notificationsInfoIcon.foreground#23a8f2ff
  • notificationsWarningIcon.foreground#cc884478
  • notificationToast.border#23a8f2f0
  • panel.background#1C1C1C
  • panel.border#82dfff20
  • panelTitle.activeBorder#bcfdff40
  • panelTitle.activeForeground#bcfdff40
  • panelTitle.inactiveForeground#8ccdf240
  • pickerGroup.foreground#f2c17dff
  • progressBar.background#242424ff
  • quickInput.foreground#82dfff60
  • scrollbar.shadow#0c0c0cff
  • scrollbarSlider.activeBackground#23a8f280
  • scrollbarSlider.background#23a8f240
  • scrollbarSlider.hoverBackground#23a8f240
  • selection.background#23a8f240
  • settings.checkboxBackground#2c2c2cff
  • settings.checkboxBorder#1C1C1C
  • settings.dropdownBorder#1C1C1C
  • settings.dropdownListBorder#1C1C1C
  • settings.headerForeground#23A8F2
  • settings.modifiedItemIndicator#61bef260
  • settings.numberInputBorder#1C1C1C
  • settings.textInputBorder#1C1C1C
  • sideBar.background#1C1C1C
  • sideBar.border#181818ff
  • sideBar.dropBackground#61bef260
  • sideBar.foreground#82dfff60
  • sideBarSectionHeader.background#202020ff
  • sideBarSectionHeader.border#82dfff20
  • sideBarSectionHeader.foreground#75c9e660
  • sideBarTitle.foreground#61bef260
  • statusBar.background#202020ff
  • statusBar.border#82dfff20
  • statusBar.debuggingBackground#3bc0ffff
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#82dfff60
  • statusBar.noFolderBackground#23a8f280
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#23a8f280
  • statusBarItem.hoverBackground#23a8f240
  • statusBarItem.prominentBackground#23a8f280
  • statusBarItem.prominentHoverBackground#23a8f240
  • statusBarItem.remoteBackground#202020ff
  • statusBarItem.remoteForeground#23A8F2
  • tab.activeBackground#242424ff
  • tab.activeBorder#242424ff
  • tab.activeBorderTop#23A8F2
  • tab.activeForeground#ffffff
  • tab.activeModifiedBorder#23A8F2
  • tab.border#0c0c0cff
  • tab.hoverBackground#23a8f210
  • tab.hoverBorder#ffd49cc0
  • tab.hoverForeground#23a8f2a0
  • tab.inactiveBackground#202020ff
  • tab.inactiveForeground#ffffff80
  • tab.inactiveModifiedBorder#ffd49cff
  • tab.lastPinnedBorder#61bef240
  • tab.unfocusedActiveBorder#242424ff
  • tab.unfocusedActiveBorderTop#23a8f2a0
  • tab.unfocusedActiveForeground#ffffffa0
  • tab.unfocusedActiveModifiedBorder#23a8f2a0
  • tab.unfocusedHoverForeground#23a8f260
  • tab.unfocusedInactiveBackground#202020ff
  • tab.unfocusedInactiveForeground#ffffff40
  • tab.unfocusedInactiveModifiedBorder#ffd49ca0
  • 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#1C1C1C
  • terminal.border#0c0c0cff
  • terminal.foreground#426571
  • terminal.selectionBackground#23a8f240
  • terminalCursor.foreground#426571
  • textBlockQuote.border#23a8f280
  • textCodeBlock.background#23a8f280
  • textLink.activeForeground#3bc0ffff
  • textLink.foreground#1ba0eaff
  • textSeparator.foreground#23a8f280
  • titleBar.activeBackground#141414ff
  • titleBar.activeForeground#82dfffc0
  • titleBar.border#0c0c0cff
  • titleBar.inactiveBackground#1c1c1cff
  • titleBar.inactiveForeground#5b9cb380
  • welcomePage.background#1C1C1C
  • welcomePage.buttonBackground#202020ff
  • welcomePage.buttonHoverBackground#242424ff
  • welcomePage.progress.foreground#23A8F2
  • window.activeBorder#61bef260
  • window.inactiveBorder#5b9cb380

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment,comment.block.html#81a1c4cc
punctuation.definition.comment, punctuation.whitespace.comment#647484cc
string, string.unquoted#909f80ff
string.unquoted.heredoc#d6e6d6ff
keyword.other.phpdoc, storage.type.class.jsdoc, comment.block.documentantion.ts#d1c516ff
punctuation.section.embedded#e68494ff
source.ruby.embedded#cacc94ff
meta.preprocessor, punctuation.definition.preprocessor#e8be92ff
keyword.other.directive#dededeff
keyword.other.directive.line-number
support.constant.numeric, constant.numeric#f89466ff
constant, support.constant#6daeaeff
constant.character, constant.other#cacc94ff
variable.other.constant#d6aeaeff
keyword, keyword.control, meta.selector.css, entity.other.attribute-name#8eecfaff
variable.other.readwrite.instance#fed8afff
entity.name.module, support.other.module#ff8000ff
keyword.operator#66c5b8ff
keyword.operator.symbol.infix.floating-point
source.ocaml, keyword.operator.symbol.prefix.floating-point
storage.type, storage.modifier, support.type#ffa600ff
entity.name.class.variant#7496daff
entity.other#d6d6d6ff
entity.other.inherited-class#d7661bff
storage.type.user-defined, meta.property-list#be442bff
entity.name.type, entity.name.type.class, entity.other.attribute-name.class.css, support.class, entity.name.class#f47520ff
invalid#ddffccff
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#5fa1a1ff
support.function.construct#daba2fff
punctuation.definition.variable#d89c7aff
meta.function-name, entity.name.function#8cb5c5ff
support.function#ee8484ff
meta.brace#ebc96dff
punctuation.definition.string.begin, punctuation.definition.string.end#f8a73cff
entity.name.tag.yaml#fed8afff
punctuation.definition.entry#d6d6d6ff
keyword.other.DML.sql, keyword.other.data-integrity.sql#b7b7b7ff
source.sql, constant.other.database-name.sql, constant.other.table-name.sql, keyword.operator.star#95c9f3ff
source.diff, meta.diff.comment, meta.toc-list.comment.diff#ffffffff
meta.diff.header.from-file#c9ca71ff
meta.diff.header.to-file#a878d8ff
meta.diff.range.unified#8c8ed3ff
markup.inserted.diff#a476d1ff
markup.deleted.diff#c9ca71ff
string.regexp#c79a41ff
string.regexp.arbitrary-repitition#9e945fff
punctuation.definition.arbitrary-repitition#ffffffff
string.regexp.character-class#cbbf81ff
punctuation.definition.character-class#ffffffff
markup.raw.inline.markdown#fed8afff
markup.heading.markdown, punctuation.definition.heading#ffffffff
markup.list#dededeff
sublimelinter.mark.warning#dd2900ff
sublimelinter.gutter-mark#ffffffff
sublimelinter.mark.error#dbc43dff
meta.doctype, meta.tag.sgml-declaration.doctype, meta.tag.sgml.doctype#ffe02dff
entity#9c9ad8ff
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.tag.structure.any.html#ffbb00ff
entity.other.attribute-name.html#9c9ad8ff
entity.name.tag#d7afb0ff
meta.tag#d0b344ff
meta.tag.inline source, text.html.php.source#9aa83aff
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#9872a2ff
entity.other.attribute-name, meta.tag punctuation.definition.string#d0b344ff
meta.tag string -source -punctuation, text source text meta.tag string -punctuation#6089b4ff
punctuation.section.embedded -(source string source punctuation.section.embedded), meta.brace.erb.html#d0b344ff
meta.toc-list.id#9aa83aff
string.quoted.double.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html#9aa83aff
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end#6089b4ff
meta.selector.css entity.other.attribute-name.id#9872a2ff
support.type.property-name.css#676867ff
hyperlink#5464a0ff
invisibles#ffffffff
level0#452345ff
level1#234545ff
level10#414163ff
level2#452323ff
level3#234523ff
level4#232345ff
level5#636341ff
level6#634163ff
level7#416363ff
level8#634141ff
level9#416341ff
markup#d3d3d3ff
match#ff9966ff
meta#bcaea0ff
none#757c66ff
property#87a2b5ff
punctuation#ffcc6aff
source#dcdcdcff
storage#5b7d41ff
support#a5efabff
text#dcdcdcff
variable#e2d2bcff
wordhighlight#ff1198ff
token.info-token#6796e6ff
token.warn-token#cd9731ff
token.error-token#f44747ff
token.debug-token#b267e6ff

Shiki preview

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

Loading...