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#251e13ff
  • activityBar.activeBorder#95854dff
  • activityBar.activeFocusBorder#95854dff
  • activityBar.background#251e13ff
  • activityBar.border#110b06ff
  • activityBar.foreground#978133ff
  • activityBar.inactiveForeground#97813373
  • activityBarBadge.background#9b8221e6
  • activityBarBadge.foreground#fff2a7c0
  • badge.background#9b8221e6
  • badge.foreground#fff2a7c0
  • breadcrumb.activeSelectionForeground#978133c0
  • breadcrumb.background#292216ff
  • breadcrumb.focusForeground#978133ff
  • breadcrumb.foreground#978133c0
  • button.background#251e13ff
  • button.foreground#e6da95ff
  • button.hoverBackground#292216ff
  • descriptionForeground#e6da95ff
  • dropdown.background#3f3725ff
  • dropdown.border#211b10ff
  • dropdown.foreground#c5b378ff
  • dropdown.listBackground#3f3725ff
  • editor.background#211b10ff
  • editor.findMatchBackground#c4c0a824
  • editor.findMatchHighlightBackground#c4c0a848
  • editor.findRangeHighlightBackground#b8bd562a
  • editor.foreground#685c32ff
  • editor.lineHighlightBackground#483e1e26
  • editor.selectionBackground#9781334c
  • editor.selectionHighlightBackground#97803357
  • editor.selectionHighlightBorder#9781334c
  • editor.wordHighlightStrongBackground#97803357
  • editor.wordHighlightStrongBorder#978133c0
  • editorBracketMatch.background#ff002c73
  • editorBracketMatch.border#ff002c73
  • editorError.foreground#ff0000ff
  • editorGroup.border#110b06ff
  • editorGroupHeader.border#110b06ff
  • editorGroupHeader.noTabsBackground#251e13ff
  • editorGroupHeader.tabsBackground#251e13ff
  • editorGroupHeader.tabsBorder#97813373
  • editorGutter.background#211b10ff
  • editorGutter.modifiedBackground#978133ff
  • editorHoverWidget.border#261f08ff
  • editorIndentGuide.activeBackground#97813357
  • editorIndentGuide.background#292216ff
  • editorLineNumber.activeForeground#95854dff
  • editorLineNumber.foreground#95854d66
  • editorOverviewRuler.errorForeground#ff0000ff
  • editorOverviewRuler.findMatchForeground#9781334c
  • editorOverviewRuler.warningForeground#e6760190
  • editorOverviewRuler.wordHighlightForeground#97803357
  • editorPane.background#19130cff
  • editorSuggestWidget.background#211b10ff
  • editorSuggestWidget.border#261f08ff
  • editorSuggestWidget.selectedBackground#312a1aff
  • editorUnnecessaryCode.border#211b1099
  • editorUnnecessaryCode.opacity#211b1099
  • editorWidget.background#251e13ff
  • editorWidget.border#978133ff
  • editorWidget.foreground#978133ff
  • errorForeground#978133ff
  • focusBorder#261f08ff
  • foreground#685c32ff
  • gitDecoration.untrackedResourceForeground#95ba00ff
  • icon.foreground#978133ff
  • input.background#312a1aff
  • input.border#211b10ff
  • input.foreground#95854dff
  • input.placeholderForeground#73673766
  • inputOption.activeBackground#8d7a2d48
  • inputOption.activeBorder#8d7a2d5a
  • list.activeSelectionBackground#97813332
  • list.activeSelectionForeground#ffb12cff
  • list.dropBackground#3f3725ff
  • list.errorForeground#ff1f43ff
  • list.focusBackground#97813332
  • list.focusForeground#d7be5dc0
  • list.highlightForeground#8d7a2d99
  • list.hoverBackground#75631f32
  • list.hoverForeground#d7be5dc0
  • list.inactiveSelectionBackground#75631f32
  • list.inactiveSelectionForeground#dd9725ff
  • list.invalidItemForeground#ff72c3ff
  • list.warningForeground#ffa824ff
  • listFilterWidget.outline#110b06ff
  • menu.background#2d2619ff
  • menu.border#2d2619ff
  • menu.foreground#93813dc0
  • menu.selectionBackground#97813326
  • menu.selectionBorder#97813326
  • menu.selectionForeground#d7be5dc0
  • menu.separatorBackground#97813399
  • menubar.selectionBackground#97813326
  • menubar.selectionBorder#97813326
  • menubar.selectionForeground#93813dc0
  • minimap.background#211b10ff
  • minimap.errorHighlight#ff000090
  • minimap.selectionHighlight#9781334c
  • minimap.warningHighlight#e6760190
  • notificationCenter.border#211b10ff
  • notificationCenterHeader.background#292216ff
  • notificationCenterHeader.foreground#685c32ff
  • notificationLink.foreground#8d7a2dff
  • notifications.background#292216ff
  • notifications.border#978133ff
  • notifications.foreground#685c32ff
  • notificationsErrorIcon.foreground#ff000090
  • notificationsInfoIcon.foreground#978133ff
  • notificationsWarningIcon.foreground#e6760190
  • notificationToast.border#978133ff
  • panel.background#211b10ff
  • panel.border#685c3226
  • panelTitle.activeBorder#d7be5dc0
  • panelTitle.activeForeground#d7be5dc0
  • panelTitle.inactiveForeground#97813373
  • pickerGroup.foreground#ffb12cff
  • progressBar.background#292216ff
  • quickInput.foreground#685c32ff
  • scrollbar.shadow#110b06ff
  • scrollbarSlider.activeBackground#97813399
  • scrollbarSlider.background#9781334c
  • scrollbarSlider.hoverBackground#9781334c
  • selection.background#9781334c
  • settings.checkboxBackground#312a1aff
  • settings.checkboxBorder#211b10ff
  • settings.dropdownBorder#211b10ff
  • settings.dropdownListBorder#211b10ff
  • settings.headerForeground#978133ff
  • settings.modifiedItemIndicator#97813373
  • settings.numberInputBorder#211b10ff
  • settings.textInputBorder#211b10ff
  • sideBar.background#211b10ff
  • sideBar.border#1d170dff
  • sideBar.dropBackground#97813373
  • sideBar.foreground#685c32ff
  • sideBarSectionHeader.background#251e13ff
  • sideBarSectionHeader.border#685c3226
  • sideBarSectionHeader.foreground#978133c0
  • sideBarTitle.foreground#978133c0
  • statusBar.background#251e13ff
  • statusBar.border#685c3226
  • statusBar.debuggingBackground#9b8221e6
  • statusBar.debuggingForeground#fff2a7c0
  • statusBar.foreground#d7be5dc0
  • statusBar.noFolderBackground#97813399
  • statusBar.noFolderForeground#fff2a7ff
  • statusBarItem.activeBackground#97813399
  • statusBarItem.hoverBackground#9781334c
  • statusBarItem.prominentBackground#97813399
  • statusBarItem.prominentHoverBackground#9781334c
  • statusBarItem.remoteBackground#251e13ff
  • statusBarItem.remoteForeground#978133ff
  • tab.activeBackground#292216ff
  • tab.activeBorder#292216ff
  • tab.activeBorderTop#978133ff
  • tab.activeForeground#95854dff
  • tab.activeModifiedBorder#978133ff
  • tab.border#110b06ff
  • tab.hoverBackground#97813313
  • tab.hoverBorder#97813399
  • tab.hoverForeground#978133c0
  • tab.inactiveBackground#251e13ff
  • tab.inactiveForeground#95854d73
  • tab.inactiveModifiedBorder#97813399
  • tab.lastPinnedBorder#9781334c
  • tab.unfocusedActiveBorder#292216ff
  • tab.unfocusedActiveBorderTop#97813399
  • tab.unfocusedActiveForeground#95854dc0
  • tab.unfocusedActiveModifiedBorder#97813399
  • tab.unfocusedHoverForeground#97813373
  • tab.unfocusedInactiveBackground#251e13ff
  • tab.unfocusedInactiveForeground#95854dc0
  • tab.unfocusedInactiveModifiedBorder#978133c0
  • terminal.ansiBlack#413c29ff
  • terminal.ansiBlue#6cb784ff
  • terminal.ansiBrightBlack#514b33ff
  • terminal.ansiBrightBlue#6cb784ff
  • terminal.ansiBrightCyan#7de0a0ff
  • terminal.ansiBrightGreen#587f34ff
  • terminal.ansiBrightMagenta#f77588ff
  • terminal.ansiBrightRed#f39160ff
  • terminal.ansiBrightWhite#fff2a7ff
  • terminal.ansiBrightYellow#ecc54fff
  • terminal.ansiCyan#7de0a0ff
  • terminal.ansiGreen#587f34ff
  • terminal.ansiMagenta#f77588ff
  • terminal.ansiRed#f39160ff
  • terminal.ansiWhite#e2d37fff
  • terminal.ansiYellow#ecc54fff
  • terminal.background#211b10ff
  • terminal.border#110b06ff
  • terminal.foreground#685c32ff
  • terminal.selectionBackground#9781334c
  • terminalCursor.foreground#685c32ff
  • textBlockQuote.border#97813399
  • textCodeBlock.background#97813399
  • textLink.activeForeground#af9843ff
  • textLink.foreground#8d7a2dff
  • textSeparator.foreground#97813399
  • titleBar.activeBackground#19130cff
  • titleBar.activeForeground#d7be5dc0
  • titleBar.border#110b06ff
  • titleBar.inactiveBackground#211b10ff
  • titleBar.inactiveForeground#95834099
  • welcomePage.background#211b10ff
  • welcomePage.buttonBackground#251e13ff
  • welcomePage.buttonHoverBackground#292216ff
  • welcomePage.progress.foreground#978133ff
  • window.activeBorder#97813373
  • window.inactiveBorder#95834099

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#84a85bff
meta.preprocessor, punctuation.definition.preprocessor#f0b15eff
keyword.other.phpdoc#508b2fff
punctuation.definition.comment, punctuation.whitespace.comment#9cc96dff
punctuation.section.embedded#8b8262ff
source.ruby.embedded#d58966ff
keyword.other.directive#e0d39eff
keyword.other.directive.line-number
string, string.unquoted#e2795aff
string.unquoted.heredoc#d8cb99ff
support.constant.numeric, constant.numeric#7ed09cff
constant, support.constant#d9cc75ff
constant.character, constant.other#d58966ff
variable.other.constant#d9cc75ff
keyword, keyword.control, meta.selector.css, entity.other.attribute-name#ffc973ff
variable.other.readwrite.instance#ffc973ff
entity.name.module, support.other.module#ff7100ff
keyword.operator#efe0a8ff
keyword.operator.symbol.infix.floating-point
source.ocaml, keyword.operator.symbol.prefix.floating-point
storage.type, storage.modifier, support.type#ffef5fff
entity.name.class.variant#377d7aff
entity.other#d8cb99ff
entity.other.inherited-class#e38200ff
storage.type.user-defined, meta.property-list#ffd500ff
entity.name.type, entity.name.type.class, entity.other.attribute-name.class.css, support.class, entity.name.class#ff9300ff
invalid#ffbeacff
entity.other.attribute-name.html#d9cd75ff
entity.name.tag#d9cd75ff
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#8b8262ff
support.function.construct#ffc973ff
punctuation.definition.variable#ffc973ff
meta.function-name, entity.name.function#fff14bff
support.function#ccb200ff
meta.brace#6ec995ff
punctuation.definition.string.begin, punctuation.definition.string.end#d8cb99ff
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.tag.structure.any.html#ffc873ff
entity.name.tag.yaml#ffc973ff
punctuation.definition.entry#d8cb99ff
keyword.other.DML.sql, keyword.other.data-integrity.sql#b9ae82ff
source.sql, constant.other.database-name.sql, constant.other.table-name.sql, keyword.operator.star#90b7b8ff
source.diff, meta.diff.comment, meta.toc-list.comment.diff#fff2b5ff
meta.diff.header.from-file#d6644bff
meta.diff.header.to-file#56af60ff
meta.diff.range.unified#84ca9aff
markup.inserted.diff#56af60ff
markup.deleted.diff#d6644bff
string.regexp#d46320ff
string.regexp.arbitrary-repitition#a6623eff
punctuation.definition.arbitrary-repitition#fff2b5ff
string.regexp.character-class#d58355ff
punctuation.definition.character-class#fff2b5ff
markup.raw.inline.markdown#ffc973ff
markup.heading.markdown, punctuation.definition.heading#fff2b5ff
markup.list#e0d39eff
sublimelinter.mark.warning#e5ad00ff
sublimelinter.gutter-mark#fff2b5ff
sublimelinter.mark.error#e20d00ff
doctype#c9c591ff
entity#c9c591ff
hyperlink#4d8b78ff
invisibles#fff2b5ff
level0#1f4414ff
level1#232037ff
level10#3d6048ff
level2#464212ff
level3#491e35ff
level4#1f4433ff
level5#683c2cff
level6#3e602aff
level7#413e4cff
level8#645e28ff
level9#683b4aff
markup#d5c896ff
match#ffc033ff
meta#c0a46eff
none#80604eff
property#869387ff
punctuation#ffc636ff
source#ded19cff
storage#853947ff
support#f497b2ff
text#ded19cff
variable#c0a16aff
wordhighlight#67fb00ff

Shiki preview

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

Loading...