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#f8faf7
  • activityBar.border#00000015
  • activityBar.foreground#2f80ed
  • activityBar.inactiveForeground#25303360
  • activityBarBadge.background#2f80ed
  • activityBarBadge.foreground#f8faf7
  • button.background#2f80ed
  • button.foreground#f8faf7
  • button.hoverBackground#2f80eddd
  • editor.background#f8faf7
  • editor.foreground#253033
  • editor.inactiveSelectionBackground#4f9f582580
  • editor.lineHighlightBackground#dfe5e550
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#4f9f5825
  • editorCursor.foreground#2f80ed
  • editorGroupHeader.tabsBackground#dfe5e5aa
  • editorLineNumber.activeForeground#2f80ed
  • editorLineNumber.foreground#a7b1b280
  • focusBorder#2f80ed
  • foreground#253033
  • input.background#dfe5e5
  • input.border#00000015
  • input.foreground#253033
  • input.placeholderForeground#25303360
  • list.activeSelectionBackground#2f80ed30
  • list.activeSelectionForeground#253033
  • list.highlightForeground#2f80ed
  • list.hoverBackground#dfe5e540
  • list.hoverForeground#253033
  • list.inactiveSelectionBackground#2f80ed15
  • list.inactiveSelectionForeground#253033
  • selection.background#4f9f5825
  • sideBar.background#dfe5e5
  • sideBar.border#00000015
  • sideBar.foreground#253033
  • sideBarSectionHeader.background#dfe5e580
  • sideBarSectionHeader.foreground#253033
  • sideBarTitle.foreground#2f80ed
  • statusBar.background#f8faf7
  • statusBar.border#00000015
  • statusBar.foreground#253033
  • statusBar.noFolderBackground#f8faf7
  • tab.activeBackground#f8faf7
  • tab.activeBorderTop#2f80ed
  • tab.activeForeground#253033
  • tab.border#00000015
  • tab.inactiveBackground#f8faf760
  • tab.inactiveForeground#25303380
  • terminal.ansiBlack#253033
  • terminal.ansiBlue#4f9f58
  • terminal.ansiCyan#f2c94c
  • terminal.ansiGreen#2f80ed
  • terminal.ansiMagenta#eb5757
  • terminal.ansiRed#eb5757
  • terminal.ansiWhite#253033
  • terminal.ansiYellow#f2c94c
  • terminal.background#f8faf7
  • terminal.foreground#253033
  • titleBar.activeBackground#f8faf7
  • titleBar.activeForeground#253033
  • titleBar.border#00000015
  • titleBar.inactiveBackground#f8faf7
  • titleBar.inactiveForeground#25303360
  • widget.border#00000015

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#a7b1b2italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#4f9f58bold
storage.type, storage.modifier#4f9f58italic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#2f80ed
string, punctuation.definition.string, string.template, meta.template.expression#f2c94c
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#eb5757
variable, variable.other.readwrite, variable.other.object#253033
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#253033
variable.parameter, meta.parameter#253033dditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#25303380
keyword.operator#253033
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#f2c94cbold
entity.other.inherited-class#2f80ed
entity.name.tag, punctuation.definition.tag#4f9f58
entity.other.attribute-name#2f80ed
meta.diff, meta.diff.header#a7b1b2
markup.deleted#eb5757
markup.inserted#2f80ed
markup.changed#f2c94c
markup.heading, markup.heading.setext, punctuation.definition.heading#2f80edbold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#f2c94c
string.other.link.title, string.other.link.description#2f80ed
markup.underline.link#a7b1b2underline
punctuation.definition.list#4f9f58
markup.quote, punctuation.definition.quote#a7b1b2italic
Morphous Theme by Ameyanagi - VS Code Theme