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#263433
  • activityBar.border#ffffff15
  • activityBar.foreground#0f8f8c
  • activityBar.inactiveForeground#f7f4ea60
  • activityBarBadge.background#0f8f8c
  • activityBarBadge.foreground#263433
  • button.background#0f8f8c
  • button.foreground#263433
  • button.hoverBackground#0f8f8cdd
  • editor.background#263433
  • editor.foreground#f7f4ea
  • editor.inactiveSelectionBackground#7bc8c03580
  • editor.lineHighlightBackground#10232240
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#7bc8c035
  • editorCursor.foreground#0f8f8c
  • editorGroupHeader.tabsBackground#263433dd
  • editorLineNumber.activeForeground#0f8f8c
  • editorLineNumber.foreground#c9d2cf80
  • focusBorder#0f8f8c
  • foreground#f7f4ea
  • input.background#102322
  • input.border#ffffff15
  • input.foreground#f7f4ea
  • input.placeholderForeground#f7f4ea60
  • list.activeSelectionBackground#0f8f8c30
  • list.activeSelectionForeground#f7f4ea
  • list.highlightForeground#0f8f8c
  • list.hoverBackground#10232240
  • list.hoverForeground#f7f4ea
  • list.inactiveSelectionBackground#0f8f8c15
  • list.inactiveSelectionForeground#f7f4ea
  • selection.background#7bc8c035
  • sideBar.background#102322
  • sideBar.border#ffffff15
  • sideBar.foreground#f7f4ea
  • sideBarSectionHeader.background#26343380
  • sideBarSectionHeader.foreground#f7f4ea
  • sideBarTitle.foreground#0f8f8c
  • statusBar.background#263433
  • statusBar.border#ffffff15
  • statusBar.foreground#f7f4ea
  • statusBar.noFolderBackground#263433
  • tab.activeBackground#263433
  • tab.activeBorderTop#0f8f8c
  • tab.activeForeground#f7f4ea
  • tab.border#ffffff15
  • tab.inactiveBackground#10232260
  • tab.inactiveForeground#f7f4ea80
  • terminal.ansiBlack#263433
  • terminal.ansiBlue#7bc8c0
  • terminal.ansiCyan#e9783d
  • terminal.ansiGreen#0f8f8c
  • terminal.ansiMagenta#6f7f3f
  • terminal.ansiRed#6f7f3f
  • terminal.ansiWhite#f7f4ea
  • terminal.ansiYellow#e9783d
  • terminal.background#263433
  • terminal.foreground#f7f4ea
  • titleBar.activeBackground#263433
  • titleBar.activeForeground#f7f4ea
  • titleBar.border#ffffff15
  • titleBar.inactiveBackground#263433
  • titleBar.inactiveForeground#f7f4ea60
  • widget.border#ffffff15

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#c9d2cfitalic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#7bc8c0bold
storage.type, storage.modifier#7bc8c0italic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#0f8f8c
string, punctuation.definition.string, string.template, meta.template.expression#e9783d
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#6f7f3f
variable, variable.other.readwrite, variable.other.object#f7f4ea
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#f7f4ea
variable.parameter, meta.parameter#f7f4eadditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#f7f4ea80
keyword.operator#f7f4ea
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#e9783dbold
entity.other.inherited-class#0f8f8c
entity.name.tag, punctuation.definition.tag#7bc8c0
entity.other.attribute-name#0f8f8c
meta.diff, meta.diff.header#c9d2cf
markup.deleted#6f7f3f
markup.inserted#0f8f8c
markup.changed#e9783d
markup.heading, markup.heading.setext, punctuation.definition.heading#0f8f8cbold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#e9783d
string.other.link.title, string.other.link.description#0f8f8c
markup.underline.link#c9d2cfunderline
punctuation.definition.list#7bc8c0
markup.quote, punctuation.definition.quote#c9d2cfitalic
Morphous Theme by Ameyanagi - VS Code Theme