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#f7f9fc
  • activityBar.border#00000015
  • activityBar.foreground#0f4ca8
  • activityBar.inactiveForeground#10131a60
  • activityBarBadge.background#0f4ca8
  • activityBarBadge.foreground#f7f9fc
  • button.background#0f4ca8
  • button.foreground#f7f9fc
  • button.hoverBackground#0f4ca8dd
  • editor.background#f7f9fc
  • editor.foreground#10131a
  • editor.inactiveSelectionBackground#a8b2c02580
  • editor.lineHighlightBackground#e8f0f850
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#a8b2c025
  • editorCursor.foreground#0f4ca8
  • editorGroupHeader.tabsBackground#e8f0f8aa
  • editorLineNumber.activeForeground#0f4ca8
  • editorLineNumber.foreground#c6ced880
  • focusBorder#0f4ca8
  • foreground#10131a
  • input.background#e8f0f8
  • input.border#00000015
  • input.foreground#10131a
  • input.placeholderForeground#10131a60
  • list.activeSelectionBackground#0f4ca830
  • list.activeSelectionForeground#10131a
  • list.highlightForeground#0f4ca8
  • list.hoverBackground#e8f0f840
  • list.hoverForeground#10131a
  • list.inactiveSelectionBackground#0f4ca815
  • list.inactiveSelectionForeground#10131a
  • selection.background#a8b2c025
  • sideBar.background#e8f0f8
  • sideBar.border#00000015
  • sideBar.foreground#10131a
  • sideBarSectionHeader.background#e8f0f880
  • sideBarSectionHeader.foreground#10131a
  • sideBarTitle.foreground#0f4ca8
  • statusBar.background#f7f9fc
  • statusBar.border#00000015
  • statusBar.foreground#10131a
  • statusBar.noFolderBackground#f7f9fc
  • tab.activeBackground#f7f9fc
  • tab.activeBorderTop#0f4ca8
  • tab.activeForeground#10131a
  • tab.border#00000015
  • tab.inactiveBackground#f7f9fc60
  • tab.inactiveForeground#10131a80
  • terminal.ansiBlack#10131a
  • terminal.ansiBlue#a8b2c0
  • terminal.ansiCyan#66b8ff
  • terminal.ansiGreen#0f4ca8
  • terminal.ansiMagenta#4a5568
  • terminal.ansiRed#4a5568
  • terminal.ansiWhite#10131a
  • terminal.ansiYellow#66b8ff
  • terminal.background#f7f9fc
  • terminal.foreground#10131a
  • titleBar.activeBackground#f7f9fc
  • titleBar.activeForeground#10131a
  • titleBar.border#00000015
  • titleBar.inactiveBackground#f7f9fc
  • titleBar.inactiveForeground#10131a60
  • widget.border#00000015

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#c6ced8italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#a8b2c0bold
storage.type, storage.modifier#a8b2c0italic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#0f4ca8
string, punctuation.definition.string, string.template, meta.template.expression#66b8ff
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#4a5568
variable, variable.other.readwrite, variable.other.object#10131a
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#10131a
variable.parameter, meta.parameter#10131additalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#10131a80
keyword.operator#10131a
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#66b8ffbold
entity.other.inherited-class#0f4ca8
entity.name.tag, punctuation.definition.tag#a8b2c0
entity.other.attribute-name#0f4ca8
meta.diff, meta.diff.header#c6ced8
markup.deleted#4a5568
markup.inserted#0f4ca8
markup.changed#66b8ff
markup.heading, markup.heading.setext, punctuation.definition.heading#0f4ca8bold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#66b8ff
string.other.link.title, string.other.link.description#0f4ca8
markup.underline.link#c6ced8underline
punctuation.definition.list#a8b2c0
markup.quote, punctuation.definition.quote#c6ced8italic
Morphous Theme by Ameyanagi - VS Code Theme