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#182832
  • activityBar.border#ffffff15
  • activityBar.foreground#2f5367
  • activityBar.inactiveForeground#f7f8f660
  • activityBarBadge.background#2f5367
  • activityBarBadge.foreground#182832
  • button.background#2f5367
  • button.foreground#182832
  • button.hoverBackground#2f5367dd
  • editor.background#182832
  • editor.foreground#f7f8f6
  • editor.inactiveSelectionBackground#d7dee13580
  • editor.lineHighlightBackground#18283240
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#d7dee135
  • editorCursor.foreground#2f5367
  • editorGroupHeader.tabsBackground#182832dd
  • editorLineNumber.activeForeground#2f5367
  • editorLineNumber.foreground#d7dee180
  • focusBorder#2f5367
  • foreground#f7f8f6
  • input.background#182832
  • input.border#ffffff15
  • input.foreground#f7f8f6
  • input.placeholderForeground#f7f8f660
  • list.activeSelectionBackground#2f536730
  • list.activeSelectionForeground#f7f8f6
  • list.highlightForeground#2f5367
  • list.hoverBackground#18283240
  • list.hoverForeground#f7f8f6
  • list.inactiveSelectionBackground#2f536715
  • list.inactiveSelectionForeground#f7f8f6
  • selection.background#d7dee135
  • sideBar.background#182832
  • sideBar.border#ffffff15
  • sideBar.foreground#f7f8f6
  • sideBarSectionHeader.background#18283280
  • sideBarSectionHeader.foreground#f7f8f6
  • sideBarTitle.foreground#2f5367
  • statusBar.background#182832
  • statusBar.border#ffffff15
  • statusBar.foreground#f7f8f6
  • statusBar.noFolderBackground#182832
  • tab.activeBackground#182832
  • tab.activeBorderTop#2f5367
  • tab.activeForeground#f7f8f6
  • tab.border#ffffff15
  • tab.inactiveBackground#18283260
  • tab.inactiveForeground#f7f8f680
  • terminal.ansiBlack#182832
  • terminal.ansiBlue#d7dee1
  • terminal.ansiCyan#d8c6aa
  • terminal.ansiGreen#2f5367
  • terminal.ansiMagenta#5d7f94
  • terminal.ansiRed#5d7f94
  • terminal.ansiWhite#f7f8f6
  • terminal.ansiYellow#d8c6aa
  • terminal.background#182832
  • terminal.foreground#f7f8f6
  • titleBar.activeBackground#182832
  • titleBar.activeForeground#f7f8f6
  • titleBar.border#ffffff15
  • titleBar.inactiveBackground#182832
  • titleBar.inactiveForeground#f7f8f660
  • widget.border#ffffff15

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#d7dee1italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#d7dee1bold
storage.type, storage.modifier#d7dee1italic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#2f5367
string, punctuation.definition.string, string.template, meta.template.expression#d8c6aa
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#5d7f94
variable, variable.other.readwrite, variable.other.object#f7f8f6
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#f7f8f6
variable.parameter, meta.parameter#f7f8f6dditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#f7f8f680
keyword.operator#f7f8f6
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#d8c6aabold
entity.other.inherited-class#2f5367
entity.name.tag, punctuation.definition.tag#d7dee1
entity.other.attribute-name#2f5367
meta.diff, meta.diff.header#d7dee1
markup.deleted#5d7f94
markup.inserted#2f5367
markup.changed#d8c6aa
markup.heading, markup.heading.setext, punctuation.definition.heading#2f5367bold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#d8c6aa
string.other.link.title, string.other.link.description#2f5367
markup.underline.link#d7dee1underline
punctuation.definition.list#d7dee1
markup.quote, punctuation.definition.quote#d7dee1italic
Morphous Theme by Ameyanagi - VS Code Theme