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#18130dff
  • activityBar.border#100b07ff
  • activityBar.foreground#917065ff
  • activityBar.inactiveForeground#91706555
  • activityBarBadge.background#ff0000c4
  • activityBarBadge.foreground#dfd19aff
  • badge.background#ff0000c4
  • badge.foreground#dfd19aff
  • breadcrumb.background#432c2fff
  • breadcrumb.border#74f5bbff
  • breadcrumb.foreground#9e946dff
  • button.background#432c2fff
  • button.foreground#e3d9a0ff
  • button.hoverBackground#533b3aff
  • descriptionForeground#e3d9a0ff
  • dropdown.background#292218ff
  • dropdown.border#201b12ff
  • dropdown.foreground#c2b382ff
  • dropdown.listBackground#292218ff
  • editor.background#201b12ff
  • editor.foreground#a29b73ff
  • editor.lineHighlightBackground#53d5b320
  • editor.selectionBackground#53d5b340
  • editor.selectionHighlightBackground#53d5b360
  • editor.wordHighlightStrongBackground#53d5b380
  • editorGroup.border#100b07ff
  • editorGroupHeader.noTabsBackground#18130dff
  • editorGroupHeader.tabsBackground#18130dff
  • editorGutter.background#201b12ff
  • editorGutter.modifiedBackground#53d5b3ff
  • editorHoverWidget.border#926f3bff
  • editorIndentGuide.activeBackground#8d7362ff
  • editorIndentGuide.background#282218ff
  • editorLineNumber.activeForeground#d3ac68ff
  • editorLineNumber.foreground#a27e47ff
  • editorPane.background#18130dff
  • editorSuggestWidget.background#201b12ff
  • editorSuggestWidget.border#926f3bff
  • editorSuggestWidget.selectedBackground#302a1dff
  • editorUnnecessaryCode.opacity#201b1280
  • editorWidget.border#91706555
  • errorForeground#53d5b3ff
  • focusBorder#926f3bff
  • foreground#a29b73ff
  • input.background#302a1dff
  • input.border#201b12ff
  • input.foreground#d3ac68ff
  • input.placeholderForeground#816030ff
  • inputOption.activeBorder#917065ff
  • list.activeSelectionBackground#53d5b32b
  • list.activeSelectionForeground#ffb343ff
  • list.dropBackground#292218ff
  • list.focusBackground#ffb3432b
  • list.focusForeground#e3d9a0ff
  • list.highlightForeground#53d5b380
  • list.hoverBackground#32b79c2b
  • list.hoverForeground#e3d9a0ff
  • list.inactiveSelectionBackground#32b79c2b
  • list.inactiveSelectionForeground#e59838ff
  • listFilterWidget.outline#100b07ff
  • menu.background#18130dff
  • menu.foreground#9e946dff
  • menu.selectionBackground#32b79c2b
  • menu.selectionForeground#e3d9a0ff
  • menu.separatorBackground#61573fff
  • menubar.selectionBackground#53d5b340
  • menubar.selectionBorder#18130dff
  • notifications.background#432c2fff
  • panel.background#201b12ff
  • panel.border#403929ff
  • panelTitle.activeBorder#d3ac68ff
  • panelTitle.activeForeground#d3ac68ff
  • panelTitle.inactiveForeground#a27e47ff
  • pickerGroup.foreground#ffb343ff
  • progressBar.background#432c2fff
  • scrollbar.shadow#403929ff
  • scrollbarSlider.activeBackground#53d5b360
  • scrollbarSlider.background#302a1da0
  • scrollbarSlider.hoverBackground#53d5b340
  • selection.background#53d5b380
  • settings.checkboxBackground#302a1dff
  • settings.checkboxBorder#201b12ff
  • settings.dropdownBorder#201b12ff
  • settings.dropdownListBorder#201b12ff
  • settings.modifiedItemIndicator#91706555
  • settings.numberInputBorder#201b12ff
  • settings.textInputBorder#201b12ff
  • sideBar.background#201b12ff
  • sideBar.border#1c170fff
  • sideBar.dropBackground#91706555
  • sideBarSectionHeader.background#432c2fff
  • sideBarSectionHeader.border#91706555
  • sideBarSectionHeader.foreground#9e946dff
  • sideBarTitle.foreground#817c5dff
  • statusBar.background#18130dff
  • statusBar.border#403929ff
  • statusBar.debuggingBackground#b5927eff
  • statusBar.debuggingForeground#4d6034ff
  • statusBar.foreground#ebdfa6ff
  • statusBar.noFolderBackground#53d5b380
  • statusBar.noFolderForeground#a9170080
  • statusBarItem.activeBackground#53d5b360
  • statusBarItem.hoverBackground#53d5b340
  • statusBarItem.prominentBackground#53d5b360
  • statusBarItem.prominentHoverBackground#53d5b340
  • tab.activeBackground#432c2fff
  • tab.activeBorder#432c2fff
  • tab.activeBorderTop#53d5b3ff
  • tab.activeForeground#dfd19aff
  • tab.activeModifiedBorder#53d5b3ff
  • tab.border#100b07ff
  • tab.hoverBorder#a29b73ff
  • tab.hoverForeground#383123ff
  • tab.inactiveBackground#18130dff
  • tab.inactiveForeground#817c5dff
  • tab.inactiveModifiedBorder#ff0000c4
  • tab.unfocusedActiveBorder#432c2fff
  • tab.unfocusedActiveBorderTop#8cc79eff
  • tab.unfocusedActiveModifiedBorder#8cc79eff
  • tab.unfocusedInactiveModifiedBorder#ff0000c4
  • terminal.background#18130dff
  • terminal.border{terminal-borders}
  • terminal.foreground#ebdfa6ff
  • terminal.selectionBackground#53d5b340
  • textLink.activeForeground#74f5bbff
  • textLink.foreground#53d5b3ff
  • titleBar.activeBackground#18130dff
  • titleBar.activeForeground#ebdfa6ff
  • titleBar.inactiveBackground#18130dff
  • titleBar.inactiveForeground#a49c74ff
  • welcomePage.buttonBackground#432c2fff
  • welcomePage.buttonHoverBackground#533b3aff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#87a564ff
meta.preprocessor, punctuation.definition.preprocessor#e8b36dff
keyword.other.phpdoc#56873aff
punctuation.definition.comment, punctuation.whitespace.comment#a0c579ff
punctuation.section.embedded#898267ff
source.ruby.embedded#cc8d70ff
keyword.other.directive#ded3a6ffbold
keyword.other.directive.line-numberunderline
string, string.unquoted#d67f64ff
string.unquoted.heredoc#d6cba0ff
support.constant.numeric, constant.numeric#87cba0ff
constant, support.constant#d6cb82ffbold
constant.character, constant.other#cc8d70ff
variable.other.constant#d6cb82ff
keyword, keyword.control, meta.selector.css, entity.other.attribute-name#fecb83ff
variable.other.readwrite.instance#fecb83ff
entity.name.module, support.other.module#ff7a00ffbold
keyword.operator#ece0b1ff
keyword.operator.symbol.infix.floating-pointunderline
source.ocaml, keyword.operator.symbol.prefix.floating-pointunderline
storage.type, storage.modifier, support.type#ffee76ff
entity.name.class.variant#407a78ff
entity.other#d6cba0ff
entity.other.inherited-class#d78614ff
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#f49818ff
invalid#ffc2b2ffbold italic underline
entity.other.attribute-name.html#d6cc83ffbold
entity.name.tag#d6cc83ff
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#898267ff
support.function.construct#fecb83ff
punctuation.definition.variable#fecb83ff
meta.function-name, entity.name.function#fff065ff
support.function#c7b112ff
meta.brace#78c49980
punctuation.definition.string.begin, punctuation.definition.string.end#d6cba080
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.tag.structure.any.html#feca8294bold
entity.name.tag.yaml#fecb83ffbold
punctuation.definition.entry#d6cba0ff
keyword.other.DML.sql, keyword.other.data-integrity.sql#b7ae89ffbold
source.sql, constant.other.database-name.sql, constant.other.table-name.sql, keyword.operator.star#95b5b6ffbold
source.diff, meta.diff.comment, meta.toc-list.comment.diff#fff2bfff
meta.diff.header.from-file#ca6b55ffbold
meta.diff.header.to-file#60aa67ffbold
meta.diff.range.unified#8cc69eff
markup.inserted.diff#60aa67ff
markup.deleted.diff#ca6b55ff
string.regexp#c76931ff
string.regexp.arbitrary-repitition#9e6547ff
punctuation.definition.arbitrary-repitition#fff2bf5e
string.regexp.character-class#cb8761ff
punctuation.definition.character-class#fff2bf5e
markup.raw.inline.markdown#fecb83ff
markup.heading.markdown, punctuation.definition.heading#fff2bfffbold
markup.list#ded3a6ff
sublimelinter.mark.warning#ddae00ff
sublimelinter.gutter-mark#fff2bfff
sublimelinter.mark.error#d01e00ff
doctype#c8c499ff
entity#c8c499ff
hyperlink#548878ff
invisibles#fff2bfff
level0#23421aff
level1#232134ff
level10#415e4aff
level2#45421aff
level3#452134ff
level4#234234ff
level5#633e31ff
level6#415e31ff
level7#413e4aff
level8#635e31ff
level9#633e4aff
markup#d3c89eff
match#ffc24cff
meta#bca578ff
none#7c6152ff
property#879288ff
punctuation#ffc74fff bold
source#dcd1a5ff
storage#7d3e4aff
support#ea9db3ff
text#dcd1a5ff
variable#e7c587ff
wordhighlight#77f20dff

Shiki preview

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

Loading...