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#fff7ea
  • activityBar.border#00000015
  • activityBar.foreground#00b8c8
  • activityBar.inactiveForeground#002b3360
  • activityBarBadge.background#00b8c8
  • activityBarBadge.foreground#fff7ea
  • button.background#00b8c8
  • button.foreground#fff7ea
  • button.hoverBackground#00b8c8dd
  • editor.background#fff7ea
  • editor.foreground#002b33
  • editor.inactiveSelectionBackground#70e1e72580
  • editor.lineHighlightBackground#f8f3e650
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#70e1e725
  • editorCursor.foreground#00b8c8
  • editorGroupHeader.tabsBackground#f8f3e6aa
  • editorLineNumber.activeForeground#00b8c8
  • editorLineNumber.foreground#b6f3f680
  • focusBorder#00b8c8
  • foreground#002b33
  • input.background#f8f3e6
  • input.border#00000015
  • input.foreground#002b33
  • input.placeholderForeground#002b3360
  • list.activeSelectionBackground#00b8c830
  • list.activeSelectionForeground#002b33
  • list.highlightForeground#00b8c8
  • list.hoverBackground#f8f3e640
  • list.hoverForeground#002b33
  • list.inactiveSelectionBackground#00b8c815
  • list.inactiveSelectionForeground#002b33
  • selection.background#70e1e725
  • sideBar.background#f8f3e6
  • sideBar.border#00000015
  • sideBar.foreground#002b33
  • sideBarSectionHeader.background#f8f3e680
  • sideBarSectionHeader.foreground#002b33
  • sideBarTitle.foreground#00b8c8
  • statusBar.background#fff7ea
  • statusBar.border#00000015
  • statusBar.foreground#002b33
  • statusBar.noFolderBackground#fff7ea
  • tab.activeBackground#fff7ea
  • tab.activeBorderTop#00b8c8
  • tab.activeForeground#002b33
  • tab.border#00000015
  • tab.inactiveBackground#fff7ea60
  • tab.inactiveForeground#002b3380
  • terminal.ansiBlack#002b33
  • terminal.ansiBlue#70e1e7
  • terminal.ansiCyan#ff7a66
  • terminal.ansiGreen#00b8c8
  • terminal.ansiMagenta#1f7a4a
  • terminal.ansiRed#1f7a4a
  • terminal.ansiWhite#002b33
  • terminal.ansiYellow#ff7a66
  • terminal.background#fff7ea
  • terminal.foreground#002b33
  • titleBar.activeBackground#fff7ea
  • titleBar.activeForeground#002b33
  • titleBar.border#00000015
  • titleBar.inactiveBackground#fff7ea
  • titleBar.inactiveForeground#002b3360
  • widget.border#00000015

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#b6f3f6italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#70e1e7bold
storage.type, storage.modifier#70e1e7italic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#00b8c8
string, punctuation.definition.string, string.template, meta.template.expression#ff7a66
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#1f7a4a
variable, variable.other.readwrite, variable.other.object#002b33
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#002b33
variable.parameter, meta.parameter#002b33dditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#002b3380
keyword.operator#002b33
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#ff7a66bold
entity.other.inherited-class#00b8c8
entity.name.tag, punctuation.definition.tag#70e1e7
entity.other.attribute-name#00b8c8
meta.diff, meta.diff.header#b6f3f6
markup.deleted#1f7a4a
markup.inserted#00b8c8
markup.changed#ff7a66
markup.heading, markup.heading.setext, punctuation.definition.heading#00b8c8bold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#ff7a66
string.other.link.title, string.other.link.description#00b8c8
markup.underline.link#b6f3f6underline
punctuation.definition.list#70e1e7
markup.quote, punctuation.definition.quote#b6f3f6italic
Morphous Theme by Ameyanagi - VS Code Theme