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#131415ff
  • activityBar.border#0b0c0dff
  • activityBar.foreground#818181ff
  • activityBar.inactiveForeground#81818155
  • activityBarBadge.background#e00c10c4
  • activityBarBadge.foreground#dcdcdcff
  • badge.background#e00c10c4
  • badge.foreground#dcdcdcff
  • breadcrumb.background#363636
  • breadcrumb.border#86f9ffff
  • breadcrumb.foreground#9c9c9cff
  • button.background#363636
  • button.foreground#e4e3e2ff
  • button.hoverBackground#464646ff
  • descriptionForeground#e4e3e2ff
  • dropdown.background#232426ff
  • dropdown.border#1B1C1D
  • dropdown.foreground#bbbcbdff
  • dropdown.listBackground#232426ff
  • editor.background#1B1C1D
  • editor.foreground#a4a3a2ff
  • editor.lineHighlightBackground#66d9ef20
  • editor.selectionBackground#66d9ef40
  • editor.selectionHighlightBackground#66d9ef60
  • editor.wordHighlightStrongBackground#66d9ef80
  • editorGroup.border#0b0c0dff
  • editorGroupHeader.noTabsBackground#131415ff
  • editorGroupHeader.tabsBackground#131415ff
  • editorGutter.background#1B1C1D
  • editorGutter.modifiedBackground#66d9ef
  • editorHoverWidget.border#7a7666ff
  • editorIndentGuide.activeBackground#818181ff
  • editorIndentGuide.background#232425ff
  • editorLineNumber.activeForeground#bab6a6ff
  • editorLineNumber.foreground#8a8676ff
  • editorPane.background#131415ff
  • editorSuggestWidget.background#1B1C1D
  • editorSuggestWidget.border#7a7666ff
  • editorSuggestWidget.selectedBackground#2b2c2dff
  • editorUnnecessaryCode.opacity#1b1c1d80
  • editorWidget.border#81818155
  • errorForeground#66d9ef
  • focusBorder#7a7666ff
  • foreground#a4a3a2ff
  • input.background#2b2c2dff
  • input.border#1B1C1D
  • input.foreground#bab6a6ff
  • input.placeholderForeground#6a6656ff
  • inputOption.activeBorder#818181ff
  • list.activeSelectionBackground#66d9ef2b
  • list.activeSelectionForeground#ffc17cff
  • list.dropBackground#232426ff
  • list.focusBackground#ffc17c2b
  • list.focusForeground#e4e3e2ff
  • list.highlightForeground#66d9ef80
  • list.hoverBackground#46b9cf2b
  • list.hoverForeground#e4e3e2ff
  • list.inactiveSelectionBackground#46b9cf2b
  • list.inactiveSelectionForeground#d9a469ff
  • listFilterWidget.outline#0b0c0dff
  • menu.background#131415ff
  • menu.foreground#9c9c9cff
  • menu.selectionBackground#46b9cf2b
  • menu.selectionForeground#e4e3e2ff
  • menu.separatorBackground#5b5c5dff
  • menubar.selectionBackground#66d9ef40
  • menubar.selectionBorder#131415ff
  • notifications.background#363636
  • panel.background#1B1C1D
  • panel.border#3b3c3dff
  • panelTitle.activeBorder#bab6a6ff
  • panelTitle.activeForeground#bab6a6ff
  • panelTitle.inactiveForeground#8a8676ff
  • pickerGroup.foreground#ffc17cff
  • progressBar.background#363636
  • scrollbar.shadow#3b3c3dff
  • scrollbarSlider.activeBackground#66d9ef60
  • scrollbarSlider.background#2b2c2da0
  • scrollbarSlider.hoverBackground#66d9ef40
  • selection.background#66d9ef80
  • settings.checkboxBackground#2b2c2dff
  • settings.checkboxBorder#1B1C1D
  • settings.dropdownBorder#1B1C1D
  • settings.dropdownListBorder#1B1C1D
  • settings.modifiedItemIndicator#81818155
  • settings.numberInputBorder#1B1C1D
  • settings.textInputBorder#1B1C1D
  • sideBar.background#1B1C1D
  • sideBar.border#171819ff
  • sideBar.dropBackground#81818155
  • sideBarSectionHeader.background#363636
  • sideBarSectionHeader.border#81818155
  • sideBarSectionHeader.foreground#9c9c9cff
  • sideBarTitle.foreground#848382ff
  • statusBar.background#131415ff
  • statusBar.border#3b3c3dff
  • statusBar.debuggingBackground#a5a5a5ff
  • statusBar.debuggingForeground#5a5a5aff
  • statusBar.foreground#ecebeaff
  • statusBar.noFolderBackground#66d9ef80
  • statusBar.noFolderForeground#99261080
  • statusBarItem.activeBackground#66d9ef60
  • statusBarItem.hoverBackground#66d9ef40
  • statusBarItem.prominentBackground#66d9ef60
  • statusBarItem.prominentHoverBackground#66d9ef40
  • tab.activeBackground#363636
  • tab.activeBorder#363636
  • tab.activeBorderTop#66d9ef
  • tab.activeForeground#dcdcdcff
  • tab.activeModifiedBorder#66d9ef
  • tab.border#0b0c0dff
  • tab.hoverBorder#a4a3a2ff
  • tab.hoverForeground#333435ff
  • tab.inactiveBackground#131415ff
  • tab.inactiveForeground#848382ff
  • tab.inactiveModifiedBorder#c80000c4
  • tab.unfocusedActiveBorder#363636
  • tab.unfocusedActiveBorderTop#94cdd8ff
  • tab.unfocusedActiveModifiedBorder#94cdd8ff
  • tab.unfocusedInactiveModifiedBorder#c80000c4
  • terminal.background#131415ff
  • terminal.border{terminal-borders}
  • terminal.foreground#ecebeaff
  • terminal.selectionBackground#66d9ef40
  • textLink.activeForeground#86f9ffff
  • textLink.foreground#66d9ef
  • titleBar.activeBackground#131415ff
  • titleBar.activeForeground#ecebeaff
  • titleBar.inactiveBackground#131415ff
  • titleBar.inactiveForeground#a5a4a4ff
  • welcomePage.buttonBackground#363636
  • welcomePage.buttonHoverBackground#464646ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#7ca07bff
meta.preprocessor, punctuation.definition.preprocessor#d5ad86ff
keyword.other.phpdoc#4f8347ff
punctuation.definition.comment, punctuation.whitespace.comment#93be94ff
punctuation.section.embedded#7e7e7eff
source.ruby.embedded#bc8889ff
keyword.other.directive#ccccccffbold
keyword.other.directive.line-numberunderline
string, string.unquoted#c57b7bff
string.unquoted.heredoc#c5c5c5ff
support.constant.numeric, constant.numeric#7cc5c4ff
constant, support.constant#c5c5a0ffbold
constant.character, constant.other#bc8889ff
variable.other.constant#c5c5a0ff
keyword, keyword.control, meta.selector.css, entity.other.attribute-name#eac5a1ff
variable.other.readwrite.instance#eac5a1ff
entity.name.module, support.other.module#eb7600ffbold
keyword.operator#d9d9d9ff
keyword.operator.symbol.infix.floating-pointunderline
source.ocaml, keyword.operator.symbol.prefix.floating-pointunderline
storage.type, storage.modifier, support.type#ebe790ff
entity.name.class.variant#3b7693ff
entity.other#c5c5c5ff
entity.other.inherited-class#c68219ff
storage.type.user-defined, meta.property-list#ebce00ff
entity.name.type, entity.name.type.class, entity.other.attribute-name.class.css, support.class, entity.name.class#e0931dff
invalid#ebbcdbffbold italic underline
entity.other.attribute-name.html#c5c6a1ffbold
entity.name.tag#c5c6a1ff
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#7e7e7eff
support.function.construct#eac5a1ff
punctuation.definition.variable#eac5a1ff
meta.function-name, entity.name.function#ebe97cff
support.function#b7ab16ff
meta.brace#6ebebc80
punctuation.definition.string.begin, punctuation.definition.string.end#c5c5c580
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.tag.structure.any.html#eac4a094bold
entity.name.tag.yaml#eac5a1ffbold
punctuation.definition.entry#c5c5c5ff
keyword.other.DML.sql, keyword.other.data-integrity.sql#a8a8a8ffbold
source.sql, constant.other.database-name.sql, constant.other.table-name.sql, keyword.operator.star#89b0e0ffbold
source.diff, meta.diff.comment, meta.toc-list.comment.diff#ebebebff
meta.diff.header.from-file#ba6869ffbold
meta.diff.header.to-file#58a57fffbold
meta.diff.range.unified#81bfc2ff
markup.inserted.diff#58a57fff
markup.deleted.diff#ba6869ff
string.regexp#b7663cff
string.regexp.arbitrary-repitition#916257ff
punctuation.definition.arbitrary-repitition#ebebeb5e
string.regexp.character-class#bb8377ff
punctuation.definition.character-class#ebebeb5e
markup.raw.inline.markdown#eac5a1ff
markup.heading.markdown, punctuation.definition.heading#ebebebffbold
markup.list#ccccccff
sublimelinter.mark.warning#cba800ff
sublimelinter.gutter-mark#ebebebff
sublimelinter.mark.error#bf1d00ff
doctype#b8bebcff
entity#b8bebcff
hyperlink#4d8493ff
invisibles#ebebebff
level0#203f20ff
level1#20203fff
level10#3c5b5bff
level2#3f3f20ff
level3#3f203fff
level4#203f3fff
level5#5b3c3cff
level6#3c5b3cff
level7#3c3c5bff
level8#5b5b3cff
level9#5b3c5bff
markup#c2c2c2ff
match#ebbc5eff
meta#ada093ff
none#725e64ff
property#7c8ea7ff
punctuation#ebc162ff bold
source#cacacaff
storage#733c5bff
support#d798dcff
text#cacacaff
variable#d5bea6ff
wordhighlight#6deb10ff

Shiki preview

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

Loading...

Zenburn In Grays by Nicola Granata - VS Code Theme