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#bee09c10
  • activityBar.activeBorder#afdf7fff
  • activityBar.activeFocusBorder#afdf7fff
  • activityBar.background#21201fff
  • activityBar.border#0d0c0bff
  • activityBar.foreground#8fbf5fff
  • activityBar.inactiveForeground#9dbf7b60
  • activityBarBadge.background#d8b4fcc0
  • activityBarBadge.foreground#000000
  • badge.background#d8b4fcc0
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#8fbf5fa0
  • breadcrumb.background#252423ff
  • breadcrumb.focusForeground#8FBF5F
  • breadcrumb.foreground#8fbf5fa0
  • button.background#21201fff
  • button.foreground#e2e3e4ff
  • button.hoverBackground#252423ff
  • descriptionForeground#e2e3e4ff
  • dropdown.background#3b3a39ff
  • dropdown.border#1D1C1B
  • dropdown.foreground#bdbcbbff
  • dropdown.listBackground#3b3a39ff
  • editor.background#1D1C1B
  • editor.findMatchBackground#ebbbff1e
  • editor.findMatchHighlightBackground#ebbbff3c
  • editor.findRangeHighlightBackground#93f39323
  • editor.foreground#bee09c60
  • editor.lineHighlightBackground#9ec07c20
  • editor.selectionBackground#8fbf5f40
  • editor.selectionHighlightBackground#8fbf5f49
  • editor.selectionHighlightBorder#8fbf5f40
  • editor.wordHighlightStrongBackground#8fbf5f49
  • editor.wordHighlightStrongBorder#8fbf5fa0
  • editorBracketMatch.background#ff336660
  • editorBracketMatch.border#ff336660
  • editorError.foreground#ff0033
  • editorGroup.border#0d0c0bff
  • editorGroupHeader.border#0d0c0bff
  • editorGroupHeader.noTabsBackground#21201fff
  • editorGroupHeader.tabsBackground#21201fff
  • editorGroupHeader.tabsBorder#9dbf7b60
  • editorGutter.background#1D1C1B
  • editorGutter.modifiedBackground#8FBF5F
  • editorHoverWidget.border#7ea05c60
  • editorIndentGuide.activeBackground#8fbf5f49
  • editorIndentGuide.background#252423ff
  • editorLineNumber.activeForeground#b7cf9fa0
  • editorLineNumber.foreground#a7bf8f40
  • editorOverviewRuler.errorForeground#ff0033
  • editorOverviewRuler.findMatchForeground#8fbf5f40
  • editorOverviewRuler.warningForeground#cc884478
  • editorOverviewRuler.wordHighlightForeground#8fbf5f49
  • editorPane.background#151413ff
  • editorSuggestWidget.background#1D1C1B
  • editorSuggestWidget.border#7ea05c60
  • editorSuggestWidget.selectedBackground#2d2c2bff
  • editorUnnecessaryCode.border#1d1c1b80
  • editorUnnecessaryCode.opacity#1d1c1b80
  • editorWidget.background#21201fff
  • editorWidget.border#8FBF5F
  • editorWidget.foreground#8fbf5fff
  • errorForeground#8FBF5F
  • focusBorder#7ea05c60
  • foreground#bee09c60
  • gitDecoration.untrackedResourceForeground#99bb33
  • icon.foreground#8fbf5fff
  • input.background#2d2c2bff
  • input.border#1D1C1B
  • input.foreground#b7cf9fa0
  • input.placeholderForeground#879f6f40
  • inputOption.activeBackground#87b7573c
  • inputOption.activeBorder#87b7574b
  • list.activeSelectionBackground#8fbf5f2a
  • list.activeSelectionForeground#f1c17dff
  • list.dropBackground#3b3a39ff
  • list.errorForeground#ff4b7eff
  • list.focusBackground#8fbf5f2a
  • list.focusForeground#c2e4a0f0
  • list.highlightForeground#87b75780
  • list.hoverBackground#6f9f3f2a
  • list.hoverForeground#c2e4a0f0
  • list.inactiveSelectionBackground#6f9f3f2a
  • list.inactiveSelectionForeground#cda46aff
  • list.invalidItemForeground#f58fffff
  • list.warningForeground#feba76ff
  • listFilterWidget.outline#0d0c0bff
  • menu.background#21201ff0
  • menu.border#21201ff0
  • menu.foreground#bee09c80
  • menu.selectionBackground#8fbf5f40
  • menu.selectionBorder#8fbf5f40
  • menu.selectionForeground#c2e4a0f0
  • menu.separatorBackground#8fbf5f80
  • menubar.selectionBackground#8fbf5f40
  • menubar.selectionBorder#8fbf5f40
  • menubar.selectionForeground#bee09c80
  • minimap.background#1D1C1B
  • minimap.errorHighlight#ff003378
  • minimap.selectionHighlight#8fbf5f40
  • minimap.warningHighlight#cc884478
  • notificationCenter.border#1D1C1B
  • notificationCenterHeader.background#252423ff
  • notificationCenterHeader.foreground#bee09c60
  • notificationLink.foreground#87b757ff
  • notifications.background#252423f0
  • notifications.border#8fbf5ff0
  • notifications.foreground#bee09c60
  • notificationsErrorIcon.foreground#ff003378
  • notificationsInfoIcon.foreground#8fbf5fff
  • notificationsWarningIcon.foreground#cc884478
  • notificationToast.border#8fbf5ff0
  • panel.background#1D1C1B
  • panel.border#bee09c20
  • panelTitle.activeBorder#d7efbf40
  • panelTitle.activeForeground#d7efbf40
  • panelTitle.inactiveForeground#a7bf8f40
  • pickerGroup.foreground#f1c17dff
  • progressBar.background#252423ff
  • quickInput.foreground#bee09c60
  • scrollbar.shadow#0d0c0bff
  • scrollbarSlider.activeBackground#8fbf5f80
  • scrollbarSlider.background#8fbf5f40
  • scrollbarSlider.hoverBackground#8fbf5f40
  • selection.background#8fbf5f40
  • settings.checkboxBackground#2d2c2bff
  • settings.checkboxBorder#1D1C1B
  • settings.dropdownBorder#1D1C1B
  • settings.dropdownListBorder#1D1C1B
  • settings.headerForeground#8FBF5F
  • settings.modifiedItemIndicator#9dbf7b60
  • settings.numberInputBorder#1D1C1B
  • settings.textInputBorder#1D1C1B
  • sideBar.background#1D1C1B
  • sideBar.border#191817ff
  • sideBar.dropBackground#9dbf7b60
  • sideBar.foreground#bee09c60
  • sideBarSectionHeader.background#21201fff
  • sideBarSectionHeader.border#bee09c20
  • sideBarSectionHeader.foreground#abca8c60
  • sideBarTitle.foreground#9dbf7b60
  • statusBar.background#21201fff
  • statusBar.border#bee09c20
  • statusBar.debuggingBackground#a7d777ff
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#bee09c60
  • statusBar.noFolderBackground#8fbf5f80
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#8fbf5f80
  • statusBarItem.hoverBackground#8fbf5f40
  • statusBarItem.prominentBackground#8fbf5f80
  • statusBarItem.prominentHoverBackground#8fbf5f40
  • statusBarItem.remoteBackground#21201fff
  • statusBarItem.remoteForeground#8FBF5F
  • tab.activeBackground#252423ff
  • tab.activeBorder#252423ff
  • tab.activeBorderTop#8FBF5F
  • tab.activeForeground#ffffff
  • tab.activeModifiedBorder#8FBF5F
  • tab.border#0d0c0bff
  • tab.hoverBackground#8fbf5f10
  • tab.hoverBorder#d8b4fcc0
  • tab.hoverForeground#8fbf5fa0
  • tab.inactiveBackground#21201fff
  • tab.inactiveForeground#ffffff80
  • tab.inactiveModifiedBorder#d8b4fcff
  • tab.lastPinnedBorder#9dbf7b40
  • tab.unfocusedActiveBorder#252423ff
  • tab.unfocusedActiveBorderTop#8fbf5fa0
  • tab.unfocusedActiveForeground#ffffffa0
  • tab.unfocusedActiveModifiedBorder#8fbf5fa0
  • tab.unfocusedHoverForeground#8fbf5f60
  • tab.unfocusedInactiveBackground#21201fff
  • tab.unfocusedInactiveForeground#ffffff40
  • tab.unfocusedInactiveModifiedBorder#d8b4fca0
  • 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#1D1C1B
  • terminal.border#0d0c0bff
  • terminal.foreground#59654b
  • terminal.selectionBackground#8fbf5f40
  • terminalCursor.foreground#59654b
  • textBlockQuote.border#8fbf5f80
  • textCodeBlock.background#8fbf5f80
  • textLink.activeForeground#a7d777ff
  • textLink.foreground#87b757ff
  • textSeparator.foreground#8fbf5f80
  • titleBar.activeBackground#151413ff
  • titleBar.activeForeground#bee09cc0
  • titleBar.border#0d0c0bff
  • titleBar.inactiveBackground#1d1c1bff
  • titleBar.inactiveForeground#859d6d80
  • welcomePage.background#1D1C1B
  • welcomePage.buttonBackground#21201fff
  • welcomePage.buttonHoverBackground#252423ff
  • welcomePage.progress.foreground#8FBF5F
  • window.activeBorder#9dbf7b60
  • window.inactiveBorder#859d6d80

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment,comment.block.html#819bb4cc
punctuation.definition.comment, punctuation.whitespace.comment#646f79cc
string, string.unquoted#909976ff
string.unquoted.heredoc#d6ddc5ff
keyword.other.phpdoc, storage.type.class.jsdoc, comment.block.documentantion.ts#d1bd14ff
punctuation.section.embedded#e67f88ff
source.ruby.embedded#cac488ff
meta.preprocessor, punctuation.definition.preprocessor#e8b686ff
keyword.other.directive#ded5ccff
keyword.other.directive.line-number
support.constant.numeric, constant.numeric#f88e5eff
constant, support.constant#6da7a0ff
constant.character, constant.other#cac488ff
variable.other.constant#d6a7a0ff
keyword, keyword.control, meta.selector.css, entity.other.attribute-name#8ee3e6ff
variable.other.readwrite.instance#fecfa1ff
entity.name.module, support.other.module#ff7b00ff
keyword.operator#66bda9ff
keyword.operator.symbol.infix.floating-point
source.ocaml, keyword.operator.symbol.prefix.floating-point
storage.type, storage.modifier, support.type#ff9f00ff
entity.name.class.variant#7490c9ff
entity.other#d6cdc5ff
entity.other.inherited-class#d76219ff
storage.type.user-defined, meta.property-list#be4128ff
entity.name.type, entity.name.type.class, entity.other.attribute-name.class.css, support.class, entity.name.class#f4701dff
invalid#ddf5bcff
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#5f9b94ff
support.function.construct#dab32bff
punctuation.definition.variable#d89670ff
meta.function-name, entity.name.function#8caeb5ff
support.function#ee7f79ff
meta.brace#ebc164ff
punctuation.definition.string.begin, punctuation.definition.string.end#f8a037ff
entity.name.tag.yaml#fecfa1ff
punctuation.definition.entry#d6cdc5ff
keyword.other.DML.sql, keyword.other.data-integrity.sql#b7b0a8ff
source.sql, constant.other.database-name.sql, constant.other.table-name.sql, keyword.operator.star#95c1e0ff
source.diff, meta.diff.comment, meta.toc-list.comment.diff#fff5ebff
meta.diff.header.from-file#c9c268ff
meta.diff.header.to-file#a873c7ff
meta.diff.range.unified#8c88c2ff
markup.inserted.diff#a471c0ff
markup.deleted.diff#c9c268ff
string.regexp#c7943cff
string.regexp.arbitrary-repitition#9e8e57ff
punctuation.definition.arbitrary-repitition#fff5ebff
string.regexp.character-class#cbb777ff
punctuation.definition.character-class#fff5ebff
markup.raw.inline.markdown#fecfa1ff
markup.heading.markdown, punctuation.definition.heading#fff5ebff
markup.list#ded5ccff
sublimelinter.mark.warning#dd2700ff
sublimelinter.gutter-mark#fff5ebff
sublimelinter.mark.error#dbbc38ff
meta.doctype, meta.tag.sgml-declaration.doctype, meta.tag.sgml.doctype#ffd729ff
entity#9c94c7ff
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.tag.structure.any.html#ffb400ff
entity.other.attribute-name.html#9c94c7ff
entity.name.tag#d7a8a2ff
meta.tag#d0ac3fff
meta.tag.inline source, text.html.php.source#9aa135ff
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#986d95ff
entity.other.attribute-name, meta.tag punctuation.definition.string#d0ac3fff
meta.tag string -source -punctuation, text source text meta.tag string -punctuation#6084a6ff
punctuation.section.embedded -(source string source punctuation.section.embedded), meta.brace.erb.html#d0ac3fff
meta.toc-list.id#9aa135ff
string.quoted.double.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html#9aa135ff
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end#6084a6ff
meta.selector.css entity.other.attribute-name.id#986d95ff
support.type.property-name.css#67645fff
hyperlink#546093ff
invisibles#fff5ebff
level0#45223fff
level1#23423fff
level10#413e5bff
level2#452220ff
level3#234220ff
level4#23223fff
level5#635f3cff
level6#633e5bff
level7#415f5bff
level8#633e3cff
level9#415f3cff
markup#d3cbc2ff
match#ff935eff
meta#bca793ff
none#75775eff
property#879ca7ff
punctuation#ffc462ff
source#dcd3caff
storage#5b783cff
support#a5e59dff
text#dcd3caff
variable#e2caadff
wordhighlight#ff108cff
token.info-token#6790d4ff
token.warn-token#cd912dff
token.error-token#f44441ff
token.debug-token#b263d4ff

Shiki preview

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

Loading...