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.background#141414ff
  • activityBar.border#0c0c0cff
  • activityBar.foreground#708498ff
  • activityBar.inactiveForeground#70849855
  • activityBarBadge.background#e90909c4
  • activityBarBadge.foreground#dcdcdcff
  • badge.background#e90909c4
  • badge.foreground#dcdcdcff
  • breadcrumb.background#304050
  • breadcrumb.border#86f9ffff
  • breadcrumb.foreground#9c9c9cff
  • button.background#304050
  • button.foreground#e3e3e3ff
  • button.hoverBackground#405060ff
  • descriptionForeground#e3e3e3ff
  • dropdown.background#242424ff
  • dropdown.border#1C1C1C
  • dropdown.foreground#bcbcbcff
  • dropdown.listBackground#242424ff
  • editor.background#1C1C1C
  • editor.foreground#a3a3a3ff
  • editor.lineHighlightBackground#66d9ef20
  • editor.selectionBackground#66d9ef40
  • editor.selectionHighlightBackground#66d9ef60
  • editor.wordHighlightStrongBackground#66d9ef80
  • editorGroup.border#0c0c0cff
  • editorGroupHeader.noTabsBackground#141414ff
  • editorGroupHeader.tabsBackground#141414ff
  • editorGutter.background#1C1C1C
  • editorGutter.modifiedBackground#66d9ef
  • editorHoverWidget.border#7e7662ff
  • editorIndentGuide.activeBackground#748392ff
  • editorIndentGuide.background#242424ff
  • editorLineNumber.activeForeground#beb6a2ff
  • editorLineNumber.foreground#8e8672ff
  • editorPane.background#141414ff
  • editorSuggestWidget.background#1C1C1C
  • editorSuggestWidget.border#7e7662ff
  • editorSuggestWidget.selectedBackground#2c2c2cff
  • editorUnnecessaryCode.opacity#1c1c1c80
  • editorWidget.border#70849855
  • errorForeground#66d9ef
  • focusBorder#7e7662ff
  • foreground#a3a3a3ff
  • input.background#2c2c2cff
  • input.border#1C1C1C
  • input.foreground#beb6a2ff
  • input.placeholderForeground#6e6652ff
  • inputOption.activeBorder#708498ff
  • list.activeSelectionBackground#66d9ef2b
  • list.activeSelectionForeground#ffc17dff
  • list.dropBackground#242424ff
  • list.focusBackground#ffc17d2b
  • list.focusForeground#e3e3e3ff
  • list.highlightForeground#66d9ef80
  • list.hoverBackground#46b9cf2b
  • list.hoverForeground#e3e3e3ff
  • list.inactiveSelectionBackground#46b9cf2b
  • list.inactiveSelectionForeground#d9a46aff
  • listFilterWidget.outline#0c0c0cff
  • menu.background#141414ff
  • menu.foreground#9c9c9cff
  • menu.selectionBackground#46b9cf2b
  • menu.selectionForeground#e3e3e3ff
  • menu.separatorBackground#5c5c5cff
  • menubar.selectionBackground#66d9ef40
  • menubar.selectionBorder#141414ff
  • notifications.background#304050
  • panel.background#1C1C1C
  • panel.border#3c3c3cff
  • panelTitle.activeBorder#beb6a2ff
  • panelTitle.activeForeground#beb6a2ff
  • panelTitle.inactiveForeground#8e8672ff
  • pickerGroup.foreground#ffc17dff
  • progressBar.background#304050
  • scrollbar.shadow#3c3c3cff
  • scrollbarSlider.activeBackground#66d9ef60
  • scrollbarSlider.background#2c2c2ca0
  • scrollbarSlider.hoverBackground#66d9ef40
  • selection.background#66d9ef80
  • settings.checkboxBackground#2c2c2cff
  • settings.checkboxBorder#1C1C1C
  • settings.dropdownBorder#1C1C1C
  • settings.dropdownListBorder#1C1C1C
  • settings.modifiedItemIndicator#70849855
  • settings.numberInputBorder#1C1C1C
  • settings.textInputBorder#1C1C1C
  • sideBar.background#1C1C1C
  • sideBar.border#181818ff
  • sideBar.dropBackground#70849855
  • sideBarSectionHeader.background#304050
  • sideBarSectionHeader.border#70849855
  • sideBarSectionHeader.foreground#9c9c9cff
  • sideBarTitle.foreground#838383ff
  • statusBar.background#141414ff
  • statusBar.border#3c3c3cff
  • statusBar.debuggingBackground#94a8bcff
  • statusBar.debuggingForeground#6b5743ff
  • statusBar.foreground#ebebebff
  • statusBar.noFolderBackground#66d9ef80
  • statusBar.noFolderForeground#99261080
  • statusBarItem.activeBackground#66d9ef60
  • statusBarItem.hoverBackground#66d9ef40
  • statusBarItem.prominentBackground#66d9ef60
  • statusBarItem.prominentHoverBackground#66d9ef40
  • tab.activeBackground#304050
  • tab.activeBorder#304050
  • tab.activeBorderTop#66d9ef
  • tab.activeForeground#dcdcdcff
  • tab.activeModifiedBorder#66d9ef
  • tab.border#0c0c0cff
  • tab.hoverBorder#a3a3a3ff
  • tab.hoverForeground#343434ff
  • tab.inactiveBackground#141414ff
  • tab.inactiveForeground#838383ff
  • tab.inactiveModifiedBorder#d10000c4
  • tab.unfocusedActiveBorder#304050
  • tab.unfocusedActiveBorderTop#94cdd8ff
  • tab.unfocusedActiveModifiedBorder#94cdd8ff
  • tab.unfocusedInactiveModifiedBorder#d10000c4
  • terminal.background#141414ff
  • terminal.border{terminal-borders}
  • terminal.foreground#ebebebff
  • terminal.selectionBackground#66d9ef40
  • textLink.activeForeground#86f9ffff
  • textLink.foreground#66d9ef
  • titleBar.activeBackground#141414ff
  • titleBar.activeForeground#ebebebff
  • titleBar.inactiveBackground#141414ff
  • titleBar.inactiveForeground#a4a4a4ff
  • welcomePage.buttonBackground#304050
  • welcomePage.buttonHoverBackground#405060ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#8ba171ff
meta.preprocessor, punctuation.definition.preprocessor#deb681ff
keyword.other.phpdoc#5d8248ff
punctuation.definition.comment, punctuation.whitespace.comment#a5c188ff
punctuation.section.embedded#87826eff
source.ruby.embedded#c1927cff
keyword.other.directive#dbd3b1ffbold
keyword.other.directive.line-numberunderline
string, string.unquoted#c78672ff
string.unquoted.heredoc#d3cbaaff
support.constant.numeric, constant.numeric#92c5a5ff
constant, support.constant#d2ca93ffbold
constant.character, constant.other#c1927cff
variable.other.constant#d2ca93ff
keyword, keyword.control, meta.selector.css, entity.other.attribute-name#f4ce98ff
variable.other.readwrite.instance#f4ce98ff
entity.name.module, support.other.module#e9852affbold
keyword.operator#e9e0bcff
keyword.operator.symbol.infix.floating-pointunderline
source.ocaml, keyword.operator.symbol.prefix.floating-pointunderline
storage.type, storage.modifier, support.type#f9ed93ff
entity.name.class.variant#4b7675ff
entity.other#d3cbaaff
entity.other.inherited-class#c88c36ff
storage.type.user-defined, meta.property-list#f5d536ff
entity.name.type, entity.name.type.class, entity.other.attribute-name.class.css, support.class, entity.name.class#e39e3eff
invalid#f4c7bbffbold italic underline
entity.other.attribute-name.html#d3cb94ffbold
entity.name.tag#d3cb94ff
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#87826eff
support.function.construct#f4ce98ff
punctuation.definition.variable#f4ce98ff
meta.function-name, entity.name.function#faee86ff
support.function#c1b039ff
meta.brace#85be9e80
punctuation.definition.string.begin, punctuation.definition.string.end#d3cbaa80
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.tag.structure.any.html#f4cd9794bold
entity.name.tag.yaml#f4ce98ffbold
punctuation.definition.entry#d3cbaaff
keyword.other.DML.sql, keyword.other.data-integrity.sql#b4ae92ffbold
source.sql, constant.other.database-name.sql, constant.other.table-name.sql, keyword.operator.star#9bb3b4ffbold
source.diff, meta.diff.comment, meta.toc-list.comment.diff#fbf2cbff
meta.diff.header.from-file#bb7363ffbold
meta.diff.header.to-file#6ca471ffbold
meta.diff.range.unified#96c1a3ff
markup.inserted.diff#6ca471ff
markup.deleted.diff#bb7363ff
string.regexp#b77147ff
string.regexp.arbitrary-repitition#946953ff
punctuation.definition.arbitrary-repitition#fbf2cb5e
string.regexp.character-class#bf8c70ff
punctuation.definition.character-class#fbf2cb5e
markup.raw.inline.markdown#f4ce98ff
markup.heading.markdown, punctuation.definition.heading#fbf2cbffbold
markup.list#dbd3b1ff
sublimelinter.mark.warning#d3af2dff
sublimelinter.gutter-mark#fbf2cbff
sublimelinter.mark.error#b9341dff
doctype#c6c3a3ff
entity#c6c3a3ff
hyperlink#5d8478ff
invisibles#fbf2cbff
level0#283f21ff
level1#232230ff
level10#465c4dff
level2#444123ff
level3#402533ff
level4#284035ff
level5#5d4137ff
level6#455b39ff
level7#413f48ff
level8#615d3cff
level9#5d424bff
markup#d0c8a8ff
match#f3c56cff
meta#b7a684ff
none#776358ff
property#899189ff
punctuation#f3c96fff bold
source#d9d1b0ff
storage#73444dff
support#dea4b5ff
text#d9d1b0ff
variable#e0c698ff
wordhighlight#8ae73bff

Shiki preview

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

Loading...

Zenburn In Grays by Nicola Granata - VS Code Theme