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#f8f7f1
  • activityBar.border#00000015
  • activityBar.foreground#f25f45
  • activityBar.inactiveForeground#17191a60
  • activityBarBadge.background#f25f45
  • activityBarBadge.foreground#f8f7f1
  • button.background#f25f45
  • button.foreground#f8f7f1
  • button.hoverBackground#f25f45dd
  • editor.background#f8f7f1
  • editor.foreground#17191a
  • editor.inactiveSelectionBackground#f28c282580
  • editor.lineHighlightBackground#ece9df50
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#f28c2825
  • editorCursor.foreground#f25f45
  • editorGroupHeader.tabsBackground#ece9dfaa
  • editorLineNumber.activeForeground#f25f45
  • editorLineNumber.foreground#7f817b80
  • focusBorder#f25f45
  • foreground#17191a
  • input.background#ece9df
  • input.border#00000015
  • input.foreground#17191a
  • input.placeholderForeground#17191a60
  • list.activeSelectionBackground#f25f4530
  • list.activeSelectionForeground#17191a
  • list.highlightForeground#f25f45
  • list.hoverBackground#ece9df40
  • list.hoverForeground#17191a
  • list.inactiveSelectionBackground#f25f4515
  • list.inactiveSelectionForeground#17191a
  • selection.background#f28c2825
  • sideBar.background#ece9df
  • sideBar.border#00000015
  • sideBar.foreground#17191a
  • sideBarSectionHeader.background#ece9df80
  • sideBarSectionHeader.foreground#17191a
  • sideBarTitle.foreground#f25f45
  • statusBar.background#f8f7f1
  • statusBar.border#00000015
  • statusBar.foreground#17191a
  • statusBar.noFolderBackground#f8f7f1
  • tab.activeBackground#f8f7f1
  • tab.activeBorderTop#f25f45
  • tab.activeForeground#17191a
  • tab.border#00000015
  • tab.inactiveBackground#f8f7f160
  • tab.inactiveForeground#17191a80
  • terminal.ansiBlack#17191a
  • terminal.ansiBlue#f28c28
  • terminal.ansiCyan#247c9f
  • terminal.ansiGreen#f25f45
  • terminal.ansiMagenta#9bd2dc
  • terminal.ansiRed#9bd2dc
  • terminal.ansiWhite#17191a
  • terminal.ansiYellow#247c9f
  • terminal.background#f8f7f1
  • terminal.foreground#17191a
  • titleBar.activeBackground#f8f7f1
  • titleBar.activeForeground#17191a
  • titleBar.border#00000015
  • titleBar.inactiveBackground#f8f7f1
  • titleBar.inactiveForeground#17191a60
  • widget.border#00000015

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7f817bitalic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#f28c28bold
storage.type, storage.modifier#f28c28italic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#f25f45
string, punctuation.definition.string, string.template, meta.template.expression#247c9f
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#9bd2dc
variable, variable.other.readwrite, variable.other.object#17191a
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#17191a
variable.parameter, meta.parameter#17191additalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#17191a80
keyword.operator#17191a
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#247c9fbold
entity.other.inherited-class#f25f45
entity.name.tag, punctuation.definition.tag#f28c28
entity.other.attribute-name#f25f45
meta.diff, meta.diff.header#7f817b
markup.deleted#9bd2dc
markup.inserted#f25f45
markup.changed#247c9f
markup.heading, markup.heading.setext, punctuation.definition.heading#f25f45bold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#247c9f
string.other.link.title, string.other.link.description#f25f45
markup.underline.link#7f817bunderline
punctuation.definition.list#f28c28
markup.quote, punctuation.definition.quote#7f817bitalic
Morphous Theme by Ameyanagi - VS Code Theme