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#FFFAFA
  • activityBar.border#00000015
  • activityBar.foreground#932525
  • activityBar.inactiveForeground#2b2f3360
  • activityBarBadge.background#932525
  • activityBarBadge.foreground#FFFAFA
  • button.background#932525
  • button.foreground#FFFAFA
  • button.hoverBackground#932525dd
  • editor.background#FFFAFA
  • editor.foreground#2b2f33
  • editor.inactiveSelectionBackground#214E832580
  • editor.lineHighlightBackground#F5F5F550
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#214E8325
  • editorCursor.foreground#932525
  • editorGroupHeader.tabsBackground#F5F5F5aa
  • editorLineNumber.activeForeground#932525
  • editorLineNumber.foreground#f4f5f680
  • focusBorder#932525
  • foreground#2b2f33
  • input.background#F5F5F5
  • input.border#00000015
  • input.foreground#2b2f33
  • input.placeholderForeground#2b2f3360
  • list.activeSelectionBackground#93252530
  • list.activeSelectionForeground#2b2f33
  • list.highlightForeground#932525
  • list.hoverBackground#F5F5F540
  • list.hoverForeground#2b2f33
  • list.inactiveSelectionBackground#93252515
  • list.inactiveSelectionForeground#2b2f33
  • selection.background#214E8325
  • sideBar.background#F5F5F5
  • sideBar.border#00000015
  • sideBar.foreground#2b2f33
  • sideBarSectionHeader.background#F5F5F580
  • sideBarSectionHeader.foreground#2b2f33
  • sideBarTitle.foreground#932525
  • statusBar.background#FFFAFA
  • statusBar.border#00000015
  • statusBar.foreground#2b2f33
  • statusBar.noFolderBackground#FFFAFA
  • tab.activeBackground#FFFAFA
  • tab.activeBorderTop#932525
  • tab.activeForeground#2b2f33
  • tab.border#00000015
  • tab.inactiveBackground#FFFAFA60
  • tab.inactiveForeground#2b2f3380
  • terminal.ansiBlack#2b2f33
  • terminal.ansiBlue#214E83
  • terminal.ansiCyan#2966A3
  • terminal.ansiGreen#932525
  • terminal.ansiMagenta#764C19
  • terminal.ansiRed#764C19
  • terminal.ansiWhite#2b2f33
  • terminal.ansiYellow#2966A3
  • terminal.background#FFFAFA
  • terminal.foreground#2b2f33
  • titleBar.activeBackground#FFFAFA
  • titleBar.activeForeground#2b2f33
  • titleBar.border#00000015
  • titleBar.inactiveBackground#FFFAFA
  • titleBar.inactiveForeground#2b2f3360
  • widget.border#00000015

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#f4f5f6italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#214E83bold
storage.type, storage.modifier#214E83italic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#932525
string, punctuation.definition.string, string.template, meta.template.expression#2966A3
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#764C19
variable, variable.other.readwrite, variable.other.object#2b2f33
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#2b2f33
variable.parameter, meta.parameter#2b2f33dditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#2b2f3380
keyword.operator#2b2f33
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#2966A3bold
entity.other.inherited-class#932525
entity.name.tag, punctuation.definition.tag#214E83
entity.other.attribute-name#932525
meta.diff, meta.diff.header#f4f5f6
markup.deleted#764C19
markup.inserted#932525
markup.changed#2966A3
markup.heading, markup.heading.setext, punctuation.definition.heading#932525bold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#2966A3
string.other.link.title, string.other.link.description#932525
markup.underline.link#f4f5f6underline
punctuation.definition.list#214E83
markup.quote, punctuation.definition.quote#f4f5f6italic
Morphous Theme by Ameyanagi - VS Code Theme