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#F4F7F8
  • activityBar.border#00000015
  • activityBar.foreground#1A237E
  • activityBar.inactiveForeground#0B122060
  • activityBarBadge.background#1A237E
  • activityBarBadge.foreground#F4F7F8
  • button.background#1A237E
  • button.foreground#F4F7F8
  • button.hoverBackground#1A237Edd
  • editor.background#F4F7F8
  • editor.foreground#0B1220
  • editor.inactiveSelectionBackground#293D992580
  • editor.lineHighlightBackground#FFFFFF50
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#293D9925
  • editorCursor.foreground#1A237E
  • editorGroupHeader.tabsBackground#FFFFFFaa
  • editorLineNumber.activeForeground#1A237E
  • editorLineNumber.foreground#D8E2EC80
  • focusBorder#1A237E
  • foreground#0B1220
  • input.background#FFFFFF
  • input.border#00000015
  • input.foreground#0B1220
  • input.placeholderForeground#0B122060
  • list.activeSelectionBackground#1A237E30
  • list.activeSelectionForeground#0B1220
  • list.highlightForeground#1A237E
  • list.hoverBackground#FFFFFF40
  • list.hoverForeground#0B1220
  • list.inactiveSelectionBackground#1A237E15
  • list.inactiveSelectionForeground#0B1220
  • selection.background#293D9925
  • sideBar.background#FFFFFF
  • sideBar.border#00000015
  • sideBar.foreground#0B1220
  • sideBarSectionHeader.background#FFFFFF80
  • sideBarSectionHeader.foreground#0B1220
  • sideBarTitle.foreground#1A237E
  • statusBar.background#F4F7F8
  • statusBar.border#00000015
  • statusBar.foreground#0B1220
  • statusBar.noFolderBackground#F4F7F8
  • tab.activeBackground#F4F7F8
  • tab.activeBorderTop#1A237E
  • tab.activeForeground#0B1220
  • tab.border#00000015
  • tab.inactiveBackground#F4F7F860
  • tab.inactiveForeground#0B122080
  • terminal.ansiBlack#0B1220
  • terminal.ansiBlue#293D99
  • terminal.ansiCyan#00B8D9
  • terminal.ansiGreen#1A237E
  • terminal.ansiMagenta#22D3EE
  • terminal.ansiRed#22D3EE
  • terminal.ansiWhite#0B1220
  • terminal.ansiYellow#00B8D9
  • terminal.background#F4F7F8
  • terminal.foreground#0B1220
  • titleBar.activeBackground#F4F7F8
  • titleBar.activeForeground#0B1220
  • titleBar.border#00000015
  • titleBar.inactiveBackground#F4F7F8
  • titleBar.inactiveForeground#0B122060
  • widget.border#00000015

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#D8E2ECitalic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#293D99bold
storage.type, storage.modifier#293D99italic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#1A237E
string, punctuation.definition.string, string.template, meta.template.expression#00B8D9
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#22D3EE
variable, variable.other.readwrite, variable.other.object#0B1220
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#0B1220
variable.parameter, meta.parameter#0B1220dditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#0B122080
keyword.operator#0B1220
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#00B8D9bold
entity.other.inherited-class#1A237E
entity.name.tag, punctuation.definition.tag#293D99
entity.other.attribute-name#1A237E
meta.diff, meta.diff.header#D8E2EC
markup.deleted#22D3EE
markup.inserted#1A237E
markup.changed#00B8D9
markup.heading, markup.heading.setext, punctuation.definition.heading#1A237Ebold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#00B8D9
string.other.link.title, string.other.link.description#1A237E
markup.underline.link#D8E2ECunderline
punctuation.definition.list#293D99
markup.quote, punctuation.definition.quote#D8E2ECitalic
Morphous Theme by Ameyanagi - VS Code Theme