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#f7fafd
  • activityBar.border#00000015
  • activityBar.foreground#2aa7c9
  • activityBar.inactiveForeground#1f2a3760
  • activityBarBadge.background#2aa7c9
  • activityBarBadge.foreground#f7fafd
  • button.background#2aa7c9
  • button.foreground#f7fafd
  • button.hoverBackground#2aa7c9dd
  • editor.background#f7fafd
  • editor.foreground#1f2a37
  • editor.inactiveSelectionBackground#e6f1f82580
  • editor.lineHighlightBackground#ffffff50
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#e6f1f825
  • editorCursor.foreground#2aa7c9
  • editorGroupHeader.tabsBackground#ffffffaa
  • editorLineNumber.activeForeground#2aa7c9
  • editorLineNumber.foreground#f0f4f880
  • focusBorder#2aa7c9
  • foreground#1f2a37
  • input.background#ffffff
  • input.border#00000015
  • input.foreground#1f2a37
  • input.placeholderForeground#1f2a3760
  • list.activeSelectionBackground#2aa7c930
  • list.activeSelectionForeground#1f2a37
  • list.highlightForeground#2aa7c9
  • list.hoverBackground#ffffff40
  • list.hoverForeground#1f2a37
  • list.inactiveSelectionBackground#2aa7c915
  • list.inactiveSelectionForeground#1f2a37
  • selection.background#e6f1f825
  • sideBar.background#ffffff
  • sideBar.border#00000015
  • sideBar.foreground#1f2a37
  • sideBarSectionHeader.background#ffffff80
  • sideBarSectionHeader.foreground#1f2a37
  • sideBarTitle.foreground#2aa7c9
  • statusBar.background#f7fafd
  • statusBar.border#00000015
  • statusBar.foreground#1f2a37
  • statusBar.noFolderBackground#f7fafd
  • tab.activeBackground#f7fafd
  • tab.activeBorderTop#2aa7c9
  • tab.activeForeground#1f2a37
  • tab.border#00000015
  • tab.inactiveBackground#f7fafd60
  • tab.inactiveForeground#1f2a3780
  • terminal.ansiBlack#1f2a37
  • terminal.ansiBlue#e6f1f8
  • terminal.ansiCyan#8fdff2
  • terminal.ansiGreen#2aa7c9
  • terminal.ansiMagenta#ffffff
  • terminal.ansiRed#ffffff
  • terminal.ansiWhite#1f2a37
  • terminal.ansiYellow#8fdff2
  • terminal.background#f7fafd
  • terminal.foreground#1f2a37
  • titleBar.activeBackground#f7fafd
  • titleBar.activeForeground#1f2a37
  • titleBar.border#00000015
  • titleBar.inactiveBackground#f7fafd
  • titleBar.inactiveForeground#1f2a3760
  • widget.border#00000015

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#f0f4f8italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#e6f1f8bold
storage.type, storage.modifier#e6f1f8italic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#2aa7c9
string, punctuation.definition.string, string.template, meta.template.expression#8fdff2
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#ffffff
variable, variable.other.readwrite, variable.other.object#1f2a37
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#1f2a37
variable.parameter, meta.parameter#1f2a37dditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#1f2a3780
keyword.operator#1f2a37
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#8fdff2bold
entity.other.inherited-class#2aa7c9
entity.name.tag, punctuation.definition.tag#e6f1f8
entity.other.attribute-name#2aa7c9
meta.diff, meta.diff.header#f0f4f8
markup.deleted#ffffff
markup.inserted#2aa7c9
markup.changed#8fdff2
markup.heading, markup.heading.setext, punctuation.definition.heading#2aa7c9bold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#8fdff2
string.other.link.title, string.other.link.description#2aa7c9
markup.underline.link#f0f4f8underline
punctuation.definition.list#e6f1f8
markup.quote, punctuation.definition.quote#f0f4f8italic
Morphous Theme by Ameyanagi - VS Code Theme