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#1f2021ff
  • activityBar.border#0b0c0dff
  • activityBar.foreground#8fbf5fff
  • activityBar.inactiveForeground#9dbf7b60
  • activityBarBadge.background#d8b4fcc0
  • activityBarBadge.foreground#000000
  • badge.background#d8b4fcc0
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#8fbf5fa0
  • breadcrumb.background#232425ff
  • breadcrumb.focusForeground#8FBF5F
  • breadcrumb.foreground#8fbf5fa0
  • button.background#1f2021ff
  • button.foreground#e4e3e2ff
  • button.hoverBackground#232425ff
  • descriptionForeground#e4e3e2ff
  • dropdown.background#393a3bff
  • dropdown.border#1B1C1D
  • dropdown.foreground#bbbcbdff
  • dropdown.listBackground#393a3bff
  • editor.background#1B1C1D
  • 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#0b0c0dff
  • editorGroupHeader.border#0b0c0dff
  • editorGroupHeader.noTabsBackground#1f2021ff
  • editorGroupHeader.tabsBackground#1f2021ff
  • editorGroupHeader.tabsBorder#9dbf7b60
  • editorGutter.background#1B1C1D
  • editorGutter.modifiedBackground#8FBF5F
  • editorHoverWidget.border#7ea05c60
  • editorIndentGuide.activeBackground#8fbf5f49
  • editorIndentGuide.background#232425ff
  • editorLineNumber.activeForeground#b7cf9fa0
  • editorLineNumber.foreground#a7bf8f40
  • editorOverviewRuler.errorForeground#ff0033
  • editorOverviewRuler.findMatchForeground#8fbf5f40
  • editorOverviewRuler.warningForeground#cc884478
  • editorOverviewRuler.wordHighlightForeground#8fbf5f49
  • editorPane.background#131415ff
  • editorSuggestWidget.background#1B1C1D
  • editorSuggestWidget.border#7ea05c60
  • editorSuggestWidget.selectedBackground#2b2c2dff
  • editorUnnecessaryCode.border#1b1c1d80
  • editorUnnecessaryCode.opacity#1b1c1d80
  • editorWidget.background#1f2021ff
  • editorWidget.border#8FBF5F
  • editorWidget.foreground#8fbf5fff
  • errorForeground#8FBF5F
  • focusBorder#7ea05c60
  • foreground#bee09c60
  • gitDecoration.untrackedResourceForeground#99bb33
  • icon.foreground#8fbf5fff
  • input.background#2b2c2dff
  • input.border#1B1C1D
  • input.foreground#b7cf9fa0
  • input.placeholderForeground#879f6f40
  • inputOption.activeBackground#87b7573c
  • inputOption.activeBorder#87b7574b
  • list.activeSelectionBackground#8fbf5f2a
  • list.activeSelectionForeground#f3c17cff
  • list.dropBackground#393a3bff
  • list.errorForeground#ff4b7eff
  • list.focusBackground#8fbf5f2a
  • list.focusForeground#c2e4a0f0
  • list.highlightForeground#87b75780
  • list.hoverBackground#6f9f3f2a
  • list.hoverForeground#c2e4a0f0
  • list.inactiveSelectionBackground#6f9f3f2a
  • list.inactiveSelectionForeground#cfa469ff
  • list.invalidItemForeground#f58fffff
  • list.warningForeground#feba76ff
  • listFilterWidget.outline#0b0c0dff
  • menu.background#1f2021f0
  • menu.border#1f2021f0
  • 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#1B1C1D
  • minimap.errorHighlight#ff003378
  • minimap.selectionHighlight#8fbf5f40
  • minimap.warningHighlight#cc884478
  • notificationCenter.border#1B1C1D
  • notificationCenterHeader.background#232425ff
  • notificationCenterHeader.foreground#bee09c60
  • notificationLink.foreground#87b757ff
  • notifications.background#232425f0
  • notifications.border#8fbf5ff0
  • notifications.foreground#bee09c60
  • notificationsErrorIcon.foreground#ff003378
  • notificationsInfoIcon.foreground#8fbf5fff
  • notificationsWarningIcon.foreground#cc884478
  • notificationToast.border#8fbf5ff0
  • panel.background#1B1C1D
  • panel.border#bee09c20
  • panelTitle.activeBorder#d7efbf40
  • panelTitle.activeForeground#d7efbf40
  • panelTitle.inactiveForeground#a7bf8f40
  • pickerGroup.foreground#f3c17cff
  • progressBar.background#232425ff
  • quickInput.foreground#bee09c60
  • scrollbar.shadow#0b0c0dff
  • scrollbarSlider.activeBackground#8fbf5f80
  • scrollbarSlider.background#8fbf5f40
  • scrollbarSlider.hoverBackground#8fbf5f40
  • selection.background#8fbf5f40
  • settings.checkboxBackground#2b2c2dff
  • settings.checkboxBorder#1B1C1D
  • settings.dropdownBorder#1B1C1D
  • settings.dropdownListBorder#1B1C1D
  • settings.headerForeground#8FBF5F
  • settings.modifiedItemIndicator#9dbf7b60
  • settings.numberInputBorder#1B1C1D
  • settings.textInputBorder#1B1C1D
  • sideBar.background#1B1C1D
  • sideBar.border#171819ff
  • sideBar.dropBackground#9dbf7b60
  • sideBar.foreground#bee09c60
  • sideBarSectionHeader.background#1f2021ff
  • sideBarSectionHeader.border#bee09c20
  • sideBarSectionHeader.foreground#abca8c60
  • sideBarTitle.foreground#9dbf7b60
  • statusBar.background#1f2021ff
  • 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#1f2021ff
  • statusBarItem.remoteForeground#8FBF5F
  • tab.activeBackground#232425ff
  • tab.activeBorder#232425ff
  • tab.activeBorderTop#8FBF5F
  • tab.activeForeground#ffffff
  • tab.activeModifiedBorder#8FBF5F
  • tab.border#0b0c0dff
  • tab.hoverBackground#8fbf5f10
  • tab.hoverBorder#d8b4fcc0
  • tab.hoverForeground#8fbf5fa0
  • tab.inactiveBackground#1f2021ff
  • tab.inactiveForeground#ffffff80
  • tab.inactiveModifiedBorder#d8b4fcff
  • tab.lastPinnedBorder#9dbf7b40
  • tab.unfocusedActiveBorder#232425ff
  • tab.unfocusedActiveBorderTop#8fbf5fa0
  • tab.unfocusedActiveForeground#ffffffa0
  • tab.unfocusedActiveModifiedBorder#8fbf5fa0
  • tab.unfocusedHoverForeground#8fbf5f60
  • tab.unfocusedInactiveBackground#1f2021ff
  • 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#1B1C1D
  • terminal.border#0b0c0dff
  • terminal.foreground#58654c
  • terminal.selectionBackground#8fbf5f40
  • terminalCursor.foreground#58654c
  • textBlockQuote.border#8fbf5f80
  • textCodeBlock.background#8fbf5f80
  • textLink.activeForeground#a7d777ff
  • textLink.foreground#87b757ff
  • textSeparator.foreground#8fbf5f80
  • titleBar.activeBackground#131415ff
  • titleBar.activeForeground#bee09cc0
  • titleBar.border#0b0c0dff
  • titleBar.inactiveBackground#1b1c1dff
  • titleBar.inactiveForeground#859d6d80
  • welcomePage.background#1B1C1D
  • welcomePage.buttonBackground#1f2021ff
  • welcomePage.buttonHoverBackground#232425ff
  • welcomePage.progress.foreground#8FBF5F
  • window.activeBorder#9dbf7b60
  • window.inactiveBorder#859d6d80

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment,comment.block.html#7794b4cc
punctuation.definition.comment, punctuation.whitespace.comment#5c6b79cc
string, string.unquoted#849276ff
string.unquoted.heredoc#c5d4c5ff
keyword.other.phpdoc, storage.type.class.jsdoc, comment.block.documentantion.ts#c0b514ff
punctuation.section.embedded#d47988ff
source.ruby.embedded#babc88ff
meta.preprocessor, punctuation.definition.preprocessor#d5af86ff
keyword.other.directive#ccccccff
keyword.other.directive.line-number
support.constant.numeric, constant.numeric#e4885eff
constant, support.constant#64a0a0ff
constant.character, constant.other#babc88ff
variable.other.constant#c5a0a0ff
keyword, keyword.control, meta.selector.css, entity.other.attribute-name#83d9e6ff
variable.other.readwrite.instance#eac7a1ff
entity.name.module, support.other.module#eb7600ff
keyword.operator#5eb5a9ff
keyword.operator.symbol.infix.floating-point
source.ocaml, keyword.operator.symbol.prefix.floating-point
storage.type, storage.modifier, support.type#eb9900ff
entity.name.class.variant#6b8ac9ff
entity.other#c5c5c5ff
entity.other.inherited-class#c65e19ff
storage.type.user-defined, meta.property-list#af3f28ff
entity.name.type, entity.name.type.class, entity.other.attribute-name.class.css, support.class, entity.name.class#e06c1dff
invalid#cbebbcff
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#579494ff
support.function.construct#c9ab2bff
punctuation.definition.variable#c79070ff
meta.function-name, entity.name.function#81a7b5ff
support.function#db7979ff
meta.brace#d8b964ff
punctuation.definition.string.begin, punctuation.definition.string.end#e49a37ff
entity.name.tag.yaml#eac7a1ff
punctuation.definition.entry#c5c5c5ff
keyword.other.DML.sql, keyword.other.data-integrity.sql#a8a8a8ff
source.sql, constant.other.database-name.sql, constant.other.table-name.sql, keyword.operator.star#89b9e0ff
source.diff, meta.diff.comment, meta.toc-list.comment.diff#ebebebff
meta.diff.header.from-file#b9ba68ff
meta.diff.header.to-file#9b6ec7ff
meta.diff.range.unified#8183c2ff
markup.inserted.diff#976dc0ff
markup.deleted.diff#b9ba68ff
string.regexp#b78e3cff
string.regexp.arbitrary-repitition#918857ff
punctuation.definition.arbitrary-repitition#ebebebff
string.regexp.character-class#bbb077ff
punctuation.definition.character-class#ebebebff
markup.raw.inline.markdown#eac7a1ff
markup.heading.markdown, punctuation.definition.heading#ebebebff
markup.list#ccccccff
sublimelinter.mark.warning#cb2600ff
sublimelinter.gutter-mark#ebebebff
sublimelinter.mark.error#c9b438ff
meta.doctype, meta.tag.sgml-declaration.doctype, meta.tag.sgml.doctype#ebce29ff
entity#908ec7ff
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.tag.structure.any.html#ebac00ff
entity.other.attribute-name.html#908ec7ff
entity.name.tag#c6a1a2ff
meta.tag#bfa53fff
meta.tag.inline source, text.html.php.source#8e9b35ff
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#8c6995ff
entity.other.attribute-name, meta.tag punctuation.definition.string#bfa53fff
meta.tag string -source -punctuation, text source text meta.tag string -punctuation#587ea6ff
punctuation.section.embedded -(source string source punctuation.section.embedded), meta.brace.erb.html#bfa53fff
meta.toc-list.id#8e9b35ff
string.quoted.double.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html#8e9b35ff
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end#587ea6ff
meta.selector.css entity.other.attribute-name.id#8c6995ff
support.type.property-name.css#5f605fff
hyperlink#4d5c93ff
invisibles#ebebebff
level0#3f203fff
level1#203f3fff
level10#3c3c5bff
level2#3f2020ff
level3#203f20ff
level4#20203fff
level5#5b5b3cff
level6#5b3c5bff
level7#3c5b5bff
level8#5b3c3cff
level9#3c5b3cff
markup#c2c2c2ff
match#eb8d5eff
meta#ada093ff
none#6c725eff
property#7c95a7ff
punctuation#ebbc62ff
source#cacacaff
storage#54733cff
support#98dc9dff
text#cacacaff
variable#d0c1adff
wordhighlight#eb108cff
token.info-token#5f8ad4ff
token.warn-token#bd8b2dff
token.error-token#e04141ff
token.debug-token#a45fd4ff

Shiki preview

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

Loading...