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#FBFAF3
  • activityBar.border#00000015
  • activityBar.foreground#253E93
  • activityBar.inactiveForeground#0A0A0B60
  • activityBarBadge.background#253E93
  • activityBarBadge.foreground#FBFAF3
  • button.background#253E93
  • button.foreground#FBFAF3
  • button.hoverBackground#253E93dd
  • editor.background#FBFAF3
  • editor.foreground#0A0A0B
  • editor.inactiveSelectionBackground#214B832580
  • editor.lineHighlightBackground#F6F7F950
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#214B8325
  • editorCursor.foreground#253E93
  • editorGroupHeader.tabsBackground#F6F7F9aa
  • editorLineNumber.activeForeground#253E93
  • editorLineNumber.foreground#D9E4EA80
  • focusBorder#253E93
  • foreground#0A0A0B
  • input.background#F6F7F9
  • input.border#00000015
  • input.foreground#0A0A0B
  • input.placeholderForeground#0A0A0B60
  • list.activeSelectionBackground#253E9330
  • list.activeSelectionForeground#0A0A0B
  • list.highlightForeground#253E93
  • list.hoverBackground#F6F7F940
  • list.hoverForeground#0A0A0B
  • list.inactiveSelectionBackground#253E9315
  • list.inactiveSelectionForeground#0A0A0B
  • selection.background#214B8325
  • sideBar.background#F6F7F9
  • sideBar.border#00000015
  • sideBar.foreground#0A0A0B
  • sideBarSectionHeader.background#F6F7F980
  • sideBarSectionHeader.foreground#0A0A0B
  • sideBarTitle.foreground#253E93
  • statusBar.background#FBFAF3
  • statusBar.border#00000015
  • statusBar.foreground#0A0A0B
  • statusBar.noFolderBackground#FBFAF3
  • tab.activeBackground#FBFAF3
  • tab.activeBorderTop#253E93
  • tab.activeForeground#0A0A0B
  • tab.border#00000015
  • tab.inactiveBackground#FBFAF360
  • tab.inactiveForeground#0A0A0B80
  • terminal.ansiBlack#0A0A0B
  • terminal.ansiBlue#214B83
  • terminal.ansiCyan#A38B29
  • terminal.ansiGreen#253E93
  • terminal.ansiMagenta#766219
  • terminal.ansiRed#766219
  • terminal.ansiWhite#0A0A0B
  • terminal.ansiYellow#A38B29
  • terminal.background#FBFAF3
  • terminal.foreground#0A0A0B
  • titleBar.activeBackground#FBFAF3
  • titleBar.activeForeground#0A0A0B
  • titleBar.border#00000015
  • titleBar.inactiveBackground#FBFAF3
  • titleBar.inactiveForeground#0A0A0B60
  • widget.border#00000015

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#D9E4EAitalic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#214B83bold
storage.type, storage.modifier#214B83italic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#253E93
string, punctuation.definition.string, string.template, meta.template.expression#A38B29
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#766219
variable, variable.other.readwrite, variable.other.object#0A0A0B
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#0A0A0B
variable.parameter, meta.parameter#0A0A0Bdditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#0A0A0B80
keyword.operator#0A0A0B
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#A38B29bold
entity.other.inherited-class#253E93
entity.name.tag, punctuation.definition.tag#214B83
entity.other.attribute-name#253E93
meta.diff, meta.diff.header#D9E4EA
markup.deleted#766219
markup.inserted#253E93
markup.changed#A38B29
markup.heading, markup.heading.setext, punctuation.definition.heading#253E93bold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#A38B29
string.other.link.title, string.other.link.description#253E93
markup.underline.link#D9E4EAunderline
punctuation.definition.list#214B83
markup.quote, punctuation.definition.quote#D9E4EAitalic
Morphous Theme by Ameyanagi - VS Code Theme