Skip to main content
Coding Theme

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#E2E8F0
  • activityBar.foreground#24292E
  • badge.background#0284C7
  • badge.foreground#FFFFFF
  • button.background#0284C7
  • button.foreground#FFFFFF
  • button.hoverBackground#026AA3
  • dropdown.background#F8FAFC
  • dropdown.border#D0D7DE
  • dropdown.foreground#0F172A
  • editor.background#F8FAFC
  • editor.foreground#0F172A
  • editor.selectionBackground#0284C733
  • editorCursor.foreground#0284C7
  • editorIndentGuide.activeBackground#0284C7
  • editorIndentGuide.background#D0D7DE
  • focusBorder#0284C7
  • gitDecoration.addedResourceForeground#22863A
  • gitDecoration.deletedResourceForeground#E36209
  • gitDecoration.modifiedResourceForeground#0284C7
  • input.background#FFFFFF
  • input.border#D0D7DE
  • input.foreground#0F172A
  • list.activeSelectionBackground#E0EEF7
  • list.activeSelectionForeground#0F172A
  • list.hoverBackground#EDF4FA
  • scrollbarSlider.activeBackground#0284C7AA
  • scrollbarSlider.background#D0D7DE66
  • scrollbarSlider.hoverBackground#D0D7DE99
  • sideBar.background#F1F5F9
  • sideBar.foreground#0F172A
  • statusBar.background#E2E8F0
  • statusBar.foreground#24292E
  • tab.activeBackground#F8FAFC
  • tab.activeBorderTop#0284C7
  • tab.activeForeground#0F172A
  • tab.inactiveBackground#E2E8F0
  • tab.inactiveForeground#6A737D
  • titleBar.activeBackground#E2E8F0
  • titleBar.activeForeground#24292E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A737Ditalic
constant, constant.numeric, constant.language, constant.character, constant.other#005CC5
variable.parameter#0F172Aitalic
entity.other.attribute-name#6F42C1
string, string.quoted, string.template, punctuation.definition.string#22863A
entity.name.function, meta.function-call, support.function#6F42C1
keyword, storage, storage.type, storage.modifier#0B5394
entity.name.tag.css, entity.name.tag.stylus, source.css entity.name.tag#22863A
entity.name.tag, meta.tag.other.html, entity.name.tag.html#22863A
entity.name.section.markdown, markup.heading.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#0284C7bold
meta.paragraph.markdown, text.html.markdown#0F172A
markup.quote.markdown, punctuation.definition.quote.begin.markdown#6A737Ditalic
markup.list.unnumbered.markdown, markup.list.numbered.markdown, punctuation.definition.list.begin.markdown#E36209
markup.bold.markdown, markup.italic.markdown#0284C7bold
meta.link.inline.markdown, markup.underline.link.markdown, string.other.link.title.markdown, string.other.link.description.title.markdown#005CC5
markup.inline.raw.markdown, markup.fenced_code.block.markdown, punctuation.definition.raw.markdown#005CC5
meta.fstring.python, string.quoted.docstring.multi.python, meta.attribute.dunder.python#22863A
entity.name.type.enum.member, meta.type.parameters, entity.name.class, entity.name.type.class, entity.name.type.interface, entity.other.inherited-class#E36209