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#f8fafc
  • activityBar.border#00000015
  • activityBar.foreground#1e40af
  • activityBar.inactiveForeground#0f172a60
  • activityBarBadge.background#1e40af
  • activityBarBadge.foreground#f8fafc
  • button.background#1e40af
  • button.foreground#f8fafc
  • button.hoverBackground#1e40afdd
  • editor.background#f8fafc
  • editor.foreground#0f172a
  • editor.inactiveSelectionBackground#2563eb2580
  • editor.lineHighlightBackground#ffffff50
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#2563eb25
  • editorCursor.foreground#1e40af
  • editorGroupHeader.tabsBackground#ffffffaa
  • editorLineNumber.activeForeground#1e40af
  • editorLineNumber.foreground#64748b80
  • focusBorder#1e40af
  • foreground#0f172a
  • input.background#ffffff
  • input.border#00000015
  • input.foreground#0f172a
  • input.placeholderForeground#0f172a60
  • list.activeSelectionBackground#1e40af30
  • list.activeSelectionForeground#0f172a
  • list.highlightForeground#1e40af
  • list.hoverBackground#ffffff40
  • list.hoverForeground#0f172a
  • list.inactiveSelectionBackground#1e40af15
  • list.inactiveSelectionForeground#0f172a
  • selection.background#2563eb25
  • sideBar.background#ffffff
  • sideBar.border#00000015
  • sideBar.foreground#0f172a
  • sideBarSectionHeader.background#ffffff80
  • sideBarSectionHeader.foreground#0f172a
  • sideBarTitle.foreground#1e40af
  • statusBar.background#f8fafc
  • statusBar.border#00000015
  • statusBar.foreground#0f172a
  • statusBar.noFolderBackground#f8fafc
  • tab.activeBackground#f8fafc
  • tab.activeBorderTop#1e40af
  • tab.activeForeground#0f172a
  • tab.border#00000015
  • tab.inactiveBackground#f8fafc60
  • tab.inactiveForeground#0f172a80
  • terminal.ansiBlack#0f172a
  • terminal.ansiBlue#2563eb
  • terminal.ansiCyan#4f46e5
  • terminal.ansiGreen#1e40af
  • terminal.ansiMagenta#7c3aed
  • terminal.ansiRed#7c3aed
  • terminal.ansiWhite#0f172a
  • terminal.ansiYellow#4f46e5
  • terminal.background#f8fafc
  • terminal.foreground#0f172a
  • titleBar.activeBackground#f8fafc
  • titleBar.activeForeground#0f172a
  • titleBar.border#00000015
  • titleBar.inactiveBackground#f8fafc
  • titleBar.inactiveForeground#0f172a60
  • widget.border#00000015

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#64748bitalic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#2563ebbold
storage.type, storage.modifier#2563ebitalic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#1e40af
string, punctuation.definition.string, string.template, meta.template.expression#4f46e5
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#7c3aed
variable, variable.other.readwrite, variable.other.object#0f172a
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#0f172a
variable.parameter, meta.parameter#0f172additalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#0f172a80
keyword.operator#0f172a
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#4f46e5bold
entity.other.inherited-class#1e40af
entity.name.tag, punctuation.definition.tag#2563eb
entity.other.attribute-name#1e40af
meta.diff, meta.diff.header#64748b
markup.deleted#7c3aed
markup.inserted#1e40af
markup.changed#4f46e5
markup.heading, markup.heading.setext, punctuation.definition.heading#1e40afbold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#4f46e5
string.other.link.title, string.other.link.description#1e40af
markup.underline.link#64748bunderline
punctuation.definition.list#2563eb
markup.quote, punctuation.definition.quote#64748bitalic