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#090d11ff
  • activityBar.activeBorder#a0aebdff
  • activityBar.activeFocusBorder#a0aebdff
  • activityBar.background#090d11ff
  • activityBar.border#060a0eff
  • activityBar.foreground#6c8fb3ff
  • activityBar.inactiveForeground#6c8fb360
  • activityBarBadge.background#5d92c8c0
  • activityBarBadge.foreground#000000ff
  • badge.background#5d92c8c0
  • badge.foreground#000000ff
  • breadcrumb.activeSelectionForeground#6c8fb3a0
  • breadcrumb.background#151a1fff
  • breadcrumb.focusForeground#6c8fb3ff
  • breadcrumb.foreground#6c8fb3a0
  • button.background#11161bff
  • button.foreground#e2ddd8ff
  • button.hoverBackground#151a1fff
  • descriptionForeground#e2ddd8ff
  • dropdown.background#2b3035ff
  • dropdown.border#0b0f15ff
  • dropdown.foreground#adb2b7ff
  • dropdown.listBackground#2b3035ff
  • editor.background#0d1217ff
  • editor.findMatchBackground#f3ecc91e
  • editor.findMatchHighlightBackground#f3ecc93c
  • editor.findRangeHighlightBackground#9798dd23
  • editor.foreground#687481ff
  • editor.lineHighlightBackground#48546120
  • editor.selectionBackground#6c8fb340
  • editor.selectionHighlightBackground#6c8fb349
  • editor.selectionHighlightBorder#6c8fb340
  • editor.wordHighlightStrongBackground#6c8fb349
  • editor.wordHighlightStrongBorder#6c8fb3a0
  • editorBracketMatch.background#d8496d60
  • editorBracketMatch.border#d8496d60
  • editorError.foreground#d62947ff
  • editorGroup.border#060a0eff
  • editorGroupHeader.border#060a0eff
  • editorGroupHeader.noTabsBackground#11161bff
  • editorGroupHeader.tabsBackground#11161bff
  • editorGroupHeader.tabsBorder#6c8fb360
  • editorGutter.background#0d1217ff
  • editorGutter.modifiedBackground#6c8fb3ff
  • editorHoverWidget.border#283441ff
  • editorIndentGuide.activeBackground#6c8fb349
  • editorIndentGuide.background#151a1fff
  • editorLineNumber.activeForeground#a0aebdff
  • editorLineNumber.foreground#a0aebd55
  • editorOverviewRuler.errorForeground#d62947ff
  • editorOverviewRuler.findMatchForeground#6c8fb340
  • editorOverviewRuler.warningForeground#b5865678
  • editorOverviewRuler.wordHighlightForeground#6c8fb349
  • editorPane.background#0a0e13ff
  • editorSuggestWidget.background#0d1217ff
  • editorSuggestWidget.border#283441ff
  • editorSuggestWidget.selectedBackground#1d2227ff
  • editorUnnecessaryCode.border#0d121780
  • editorUnnecessaryCode.opacity#0d121780
  • editorWidget.background#11161bff
  • editorWidget.border#6c8fb3ff
  • editorWidget.foreground#6c8fb3ff
  • errorForeground#6c8fb3ff
  • focusBorder#283441ff
  • foreground#687481ff
  • gitDecoration.untrackedResourceForeground#95ad4eff
  • icon.foreground#6c8fb3ff
  • input.background#1d2227ff
  • input.border#0d1217ff
  • input.foreground#a0aebdff
  • input.placeholderForeground#808e9d55
  • inputOption.activeBackground#6487ab3c
  • inputOption.activeBorder#6487ab4b
  • list.activeSelectionBackground#6c8fb32a
  • list.activeSelectionForeground#e6bf8cff
  • list.dropBackground#2b3035ff
  • list.errorForeground#da5c80ff
  • list.focusBackground#6c8fb32a
  • list.focusForeground#6c8fb3a0
  • list.highlightForeground#6487ab80
  • list.hoverBackground#4c70932a
  • list.hoverForeground#6c8fb3a0
  • list.inactiveSelectionBackground#4c70932a
  • list.inactiveSelectionForeground#c2a176ff
  • list.invalidItemForeground#de96e5ff
  • list.warningForeground#e7b788ff
  • listFilterWidget.outline#060a0eff
  • menu.background#151a1ff0
  • menu.border#151a1ff0
  • menu.foreground#68748180
  • menu.selectionBackground#6c8fb320
  • menu.selectionBorder#6c8fb320
  • menu.selectionForeground#6c8fb3a0
  • menu.separatorBackground#6c8fb380
  • menubar.selectionBackground#6c8fb320
  • menubar.selectionBorder#6c8fb320
  • menubar.selectionForeground#68748180
  • minimap.background#0d1217ff
  • minimap.errorHighlight#d6294778
  • minimap.selectionHighlight#6c8fb340
  • minimap.warningHighlight#b5865678
  • notificationCenter.border#0d1217ff
  • notificationCenterHeader.background#151a1fff
  • notificationCenterHeader.foreground#687481ff
  • notificationLink.foreground#6487abff
  • notifications.background#151a1ff0
  • notifications.border#6c8fb3f0
  • notifications.foreground#687481ff
  • notificationsErrorIcon.foreground#d6294778
  • notificationsInfoIcon.foreground#6c8fb3ff
  • notificationsWarningIcon.foreground#b5865678
  • notificationToast.border#6c8fb3f0
  • panel.background#0b0f15ff
  • panel.border#68748120
  • panelTitle.activeBorder#6c8fb3a0
  • panelTitle.activeForeground#6c8fb3a0
  • panelTitle.inactiveForeground#6c8fb360
  • pickerGroup.foreground#e6bf8cff
  • progressBar.background#151a1fff
  • quickInput.foreground#687481ff
  • scrollbar.shadow#010308ff
  • scrollbarSlider.activeBackground#6c8fb380
  • scrollbarSlider.background#6c8fb340
  • scrollbarSlider.hoverBackground#6c8fb340
  • selection.background#6c8fb340
  • settings.checkboxBackground#1d2227ff
  • settings.checkboxBorder#0d1217ff
  • settings.dropdownBorder#0d1217ff
  • settings.dropdownListBorder#0d1217ff
  • settings.headerForeground#6c8fb3ff
  • settings.modifiedItemIndicator#6c8fb360
  • settings.numberInputBorder#0d1217ff
  • settings.textInputBorder#0d1217ff
  • sideBar.background#0d1217ff
  • sideBar.border#060a0eff
  • sideBar.dropBackground#6c8fb360
  • sideBar.foreground#687481ff
  • sideBarSectionHeader.background#0d1217ff
  • sideBarSectionHeader.border#68748120
  • sideBarSectionHeader.foreground#6c8fb3a0
  • sideBarTitle.foreground#6c8fb3a0
  • statusBar.background#11161bff
  • statusBar.border#68748120
  • statusBar.debuggingBackground#5d92c8c0
  • statusBar.debuggingForeground#000000a0
  • statusBar.foreground#6c8fb3a0
  • statusBar.noFolderBackground#6c8fb380
  • statusBar.noFolderForeground#f7f7f7ff
  • statusBarItem.activeBackground#6c8fb380
  • statusBarItem.hoverBackground#6c8fb340
  • statusBarItem.prominentBackground#6c8fb380
  • statusBarItem.prominentHoverBackground#6c8fb340
  • statusBarItem.remoteBackground#11161bff
  • statusBarItem.remoteForeground#6c8fb3ff
  • tab.activeBackground#151a1fff
  • tab.activeBorder#151a1fff
  • tab.activeBorderTop#6c8fb3ff
  • tab.activeForeground#a0aebdff
  • tab.activeModifiedBorder#6c8fb3ff
  • tab.border#060a0eff
  • tab.hoverBackground#6c8fb310
  • tab.hoverBorder#6c8fb380
  • tab.hoverForeground#6c8fb3a0
  • tab.inactiveBackground#11161bff
  • tab.inactiveForeground#a0aebd60
  • tab.inactiveModifiedBorder#6c8fb380
  • tab.lastPinnedBorder#6c8fb340
  • tab.unfocusedActiveBorder#151a1fff
  • tab.unfocusedActiveBorderTop#6c8fb3a0
  • tab.unfocusedActiveForeground#a0aebda0
  • tab.unfocusedActiveModifiedBorder#6c8fb3a0
  • tab.unfocusedHoverForeground#6c8fb360
  • tab.unfocusedInactiveBackground#11161bff
  • tab.unfocusedInactiveForeground#a0aebd40
  • tab.unfocusedInactiveModifiedBorder#6c8fb3a0
  • terminal.ansiBlack#373737ff
  • terminal.ansiBlue#81abaeff
  • terminal.ansiBrightBlack#474747ff
  • terminal.ansiBrightBlue#81abaeff
  • terminal.ansiBrightCyan#9cd2d4ff
  • terminal.ansiBrightGreen#5d735dff
  • terminal.ansiBrightMagenta#c68eb5ff
  • terminal.ansiBrightRed#c9a1a1ff
  • terminal.ansiBrightWhite#f7f7f7ff
  • terminal.ansiBrightYellow#d3c7a6ff
  • terminal.ansiCyan#9cd2d4ff
  • terminal.ansiGreen#5d735dff
  • terminal.ansiMagenta#c68eb5ff
  • terminal.ansiRed#c9a1a1ff
  • terminal.ansiWhite#d3d3c8ff
  • terminal.ansiYellow#d3c7a6ff
  • terminal.background#0d1217ff
  • terminal.border#060a0eff
  • terminal.foreground#687481ff
  • terminal.selectionBackground#6c8fb340
  • terminalCursor.foreground#687481ff
  • textBlockQuote.border#6c8fb380
  • textCodeBlock.background#6c8fb380
  • textLink.activeForeground#83a7cbff
  • textLink.foreground#6487abff
  • textSeparator.foreground#6c8fb380
  • titleBar.activeBackground#0a0e13ff
  • titleBar.activeForeground#6c8fb3a0
  • titleBar.border#060a0eff
  • titleBar.inactiveBackground#12161bff
  • titleBar.inactiveForeground#859eb880
  • welcomePage.background#0d1217ff
  • welcomePage.buttonBackground#11161bff
  • welcomePage.buttonHoverBackground#151a1fff
  • welcomePage.progress.foreground#6c8fb3ff
  • window.activeBorder#6c8fb360
  • window.inactiveBorder#859eb880

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#9dc09cc6
meta.preprocessor, punctuation.definition.preprocessor#f9d1abc6
keyword.other.phpdoc#6da065c6
punctuation.definition.comment, punctuation.whitespace.comment#b7e1b8c6
punctuation.section.embedded#9d9d9dc6
source.ruby.embedded#dcaaabc6
keyword.other.directive#f2f2f2c6
keyword.other.directive.line-number
string, string.unquoted#e59d9dc6
string.unquoted.heredoc#eaeaeac6
support.constant.numeric, constant.numeric#a1e8e7c6
constant, support.constant#eaeac6c6
constant.character, constant.other#dcaaabc6
variable.other.constant#eaeac6c6
keyword, keyword.control, meta.selector.css, entity.other.attribute-name#fdeac7c6
variable.other.readwrite.instance#fdeac7c6
entity.name.module, support.other.module#f79724c6
keyword.operator#ffffffc6
keyword.operator.symbol.infix.floating-point
source.ocaml, keyword.operator.symbol.prefix.floating-point
storage.type, storage.modifier, support.type#fefeb8c6
entity.name.class.variant#5993b0c6
entity.other#eaeaeac6
entity.other.inherited-class#e5a33cc6
storage.type.user-defined, meta.property-list#fdf329c6
entity.name.type, entity.name.type.class, entity.other.attribute-name.class.css, support.class, entity.name.class#f9b642c6
invalid#fde1fdc6
entity.other.attribute-name.html#eaebc7c6
entity.name.tag#eaebc7c6
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#9d9d9dc6
support.function.construct#fdeac7c6
punctuation.definition.variable#fdeac7c6
meta.function-name, entity.name.function#fefea4c6
support.function#d9cd3bc6
meta.brace#92e0dec6
punctuation.definition.string.begin, punctuation.definition.string.end#eaeaeac6
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.tag.structure.any.html#fde9c6c6
entity.name.tag.yaml#fdeac7c6
punctuation.definition.entry#eaeaeac6
keyword.other.DML.sql, keyword.other.data-integrity.sql#cbcbcbc6
source.sql, constant.other.database-name.sql, constant.other.table-name.sql, keyword.operator.star#add2fac6
source.diff, meta.diff.comment, meta.toc-list.comment.diff#ffffffc6
meta.diff.header.from-file#d88889c6
meta.diff.header.to-file#7ac4a0c6
meta.diff.range.unified#a5e2e5c6
markup.inserted.diff#7ac4a0c6
markup.deleted.diff#d88889c6
string.regexp#d5865cc6
string.regexp.arbitrary-repitition#ae8076c6
punctuation.definition.arbitrary-repitition#ffffffc6
string.regexp.character-class#dba498c6
punctuation.definition.character-class#ffffffc6
markup.raw.inline.markdown#fdeac7c6
markup.heading.markdown, punctuation.definition.heading#ffffffc6
markup.list#f2f2f2c6
sublimelinter.mark.warning#edcb26c6
sublimelinter.gutter-mark#ffffffc6
sublimelinter.mark.error#da3c1fc6
doctype#dce2e0c6
entity#dce2e0c6
hyperlink#6da2b1c6
invisibles#ffffffc6
level0#395839c6
level1#373756c6
level10#577676c6
level2#59593ac6
level3#573957c6
level4#3a5858c6
level5#755656c6
level6#577657c6
level7#555574c6
level8#777758c6
level9#755775c6
markup#e7e7e7c6
match#fce084c6
meta#cfc2b6c6
none#8f7b81c6
property#9daec6c6
punctuation#fce688c6
source#f0f0f0c6
storage#8e5876c6
support#fabcfbc6
text#f0f0f0c6
variable#cfbfb0c6
wordhighlight#92fb36c6

Shiki preview

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

Loading...