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#151413ff
  • activityBar.border#0d0c0bff
  • activityBar.foreground#818181ff
  • activityBar.inactiveForeground#81818155
  • activityBarBadge.background#f20602c4
  • activityBarBadge.foreground#dcdcdcff
  • badge.background#f20602c4
  • badge.foreground#dcdcdcff
  • breadcrumb.background#363636
  • breadcrumb.border#86f9ffff
  • breadcrumb.foreground#9c9c9cff
  • button.background#363636
  • button.foreground#e2e3e4ff
  • button.hoverBackground#464646ff
  • descriptionForeground#e2e3e4ff
  • dropdown.background#262423ff
  • dropdown.border#1D1C1B
  • dropdown.foreground#bdbcbbff
  • dropdown.listBackground#262423ff
  • editor.background#1D1C1B
  • editor.foreground#a2a3a4ff
  • editor.lineHighlightBackground#66d9ef20
  • editor.selectionBackground#66d9ef40
  • editor.selectionHighlightBackground#66d9ef60
  • editor.wordHighlightStrongBackground#66d9ef80
  • editorGroup.border#0d0c0bff
  • editorGroupHeader.noTabsBackground#151413ff
  • editorGroupHeader.tabsBackground#151413ff
  • editorGutter.background#1D1C1B
  • editorGutter.modifiedBackground#66d9ef
  • editorHoverWidget.border#83765fff
  • editorIndentGuide.activeBackground#818181ff
  • editorIndentGuide.background#252423ff
  • editorLineNumber.activeForeground#c3b69fff
  • editorLineNumber.foreground#93866fff
  • editorPane.background#151413ff
  • editorSuggestWidget.background#1D1C1B
  • editorSuggestWidget.border#83765fff
  • editorSuggestWidget.selectedBackground#2d2c2bff
  • editorUnnecessaryCode.opacity#1d1c1b80
  • editorWidget.border#81818155
  • errorForeground#66d9ef
  • focusBorder#83765fff
  • foreground#a2a3a4ff
  • input.background#2d2c2bff
  • input.border#1D1C1B
  • input.foreground#c3b69fff
  • input.placeholderForeground#73664fff
  • inputOption.activeBorder#818181ff
  • list.activeSelectionBackground#66d9ef2b
  • list.activeSelectionForeground#ffc17dff
  • list.dropBackground#262423ff
  • list.focusBackground#ffc17d2b
  • list.focusForeground#e2e3e4ff
  • list.highlightForeground#66d9ef80
  • list.hoverBackground#46b9cf2b
  • list.hoverForeground#e2e3e4ff
  • list.inactiveSelectionBackground#46b9cf2b
  • list.inactiveSelectionForeground#d9a46aff
  • listFilterWidget.outline#0d0c0bff
  • menu.background#151413ff
  • menu.foreground#9c9c9cff
  • menu.selectionBackground#46b9cf2b
  • menu.selectionForeground#e2e3e4ff
  • menu.separatorBackground#5d5c5bff
  • menubar.selectionBackground#66d9ef40
  • menubar.selectionBorder#151413ff
  • notifications.background#363636
  • panel.background#1D1C1B
  • panel.border#3d3c3bff
  • panelTitle.activeBorder#c3b69fff
  • panelTitle.activeForeground#c3b69fff
  • panelTitle.inactiveForeground#93866fff
  • pickerGroup.foreground#ffc17dff
  • progressBar.background#363636
  • scrollbar.shadow#3d3c3bff
  • scrollbarSlider.activeBackground#66d9ef60
  • scrollbarSlider.background#2d2c2ba0
  • scrollbarSlider.hoverBackground#66d9ef40
  • selection.background#66d9ef80
  • settings.checkboxBackground#2d2c2bff
  • settings.checkboxBorder#1D1C1B
  • settings.dropdownBorder#1D1C1B
  • settings.dropdownListBorder#1D1C1B
  • settings.modifiedItemIndicator#81818155
  • settings.numberInputBorder#1D1C1B
  • settings.textInputBorder#1D1C1B
  • sideBar.background#1D1C1B
  • sideBar.border#191817ff
  • sideBar.dropBackground#81818155
  • sideBarSectionHeader.background#363636
  • sideBarSectionHeader.border#81818155
  • sideBarSectionHeader.foreground#9c9c9cff
  • sideBarTitle.foreground#828384ff
  • statusBar.background#151413ff
  • statusBar.border#3d3c3bff
  • statusBar.debuggingBackground#a5a5a5ff
  • statusBar.debuggingForeground#5a5a5aff
  • statusBar.foreground#eaebecff
  • 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#0d0c0bff
  • tab.hoverBorder#a2a3a4ff
  • tab.hoverForeground#353433ff
  • tab.inactiveBackground#151413ff
  • tab.inactiveForeground#828384ff
  • tab.inactiveModifiedBorder#da0000c4
  • tab.unfocusedActiveBorder#363636
  • tab.unfocusedActiveBorderTop#94cdd8ff
  • tab.unfocusedActiveModifiedBorder#94cdd8ff
  • tab.unfocusedInactiveModifiedBorder#da0000c4
  • terminal.background#151413ff
  • terminal.border{terminal-borders}
  • terminal.foreground#eaebecff
  • terminal.selectionBackground#66d9ef40
  • textLink.activeForeground#86f9ffff
  • textLink.foreground#66d9ef
  • titleBar.activeBackground#151413ff
  • titleBar.activeForeground#eaebecff
  • titleBar.inactiveBackground#151413ff
  • titleBar.inactiveForeground#a4a4a5ff
  • welcomePage.buttonBackground#363636
  • welcomePage.buttonHoverBackground#464646ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#87a77bff
meta.preprocessor, punctuation.definition.preprocessor#e8b486ff
keyword.other.phpdoc#568847ff
punctuation.definition.comment, punctuation.whitespace.comment#a0c794ff
punctuation.section.embedded#89847eff
source.ruby.embedded#cc8e89ff
keyword.other.directive#ded5ccffbold
keyword.other.directive.line-numberunderline
string, string.unquoted#d6817bff
string.unquoted.heredoc#d6cdc5ff
support.constant.numeric, constant.numeric#87cdc4ff
constant, support.constant#d6cda0ffbold
constant.character, constant.other#cc8e89ff
variable.other.constant#d6cda0ff
keyword, keyword.control, meta.selector.css, entity.other.attribute-name#fecda1ff
variable.other.readwrite.instance#fecda1ff
entity.name.module, support.other.module#ff7b00ffbold
keyword.operator#ece3d9ff
keyword.operator.symbol.infix.floating-pointunderline
source.ocaml, keyword.operator.symbol.prefix.floating-pointunderline
storage.type, storage.modifier, support.type#fff190ff
entity.name.class.variant#407b93ff
entity.other#d6cdc5ff
entity.other.inherited-class#d78719ff
storage.type.user-defined, meta.property-list#ffd700ff
entity.name.type, entity.name.type.class, entity.other.attribute-name.class.css, support.class, entity.name.class#f49a1dff
invalid#ffc4dbffbold italic underline
entity.other.attribute-name.html#d6cea1ffbold
entity.name.tag#d6cea1ff
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#89847eff
support.function.construct#fecda1ff
punctuation.definition.variable#fecda1ff
meta.function-name, entity.name.function#fff37cff
support.function#c7b316ff
meta.brace#78c6bc80
punctuation.definition.string.begin, punctuation.definition.string.end#d6cdc580
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.tag.structure.any.html#fecca094bold
entity.name.tag.yaml#fecda1ffbold
punctuation.definition.entry#d6cdc5ff
keyword.other.DML.sql, keyword.other.data-integrity.sql#b7b0a8ffbold
source.sql, constant.other.database-name.sql, constant.other.table-name.sql, keyword.operator.star#95b7e0ffbold
source.diff, meta.diff.comment, meta.toc-list.comment.diff#fff5ebff
meta.diff.header.from-file#ca6c69ffbold
meta.diff.header.to-file#60ac7fffbold
meta.diff.range.unified#8cc8c2ff
markup.inserted.diff#60ac7fff
markup.deleted.diff#ca6c69ff
string.regexp#c76b3cff
string.regexp.arbitrary-repitition#9e6657ff
punctuation.definition.arbitrary-repitition#fff5eb5e
string.regexp.character-class#cb8877ff
punctuation.definition.character-class#fff5eb5e
markup.raw.inline.markdown#fecda1ff
markup.heading.markdown, punctuation.definition.heading#fff5ebffbold
markup.list#ded5ccff
sublimelinter.mark.warning#ddb000ff
sublimelinter.gutter-mark#fff5ebff
sublimelinter.mark.error#d01f00ff
doctype#c8c6bcff
entity#c8c6bcff
hyperlink#548993ff
invisibles#fff5ebff
level0#234220ff
level1#23223fff
level10#415f5bff
level2#454220ff
level3#45223fff
level4#23423fff
level5#633e3cff
level6#415f3cff
level7#413e5bff
level8#635f3cff
level9#633e5bff
markup#d3cbc2ff
match#ffc45eff
meta#bca793ff
none#7c6264ff
property#8794a7ff
punctuation#ffca62ff bold
source#dcd3caff
storage#7d3e5bff
support#ea9edcff
text#dcd3caff
variable#e7c7a6ff
wordhighlight#77f510ff

Shiki preview

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

Loading...