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#24506d
  • activityBar.border#ffffff15
  • activityBar.foreground#b9a6e8
  • activityBar.inactiveForeground#f5f8fb60
  • activityBarBadge.background#b9a6e8
  • activityBarBadge.foreground#24506d
  • button.background#b9a6e8
  • button.foreground#24506d
  • button.hoverBackground#b9a6e8dd
  • editor.background#24506d
  • editor.foreground#f5f8fb
  • editor.inactiveSelectionBackground#7fb9e83580
  • editor.lineHighlightBackground#12203340
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#7fb9e835
  • editorCursor.foreground#b9a6e8
  • editorGroupHeader.tabsBackground#24506ddd
  • editorLineNumber.activeForeground#b9a6e8
  • editorLineNumber.foreground#aeb8c880
  • focusBorder#b9a6e8
  • foreground#f5f8fb
  • input.background#122033
  • input.border#ffffff15
  • input.foreground#f5f8fb
  • input.placeholderForeground#f5f8fb60
  • list.activeSelectionBackground#b9a6e830
  • list.activeSelectionForeground#f5f8fb
  • list.highlightForeground#b9a6e8
  • list.hoverBackground#12203340
  • list.hoverForeground#f5f8fb
  • list.inactiveSelectionBackground#b9a6e815
  • list.inactiveSelectionForeground#f5f8fb
  • selection.background#7fb9e835
  • sideBar.background#122033
  • sideBar.border#ffffff15
  • sideBar.foreground#f5f8fb
  • sideBarSectionHeader.background#24506d80
  • sideBarSectionHeader.foreground#f5f8fb
  • sideBarTitle.foreground#b9a6e8
  • statusBar.background#24506d
  • statusBar.border#ffffff15
  • statusBar.foreground#f5f8fb
  • statusBar.noFolderBackground#24506d
  • tab.activeBackground#24506d
  • tab.activeBorderTop#b9a6e8
  • tab.activeForeground#f5f8fb
  • tab.border#ffffff15
  • tab.inactiveBackground#12203360
  • tab.inactiveForeground#f5f8fb80
  • terminal.ansiBlack#24506d
  • terminal.ansiBlue#7fb9e8
  • terminal.ansiCyan#9ed8df
  • terminal.ansiGreen#b9a6e8
  • terminal.ansiMagenta#8063c7
  • terminal.ansiRed#8063c7
  • terminal.ansiWhite#f5f8fb
  • terminal.ansiYellow#9ed8df
  • terminal.background#24506d
  • terminal.foreground#f5f8fb
  • titleBar.activeBackground#24506d
  • titleBar.activeForeground#f5f8fb
  • titleBar.border#ffffff15
  • titleBar.inactiveBackground#24506d
  • titleBar.inactiveForeground#f5f8fb60
  • widget.border#ffffff15

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#aeb8c8italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#7fb9e8bold
storage.type, storage.modifier#7fb9e8italic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#b9a6e8
string, punctuation.definition.string, string.template, meta.template.expression#9ed8df
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#8063c7
variable, variable.other.readwrite, variable.other.object#f5f8fb
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#f5f8fb
variable.parameter, meta.parameter#f5f8fbdditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#f5f8fb80
keyword.operator#f5f8fb
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#9ed8dfbold
entity.other.inherited-class#b9a6e8
entity.name.tag, punctuation.definition.tag#7fb9e8
entity.other.attribute-name#b9a6e8
meta.diff, meta.diff.header#aeb8c8
markup.deleted#8063c7
markup.inserted#b9a6e8
markup.changed#9ed8df
markup.heading, markup.heading.setext, punctuation.definition.heading#b9a6e8bold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#9ed8df
string.other.link.title, string.other.link.description#b9a6e8
markup.underline.link#aeb8c8underline
punctuation.definition.list#7fb9e8
markup.quote, punctuation.definition.quote#aeb8c8italic
Morphous Theme by Ameyanagi - VS Code Theme