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#F7F8FA
  • activityBar.border#00000015
  • activityBar.foreground#0EA5A3
  • activityBar.inactiveForeground#0F1A1D60
  • activityBarBadge.background#0EA5A3
  • activityBarBadge.foreground#F7F8FA
  • button.background#0EA5A3
  • button.foreground#F7F8FA
  • button.hoverBackground#0EA5A3dd
  • editor.background#F7F8FA
  • editor.foreground#0F1A1D
  • editor.inactiveSelectionBackground#6ED1C52580
  • editor.lineHighlightBackground#E6E9EE50
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#6ED1C525
  • editorCursor.foreground#0EA5A3
  • editorGroupHeader.tabsBackground#E6E9EEaa
  • editorLineNumber.activeForeground#0EA5A3
  • editorLineNumber.foreground#9BA8AA80
  • focusBorder#0EA5A3
  • foreground#0F1A1D
  • input.background#E6E9EE
  • input.border#00000015
  • input.foreground#0F1A1D
  • input.placeholderForeground#0F1A1D60
  • list.activeSelectionBackground#0EA5A330
  • list.activeSelectionForeground#0F1A1D
  • list.highlightForeground#0EA5A3
  • list.hoverBackground#E6E9EE40
  • list.hoverForeground#0F1A1D
  • list.inactiveSelectionBackground#0EA5A315
  • list.inactiveSelectionForeground#0F1A1D
  • selection.background#6ED1C525
  • sideBar.background#E6E9EE
  • sideBar.border#00000015
  • sideBar.foreground#0F1A1D
  • sideBarSectionHeader.background#E6E9EE80
  • sideBarSectionHeader.foreground#0F1A1D
  • sideBarTitle.foreground#0EA5A3
  • statusBar.background#F7F8FA
  • statusBar.border#00000015
  • statusBar.foreground#0F1A1D
  • statusBar.noFolderBackground#F7F8FA
  • tab.activeBackground#F7F8FA
  • tab.activeBorderTop#0EA5A3
  • tab.activeForeground#0F1A1D
  • tab.border#00000015
  • tab.inactiveBackground#F7F8FA60
  • tab.inactiveForeground#0F1A1D80
  • terminal.ansiBlack#0F1A1D
  • terminal.ansiBlue#6ED1C5
  • terminal.ansiCyan#F4B7C3
  • terminal.ansiGreen#0EA5A3
  • terminal.ansiMagenta#FEFBF7
  • terminal.ansiRed#FEFBF7
  • terminal.ansiWhite#0F1A1D
  • terminal.ansiYellow#F4B7C3
  • terminal.background#F7F8FA
  • terminal.foreground#0F1A1D
  • titleBar.activeBackground#F7F8FA
  • titleBar.activeForeground#0F1A1D
  • titleBar.border#00000015
  • titleBar.inactiveBackground#F7F8FA
  • titleBar.inactiveForeground#0F1A1D60
  • widget.border#00000015

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9BA8AAitalic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#6ED1C5bold
storage.type, storage.modifier#6ED1C5italic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#0EA5A3
string, punctuation.definition.string, string.template, meta.template.expression#F4B7C3
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#FEFBF7
variable, variable.other.readwrite, variable.other.object#0F1A1D
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#0F1A1D
variable.parameter, meta.parameter#0F1A1Ddditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#0F1A1D80
keyword.operator#0F1A1D
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#F4B7C3bold
entity.other.inherited-class#0EA5A3
entity.name.tag, punctuation.definition.tag#6ED1C5
entity.other.attribute-name#0EA5A3
meta.diff, meta.diff.header#9BA8AA
markup.deleted#FEFBF7
markup.inserted#0EA5A3
markup.changed#F4B7C3
markup.heading, markup.heading.setext, punctuation.definition.heading#0EA5A3bold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#F4B7C3
string.other.link.title, string.other.link.description#0EA5A3
markup.underline.link#9BA8AAunderline
punctuation.definition.list#6ED1C5
markup.quote, punctuation.definition.quote#9BA8AAitalic
Morphous Theme by Ameyanagi - VS Code Theme