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#27424B
  • activityBar.border#ffffff15
  • activityBar.foreground#4EA096
  • activityBar.inactiveForeground#F7FAFA60
  • activityBarBadge.background#4EA096
  • activityBarBadge.foreground#27424B
  • button.background#4EA096
  • button.foreground#27424B
  • button.hoverBackground#4EA096dd
  • editor.background#27424B
  • editor.foreground#F7FAFA
  • editor.inactiveSelectionBackground#D2D7DB3580
  • editor.lineHighlightBackground#1A2B2F40
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#D2D7DB35
  • editorCursor.foreground#4EA096
  • editorGroupHeader.tabsBackground#27424Bdd
  • editorLineNumber.activeForeground#4EA096
  • editorLineNumber.foreground#B8C3C780
  • focusBorder#4EA096
  • foreground#F7FAFA
  • input.background#1A2B2F
  • input.border#ffffff15
  • input.foreground#F7FAFA
  • input.placeholderForeground#F7FAFA60
  • list.activeSelectionBackground#4EA09630
  • list.activeSelectionForeground#F7FAFA
  • list.highlightForeground#4EA096
  • list.hoverBackground#1A2B2F40
  • list.hoverForeground#F7FAFA
  • list.inactiveSelectionBackground#4EA09615
  • list.inactiveSelectionForeground#F7FAFA
  • selection.background#D2D7DB35
  • sideBar.background#1A2B2F
  • sideBar.border#ffffff15
  • sideBar.foreground#F7FAFA
  • sideBarSectionHeader.background#27424B80
  • sideBarSectionHeader.foreground#F7FAFA
  • sideBarTitle.foreground#4EA096
  • statusBar.background#27424B
  • statusBar.border#ffffff15
  • statusBar.foreground#F7FAFA
  • statusBar.noFolderBackground#27424B
  • tab.activeBackground#27424B
  • tab.activeBorderTop#4EA096
  • tab.activeForeground#F7FAFA
  • tab.border#ffffff15
  • tab.inactiveBackground#1A2B2F60
  • tab.inactiveForeground#F7FAFA80
  • terminal.ansiBlack#27424B
  • terminal.ansiBlue#D2D7DB
  • terminal.ansiCyan#7FB7B0
  • terminal.ansiGreen#4EA096
  • terminal.ansiMagenta#E76D63
  • terminal.ansiRed#E76D63
  • terminal.ansiWhite#F7FAFA
  • terminal.ansiYellow#7FB7B0
  • terminal.background#27424B
  • terminal.foreground#F7FAFA
  • titleBar.activeBackground#27424B
  • titleBar.activeForeground#F7FAFA
  • titleBar.border#ffffff15
  • titleBar.inactiveBackground#27424B
  • titleBar.inactiveForeground#F7FAFA60
  • widget.border#ffffff15

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#B8C3C7italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#D2D7DBbold
storage.type, storage.modifier#D2D7DBitalic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#4EA096
string, punctuation.definition.string, string.template, meta.template.expression#7FB7B0
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#E76D63
variable, variable.other.readwrite, variable.other.object#F7FAFA
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#F7FAFA
variable.parameter, meta.parameter#F7FAFAdditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#F7FAFA80
keyword.operator#F7FAFA
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#7FB7B0bold
entity.other.inherited-class#4EA096
entity.name.tag, punctuation.definition.tag#D2D7DB
entity.other.attribute-name#4EA096
meta.diff, meta.diff.header#B8C3C7
markup.deleted#E76D63
markup.inserted#4EA096
markup.changed#7FB7B0
markup.heading, markup.heading.setext, punctuation.definition.heading#4EA096bold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#7FB7B0
string.other.link.title, string.other.link.description#4EA096
markup.underline.link#B8C3C7underline
punctuation.definition.list#D2D7DB
markup.quote, punctuation.definition.quote#B8C3C7italic
Morphous Theme by Ameyanagi - VS Code Theme