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#F9FAFB
  • activityBar.border#00000015
  • activityBar.foreground#252593
  • activityBar.inactiveForeground#0D0D0F60
  • activityBarBadge.background#252593
  • activityBarBadge.foreground#F9FAFB
  • button.background#252593
  • button.foreground#F9FAFB
  • button.hoverBackground#252593dd
  • editor.background#F9FAFB
  • editor.foreground#0D0D0F
  • editor.inactiveSelectionBackground#8334212580
  • editor.lineHighlightBackground#F7F7F750
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#83342125
  • editorCursor.foreground#252593
  • editorGroupHeader.tabsBackground#F7F7F7aa
  • editorLineNumber.activeForeground#252593
  • editorLineNumber.foreground#E5E7EB80
  • focusBorder#252593
  • foreground#0D0D0F
  • input.background#F7F7F7
  • input.border#00000015
  • input.foreground#0D0D0F
  • input.placeholderForeground#0D0D0F60
  • list.activeSelectionBackground#25259330
  • list.activeSelectionForeground#0D0D0F
  • list.highlightForeground#252593
  • list.hoverBackground#F7F7F740
  • list.hoverForeground#0D0D0F
  • list.inactiveSelectionBackground#25259315
  • list.inactiveSelectionForeground#0D0D0F
  • selection.background#83342125
  • sideBar.background#F7F7F7
  • sideBar.border#00000015
  • sideBar.foreground#0D0D0F
  • sideBarSectionHeader.background#F7F7F780
  • sideBarSectionHeader.foreground#0D0D0F
  • sideBarTitle.foreground#252593
  • statusBar.background#F9FAFB
  • statusBar.border#00000015
  • statusBar.foreground#0D0D0F
  • statusBar.noFolderBackground#F9FAFB
  • tab.activeBackground#F9FAFB
  • tab.activeBorderTop#252593
  • tab.activeForeground#0D0D0F
  • tab.border#00000015
  • tab.inactiveBackground#F9FAFB60
  • tab.inactiveForeground#0D0D0F80
  • terminal.ansiBlack#0D0D0F
  • terminal.ansiBlue#833421
  • terminal.ansiCyan#296EA3
  • terminal.ansiGreen#252593
  • terminal.ansiMagenta#762D19
  • terminal.ansiRed#762D19
  • terminal.ansiWhite#0D0D0F
  • terminal.ansiYellow#296EA3
  • terminal.background#F9FAFB
  • terminal.foreground#0D0D0F
  • titleBar.activeBackground#F9FAFB
  • titleBar.activeForeground#0D0D0F
  • titleBar.border#00000015
  • titleBar.inactiveBackground#F9FAFB
  • titleBar.inactiveForeground#0D0D0F60
  • widget.border#00000015

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#E5E7EBitalic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#833421bold
storage.type, storage.modifier#833421italic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#252593
string, punctuation.definition.string, string.template, meta.template.expression#296EA3
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#762D19
variable, variable.other.readwrite, variable.other.object#0D0D0F
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#0D0D0F
variable.parameter, meta.parameter#0D0D0Fdditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#0D0D0F80
keyword.operator#0D0D0F
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#296EA3bold
entity.other.inherited-class#252593
entity.name.tag, punctuation.definition.tag#833421
entity.other.attribute-name#252593
meta.diff, meta.diff.header#E5E7EB
markup.deleted#762D19
markup.inserted#252593
markup.changed#296EA3
markup.heading, markup.heading.setext, punctuation.definition.heading#252593bold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#296EA3
string.other.link.title, string.other.link.description#252593
markup.underline.link#E5E7EBunderline
punctuation.definition.list#833421
markup.quote, punctuation.definition.quote#E5E7EBitalic
Morphous Theme by Ameyanagi - VS Code Theme