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#908c7bff
  • activityBar.activeFocusBorder#908c7bff
  • activityBar.background#051925ff
  • activityBar.border#041621ff
  • activityBar.foreground#91885fff
  • activityBar.inactiveForeground#91885f73
  • activityBarBadge.background#95894ce6
  • activityBarBadge.foreground#ffffffc0
  • badge.background#95894ce6
  • badge.foreground#ffffffc0
  • breadcrumb.activeSelectionForeground#91885fc0
  • breadcrumb.background#0e2837ff
  • breadcrumb.focusForeground#91885fff
  • breadcrumb.foreground#91885fc0
  • 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#c0caf124
  • editor.findMatchHighlightBackground#c0caf148
  • editor.findRangeHighlightBackground#b5c5932a
  • editor.foreground#656153ff
  • editor.lineHighlightBackground#45413326
  • editor.selectionBackground#91885f4c
  • editor.selectionHighlightBackground#91876057
  • editor.selectionHighlightBorder#91885f4c
  • editor.wordHighlightStrongBackground#91876057
  • editor.wordHighlightStrongBorder#91885fc0
  • editorBracketMatch.background#ff1f5d73
  • editorBracketMatch.border#ff1f5d73
  • editorError.foreground#ff0021ff
  • editorGroup.border#041621ff
  • editorGroupHeader.border#041621ff
  • editorGroupHeader.noTabsBackground#0a2433ff
  • editorGroupHeader.tabsBackground#0a2433ff
  • editorGroupHeader.tabsBorder#91885f73
  • editorGutter.background#061f2fff
  • editorGutter.modifiedBackground#91885fff
  • editorHoverWidget.border#252113ff
  • editorIndentGuide.activeBackground#91885f57
  • editorIndentGuide.background#0e2837ff
  • editorLineNumber.activeForeground#908c7bff
  • editorLineNumber.foreground#908c7b66
  • editorOverviewRuler.errorForeground#ff0021ff
  • editorOverviewRuler.findMatchForeground#91885f4c
  • editorOverviewRuler.warningForeground#d6843390
  • editorOverviewRuler.wordHighlightForeground#91876057
  • editorPane.background#061a28ff
  • editorSuggestWidget.background#061f2fff
  • editorSuggestWidget.border#252113ff
  • editorSuggestWidget.selectedBackground#16303fff
  • editorUnnecessaryCode.border#061f2f99
  • editorUnnecessaryCode.opacity#061f2f99
  • editorWidget.background#0a2433ff
  • editorWidget.border#91885fff
  • editorWidget.foreground#91885fff
  • errorForeground#91885fff
  • focusBorder#252113ff
  • foreground#656153ff
  • gitDecoration.untrackedResourceForeground#96bf1cff
  • icon.foreground#91885fff
  • input.background#16303fff
  • input.border#061f2fff
  • input.foreground#908c7bff
  • input.placeholderForeground#706c5b66
  • inputOption.activeBackground#89805748
  • inputOption.activeBorder#8980575a
  • list.activeSelectionBackground#91885f32
  • list.activeSelectionForeground#ffbb62ff
  • list.dropBackground#253e4dff
  • list.errorForeground#ff3b78ff
  • list.focusBackground#91885f32
  • list.focusForeground#d1c89fc0
  • list.highlightForeground#89805799
  • list.hoverBackground#71683f32
  • list.hoverForeground#d1c89fc0
  • list.inactiveSelectionBackground#71683f32
  • list.inactiveSelectionForeground#e19f54ff
  • list.invalidItemForeground#ff85ffff
  • list.warningForeground#ffb765ff
  • listFilterWidget.outline#041621ff
  • menu.background#122c3bff
  • menu.border#122c3bff
  • menu.foreground#8e8869c0
  • menu.selectionBackground#91885f26
  • menu.selectionBorder#91885f26
  • menu.selectionForeground#d1c89fc0
  • menu.separatorBackground#91885f99
  • menubar.selectionBackground#91885f26
  • menubar.selectionBorder#91885f26
  • menubar.selectionForeground#8e8869c0
  • minimap.background#061f2fff
  • minimap.errorHighlight#ff002190
  • minimap.selectionHighlight#91885f4c
  • minimap.warningHighlight#d6843390
  • notificationCenter.border#061f2fff
  • notificationCenterHeader.background#0e2837ff
  • notificationCenterHeader.foreground#656153ff
  • notificationLink.foreground#898057ff
  • notifications.background#0e2837ff
  • notifications.border#91885fff
  • notifications.foreground#656153ff
  • notificationsErrorIcon.foreground#ff002190
  • notificationsInfoIcon.foreground#91885fff
  • notificationsWarningIcon.foreground#d6843390
  • notificationToast.border#91885fff
  • panel.background#061c2bff
  • panel.border#65615326
  • panelTitle.activeBorder#d1c89fc0
  • panelTitle.activeForeground#d1c89fc0
  • panelTitle.inactiveForeground#91885f73
  • pickerGroup.foreground#ffbb62ff
  • progressBar.background#0e2837ff
  • quickInput.foreground#656153ff
  • scrollbar.shadow#000f1fff
  • scrollbarSlider.activeBackground#91885f99
  • scrollbarSlider.background#91885f4c
  • scrollbarSlider.hoverBackground#91885f4c
  • selection.background#91885f4c
  • settings.checkboxBackground#16303fff
  • settings.checkboxBorder#061f2fff
  • settings.dropdownBorder#061f2fff
  • settings.dropdownListBorder#061f2fff
  • settings.headerForeground#91885fff
  • settings.modifiedItemIndicator#91885f73
  • settings.numberInputBorder#061f2fff
  • settings.textInputBorder#061f2fff
  • sideBar.background#061f2fff
  • sideBar.border#041621ff
  • sideBar.dropBackground#91885f73
  • sideBar.foreground#656153ff
  • sideBarSectionHeader.background#061f2fff
  • sideBarSectionHeader.border#65615326
  • sideBarSectionHeader.foreground#91885fc0
  • sideBarTitle.foreground#91885fc0
  • statusBar.background#0a2433ff
  • statusBar.border#65615326
  • statusBar.debuggingBackground#95894ce6
  • statusBar.debuggingForeground#ffffffc0
  • statusBar.foreground#d1c89fc0
  • statusBar.noFolderBackground#91885f99
  • statusBar.noFolderForeground#ffffffff
  • statusBarItem.activeBackground#91885f99
  • statusBarItem.hoverBackground#91885f4c
  • statusBarItem.prominentBackground#91885f99
  • statusBarItem.prominentHoverBackground#91885f4c
  • statusBarItem.remoteBackground#0a2433ff
  • statusBarItem.remoteForeground#91885fff
  • tab.activeBackground#0e2837ff
  • tab.activeBorder#0e2837ff
  • tab.activeBorderTop#91885fff
  • tab.activeForeground#908c7bff
  • tab.activeModifiedBorder#91885fff
  • tab.border#041621ff
  • tab.hoverBackground#91885f13
  • tab.hoverBorder#91885f99
  • tab.hoverForeground#91885fc0
  • tab.inactiveBackground#0a2433ff
  • tab.inactiveForeground#908c7b73
  • tab.inactiveModifiedBorder#91885f99
  • tab.lastPinnedBorder#91885f4c
  • tab.unfocusedActiveBorder#0e2837ff
  • tab.unfocusedActiveBorderTop#91885f99
  • tab.unfocusedActiveForeground#908c7bc0
  • tab.unfocusedActiveModifiedBorder#91885f99
  • tab.unfocusedHoverForeground#91885f73
  • tab.unfocusedInactiveBackground#0a2433ff
  • tab.unfocusedInactiveForeground#908c7bc0
  • tab.unfocusedInactiveModifiedBorder#91885fc0
  • 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#656153ff
  • terminal.selectionBackground#91885f4c
  • terminalCursor.foreground#656153ff
  • textBlockQuote.border#91885f99
  • textCodeBlock.background#91885f99
  • textLink.activeForeground#a9a077ff
  • textLink.foreground#898057ff
  • textSeparator.foreground#91885f99
  • titleBar.activeBackground#061a28ff
  • titleBar.activeForeground#d1c89fc0
  • titleBar.border#041621ff
  • titleBar.inactiveBackground#0e2230ff
  • titleBar.inactiveForeground#908a6d99
  • welcomePage.background#061f2fff
  • welcomePage.buttonBackground#0a2433ff
  • welcomePage.buttonHoverBackground#0e2837ff
  • welcomePage.progress.foreground#91885fff
  • window.activeBorder#91885f73
  • window.inactiveBorder#908a6d99

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#8ab989ff
meta.preprocessor, punctuation.definition.preprocessor#f7c290ff
keyword.other.phpdoc#579a4cff
punctuation.definition.comment, punctuation.whitespace.comment#a2dba3ff
punctuation.section.embedded#919191ff
source.ruby.embedded#db9899ff
keyword.other.directive#e6e6e6ff
keyword.other.directive.line-number
string, string.unquoted#e88888ff
string.unquoted.heredoc#dededeff
support.constant.numeric, constant.numeric#83e2e1ff
constant, support.constant#dfdfafff
constant.character, constant.other#db9899ff
variable.other.constant#dfdfafff
keyword, keyword.control, meta.selector.css, entity.other.attribute-name#ffddaeff
variable.other.readwrite.instance#ffddaeff
entity.name.module, support.other.module#ff8000ff
keyword.operator#f4f4f4ff
keyword.operator.symbol.infix.floating-point
source.ocaml, keyword.operator.symbol.prefix.floating-point
storage.type, storage.modifier, support.type#ffff95ff
entity.name.class.variant#3d8ab1ff
entity.other#dededeff
entity.other.inherited-class#ea9109ff
storage.type.user-defined, meta.property-list#ffe900ff
entity.name.type, entity.name.type.class, entity.other.attribute-name.class.css, support.class, entity.name.class#ffa40aff
invalid#ffd0f9ff
entity.other.attribute-name.html#dfe0b0ff
entity.name.tag#dfe0b0ff
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#919191ff
support.function.construct#ffddaeff
punctuation.definition.variable#ffddaeff
meta.function-name, entity.name.function#ffff7bff
support.function#d3c301ff
meta.brace#73dad8ff
punctuation.definition.string.begin, punctuation.definition.string.end#dededeff
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.tag.structure.any.html#ffdcadff
entity.name.tag.yaml#ffddaeff
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#96c8ffff
source.diff, meta.diff.comment, meta.toc-list.comment.diff#ffffffff
meta.diff.header.from-file#dd7374ff
meta.diff.header.to-file#5cc08fff
meta.diff.range.unified#8adbdfff
markup.inserted.diff#5cc08fff
markup.deleted.diff#dd7374ff
string.regexp#db713aff
string.regexp.arbitrary-repitition#ad6f61ff
punctuation.definition.arbitrary-repitition#ffffffff
string.regexp.character-class#db9283ff
punctuation.definition.character-class#ffffffff
markup.raw.inline.markdown#ffddaeff
markup.heading.markdown, punctuation.definition.heading#ffffffff
markup.list#e6e6e6ff
sublimelinter.mark.warning#ecbf00ff
sublimelinter.gutter-mark#ffffffff
sublimelinter.mark.error#eb1800ff
doctype#cfd6d4ff
entity#cfd6d4ff
hyperlink#539aaeff
invisibles#ffffffff
level0#274f27ff
level1#2a2a53ff
level10#446d6dff
level2#4e4e25ff
level3#512851ff
level4#264f4fff
level5#6f4747ff
level6#456e45ff
level7#484871ff
level8#6c6c43ff
level9#6f466fff
markup#dbdbdbff
match#ffd359ff
meta#c6b5a5ff
none#876c75ff
property#8ca2c3ff
punctuation#ffd95dff
source#e4e4e4ff
storage#8c446dff
support#f9a7ffff
text#e4e4e4ff
variable#c7b29eff
wordhighlight#6fff00ff

Shiki preview

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

Loading...