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#FBFCFE
  • activityBar.border#00000015
  • activityBar.foreground#257B93
  • activityBar.inactiveForeground#1f2a3760
  • activityBarBadge.background#257B93
  • activityBarBadge.foreground#FBFCFE
  • button.background#257B93
  • button.foreground#FBFCFE
  • button.hoverBackground#257B93dd
  • editor.background#FBFCFE
  • editor.foreground#1f2a37
  • editor.inactiveSelectionBackground#215D832580
  • editor.lineHighlightBackground#F7F7F750
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#215D8325
  • editorCursor.foreground#257B93
  • editorGroupHeader.tabsBackground#F7F7F7aa
  • editorLineNumber.activeForeground#257B93
  • editorLineNumber.foreground#f0f4f880
  • focusBorder#257B93
  • foreground#1f2a37
  • input.background#F7F7F7
  • input.border#00000015
  • input.foreground#1f2a37
  • input.placeholderForeground#1f2a3760
  • list.activeSelectionBackground#257B9330
  • list.activeSelectionForeground#1f2a37
  • list.highlightForeground#257B93
  • list.hoverBackground#F7F7F740
  • list.hoverForeground#1f2a37
  • list.inactiveSelectionBackground#257B9315
  • list.inactiveSelectionForeground#1f2a37
  • selection.background#215D8325
  • sideBar.background#F7F7F7
  • sideBar.border#00000015
  • sideBar.foreground#1f2a37
  • sideBarSectionHeader.background#F7F7F780
  • sideBarSectionHeader.foreground#1f2a37
  • sideBarTitle.foreground#257B93
  • statusBar.background#FBFCFE
  • statusBar.border#00000015
  • statusBar.foreground#1f2a37
  • statusBar.noFolderBackground#FBFCFE
  • tab.activeBackground#FBFCFE
  • tab.activeBorderTop#257B93
  • tab.activeForeground#1f2a37
  • tab.border#00000015
  • tab.inactiveBackground#FBFCFE60
  • tab.inactiveForeground#1f2a3780
  • terminal.ansiBlack#1f2a37
  • terminal.ansiBlue#215D83
  • terminal.ansiCyan#298BA3
  • terminal.ansiGreen#257B93
  • terminal.ansiMagenta#761919
  • terminal.ansiRed#761919
  • terminal.ansiWhite#1f2a37
  • terminal.ansiYellow#298BA3
  • terminal.background#FBFCFE
  • terminal.foreground#1f2a37
  • titleBar.activeBackground#FBFCFE
  • titleBar.activeForeground#1f2a37
  • titleBar.border#00000015
  • titleBar.inactiveBackground#FBFCFE
  • titleBar.inactiveForeground#1f2a3760
  • widget.border#00000015

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#f0f4f8italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#215D83bold
storage.type, storage.modifier#215D83italic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#257B93
string, punctuation.definition.string, string.template, meta.template.expression#298BA3
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#761919
variable, variable.other.readwrite, variable.other.object#1f2a37
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#1f2a37
variable.parameter, meta.parameter#1f2a37dditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#1f2a3780
keyword.operator#1f2a37
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#298BA3bold
entity.other.inherited-class#257B93
entity.name.tag, punctuation.definition.tag#215D83
entity.other.attribute-name#257B93
meta.diff, meta.diff.header#f0f4f8
markup.deleted#761919
markup.inserted#257B93
markup.changed#298BA3
markup.heading, markup.heading.setext, punctuation.definition.heading#257B93bold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#298BA3
string.other.link.title, string.other.link.description#257B93
markup.underline.link#f0f4f8underline
punctuation.definition.list#215D83
markup.quote, punctuation.definition.quote#f0f4f8italic
Morphous Theme by Ameyanagi - VS Code Theme