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#f9fbff
  • activityBar.border#00000015
  • activityBar.foreground#9ac7f6
  • activityBar.inactiveForeground#0d142160
  • activityBarBadge.background#9ac7f6
  • activityBarBadge.foreground#f9fbff
  • button.background#9ac7f6
  • button.foreground#f9fbff
  • button.hoverBackground#9ac7f6dd
  • editor.background#f9fbff
  • editor.foreground#0d1421
  • editor.inactiveSelectionBackground#dbe3f32580
  • editor.lineHighlightBackground#f6f8fb50
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#dbe3f325
  • editorCursor.foreground#9ac7f6
  • editorGroupHeader.tabsBackground#f6f8fbaa
  • editorLineNumber.activeForeground#9ac7f6
  • editorLineNumber.foreground#d9dee680
  • focusBorder#9ac7f6
  • foreground#0d1421
  • input.background#f6f8fb
  • input.border#00000015
  • input.foreground#0d1421
  • input.placeholderForeground#0d142160
  • list.activeSelectionBackground#9ac7f630
  • list.activeSelectionForeground#0d1421
  • list.highlightForeground#9ac7f6
  • list.hoverBackground#f6f8fb40
  • list.hoverForeground#0d1421
  • list.inactiveSelectionBackground#9ac7f615
  • list.inactiveSelectionForeground#0d1421
  • selection.background#dbe3f325
  • sideBar.background#f6f8fb
  • sideBar.border#00000015
  • sideBar.foreground#0d1421
  • sideBarSectionHeader.background#f6f8fb80
  • sideBarSectionHeader.foreground#0d1421
  • sideBarTitle.foreground#9ac7f6
  • statusBar.background#f9fbff
  • statusBar.border#00000015
  • statusBar.foreground#0d1421
  • statusBar.noFolderBackground#f9fbff
  • tab.activeBackground#f9fbff
  • tab.activeBorderTop#9ac7f6
  • tab.activeForeground#0d1421
  • tab.border#00000015
  • tab.inactiveBackground#f9fbff60
  • tab.inactiveForeground#0d142180
  • terminal.ansiBlack#0d1421
  • terminal.ansiBlue#dbe3f3
  • terminal.ansiCyan#cfe3ff
  • terminal.ansiGreen#9ac7f6
  • terminal.ansiMagenta#6c7a8f
  • terminal.ansiRed#6c7a8f
  • terminal.ansiWhite#0d1421
  • terminal.ansiYellow#cfe3ff
  • terminal.background#f9fbff
  • terminal.foreground#0d1421
  • titleBar.activeBackground#f9fbff
  • titleBar.activeForeground#0d1421
  • titleBar.border#00000015
  • titleBar.inactiveBackground#f9fbff
  • titleBar.inactiveForeground#0d142160
  • widget.border#00000015

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#d9dee6italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#dbe3f3bold
storage.type, storage.modifier#dbe3f3italic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#9ac7f6
string, punctuation.definition.string, string.template, meta.template.expression#cfe3ff
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#6c7a8f
variable, variable.other.readwrite, variable.other.object#0d1421
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#0d1421
variable.parameter, meta.parameter#0d1421dditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#0d142180
keyword.operator#0d1421
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#cfe3ffbold
entity.other.inherited-class#9ac7f6
entity.name.tag, punctuation.definition.tag#dbe3f3
entity.other.attribute-name#9ac7f6
meta.diff, meta.diff.header#d9dee6
markup.deleted#6c7a8f
markup.inserted#9ac7f6
markup.changed#cfe3ff
markup.heading, markup.heading.setext, punctuation.definition.heading#9ac7f6bold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#cfe3ff
string.other.link.title, string.other.link.description#9ac7f6
markup.underline.link#d9dee6underline
punctuation.definition.list#dbe3f3
markup.quote, punctuation.definition.quote#d9dee6italic
Morphous Theme by Ameyanagi - VS Code Theme