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#0D2549
  • activityBar.foreground#FFFFFF
  • badge.background#38BDF8
  • badge.foreground#0F172A
  • button.background#38BDF8
  • button.foreground#0F172A
  • button.hoverBackground#0EA5E9
  • dropdown.background#0D2549
  • dropdown.border#37474F
  • dropdown.foreground#E2E8F0
  • editor.background#0F172A
  • editor.foreground#E2E8F0
  • editor.selectionBackground#38BDF84D
  • editorCursor.foreground#38BDF8
  • editorIndentGuide.activeBackground#38BDF8
  • editorIndentGuide.background#37474F
  • focusBorder#38BDF8
  • gitDecoration.addedResourceForeground#C3E88D
  • gitDecoration.deletedResourceForeground#F78C6C
  • gitDecoration.modifiedResourceForeground#FFCB6B
  • input.background#0D2549
  • input.border#37474F
  • input.foreground#E2E8F0
  • list.activeSelectionBackground#233047
  • list.activeSelectionForeground#E2E8F0
  • list.hoverBackground#1A2537
  • scrollbarSlider.activeBackground#38BDF8AA
  • scrollbarSlider.background#37474F66
  • scrollbarSlider.hoverBackground#37474F99
  • sideBar.background#0D2549
  • sideBar.foreground#E2E8F0
  • statusBar.background#0D2549
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#0F172A
  • tab.activeBorderTop#38BDF8
  • tab.activeForeground#FFFFFF
  • tab.inactiveBackground#0D2549
  • tab.inactiveForeground#6C7A89
  • titleBar.activeBackground#0D2549
  • titleBar.activeForeground#FFFFFF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6C7A89italic
constant, constant.numeric, constant.language, constant.character, constant.other#89DDFF
string, string.quoted, string.template, punctuation.definition.string#C3E88D
entity.name.function, meta.function-call, support.function#82AAFF
variable.parameter#E2E8F0italic
entity.other.attribute-name#82AAFF
keyword, storage, storage.type, storage.modifier#C792EA
entity.name.tag.css, entity.name.tag.stylus, source.css entity.name.tag#FFCB6B
entity.name.tag, meta.tag.other.html, entity.name.tag.html#38BDF8
entity.name.section.markdown, markup.heading.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#38BDF8bold
meta.paragraph.markdown, text.html.markdown#E2E8F0
markup.quote.markdown, punctuation.definition.quote.begin.markdown#89DDFFitalic
markup.list.unnumbered.markdown, markup.list.numbered.markdown, punctuation.definition.list.begin.markdown#F78C6C
markup.bold.markdown, markup.italic.markdown#38BDF8bold
meta.link.inline.markdown, markup.underline.link.markdown, string.other.link.title.markdown, string.other.link.description.title.markdown#80CBC4
markup.inline.raw.markdown, markup.fenced_code.block.markdown, punctuation.definition.raw.markdown#82AAFF
meta.fstring.python, string.quoted.docstring.multi.python, meta.attribute.dunder.python#C3E88D
entity.name.type.enum.member, meta.type.parameters, entity.name.class, entity.name.type.class, entity.name.type.interface, entity.other.inherited-class#FFCB6B