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#FAFCFF
  • activityBar.border#00000015
  • activityBar.foreground#256793
  • activityBar.inactiveForeground#1f2b3660
  • activityBarBadge.background#256793
  • activityBarBadge.foreground#FAFCFF
  • button.background#256793
  • button.foreground#FAFCFF
  • button.hoverBackground#256793dd
  • editor.background#FAFCFF
  • editor.foreground#1f2b36
  • editor.inactiveSelectionBackground#2155832580
  • editor.lineHighlightBackground#F4F8FB50
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#21558325
  • editorCursor.foreground#256793
  • editorGroupHeader.tabsBackground#F4F8FBaa
  • editorLineNumber.activeForeground#256793
  • editorLineNumber.foreground#b9c8d480
  • focusBorder#256793
  • foreground#1f2b36
  • input.background#F4F8FB
  • input.border#00000015
  • input.foreground#1f2b36
  • input.placeholderForeground#1f2b3660
  • list.activeSelectionBackground#25679330
  • list.activeSelectionForeground#1f2b36
  • list.highlightForeground#256793
  • list.hoverBackground#F4F8FB40
  • list.hoverForeground#1f2b36
  • list.inactiveSelectionBackground#25679315
  • list.inactiveSelectionForeground#1f2b36
  • selection.background#21558325
  • sideBar.background#F4F8FB
  • sideBar.border#00000015
  • sideBar.foreground#1f2b36
  • sideBarSectionHeader.background#F4F8FB80
  • sideBarSectionHeader.foreground#1f2b36
  • sideBarTitle.foreground#256793
  • statusBar.background#FAFCFF
  • statusBar.border#00000015
  • statusBar.foreground#1f2b36
  • statusBar.noFolderBackground#FAFCFF
  • tab.activeBackground#FAFCFF
  • tab.activeBorderTop#256793
  • tab.activeForeground#1f2b36
  • tab.border#00000015
  • tab.inactiveBackground#FAFCFF60
  • tab.inactiveForeground#1f2b3680
  • terminal.ansiBlack#1f2b36
  • terminal.ansiBlue#215583
  • terminal.ansiCyan#2993A3
  • terminal.ansiGreen#256793
  • terminal.ansiMagenta#192C76
  • terminal.ansiRed#192C76
  • terminal.ansiWhite#1f2b36
  • terminal.ansiYellow#2993A3
  • terminal.background#FAFCFF
  • terminal.foreground#1f2b36
  • titleBar.activeBackground#FAFCFF
  • titleBar.activeForeground#1f2b36
  • titleBar.border#00000015
  • titleBar.inactiveBackground#FAFCFF
  • titleBar.inactiveForeground#1f2b3660
  • widget.border#00000015

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#b9c8d4italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#215583bold
storage.type, storage.modifier#215583italic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#256793
string, punctuation.definition.string, string.template, meta.template.expression#2993A3
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#192C76
variable, variable.other.readwrite, variable.other.object#1f2b36
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#1f2b36
variable.parameter, meta.parameter#1f2b36dditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#1f2b3680
keyword.operator#1f2b36
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#2993A3bold
entity.other.inherited-class#256793
entity.name.tag, punctuation.definition.tag#215583
entity.other.attribute-name#256793
meta.diff, meta.diff.header#b9c8d4
markup.deleted#192C76
markup.inserted#256793
markup.changed#2993A3
markup.heading, markup.heading.setext, punctuation.definition.heading#256793bold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#2993A3
string.other.link.title, string.other.link.description#256793
markup.underline.link#b9c8d4underline
punctuation.definition.list#215583
markup.quote, punctuation.definition.quote#b9c8d4italic
Morphous Theme by Ameyanagi - VS Code Theme