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#f4f5f1
  • activityBar.border#00000015
  • activityBar.foreground#2b2f2f
  • activityBar.inactiveForeground#171a1a60
  • activityBarBadge.background#2b2f2f
  • activityBarBadge.foreground#f4f5f1
  • button.background#2b2f2f
  • button.foreground#f4f5f1
  • button.hoverBackground#2b2f2fdd
  • editor.background#f4f5f1
  • editor.foreground#171a1a
  • editor.inactiveSelectionBackground#d9ddd92580
  • editor.lineHighlightBackground#727a7850
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#d9ddd925
  • editorCursor.foreground#2b2f2f
  • editorGroupHeader.tabsBackground#727a78aa
  • editorLineNumber.activeForeground#2b2f2f
  • editorLineNumber.foreground#d9ddd980
  • focusBorder#2b2f2f
  • foreground#171a1a
  • input.background#727a78
  • input.border#00000015
  • input.foreground#171a1a
  • input.placeholderForeground#171a1a60
  • list.activeSelectionBackground#2b2f2f30
  • list.activeSelectionForeground#171a1a
  • list.highlightForeground#2b2f2f
  • list.hoverBackground#727a7840
  • list.hoverForeground#171a1a
  • list.inactiveSelectionBackground#2b2f2f15
  • list.inactiveSelectionForeground#171a1a
  • selection.background#d9ddd925
  • sideBar.background#727a78
  • sideBar.border#00000015
  • sideBar.foreground#171a1a
  • sideBarSectionHeader.background#727a7880
  • sideBarSectionHeader.foreground#171a1a
  • sideBarTitle.foreground#2b2f2f
  • statusBar.background#f4f5f1
  • statusBar.border#00000015
  • statusBar.foreground#171a1a
  • statusBar.noFolderBackground#f4f5f1
  • tab.activeBackground#f4f5f1
  • tab.activeBorderTop#2b2f2f
  • tab.activeForeground#171a1a
  • tab.border#00000015
  • tab.inactiveBackground#f4f5f160
  • tab.inactiveForeground#171a1a80
  • terminal.ansiBlack#171a1a
  • terminal.ansiBlue#d9ddd9
  • terminal.ansiCyan#1f4a36
  • terminal.ansiGreen#2b2f2f
  • terminal.ansiMagenta#55745c
  • terminal.ansiRed#55745c
  • terminal.ansiWhite#171a1a
  • terminal.ansiYellow#1f4a36
  • terminal.background#f4f5f1
  • terminal.foreground#171a1a
  • titleBar.activeBackground#f4f5f1
  • titleBar.activeForeground#171a1a
  • titleBar.border#00000015
  • titleBar.inactiveBackground#f4f5f1
  • titleBar.inactiveForeground#171a1a60
  • widget.border#00000015

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#d9ddd9italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#d9ddd9bold
storage.type, storage.modifier#d9ddd9italic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#2b2f2f
string, punctuation.definition.string, string.template, meta.template.expression#1f4a36
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#55745c
variable, variable.other.readwrite, variable.other.object#171a1a
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#171a1a
variable.parameter, meta.parameter#171a1additalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#171a1a80
keyword.operator#171a1a
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#1f4a36bold
entity.other.inherited-class#2b2f2f
entity.name.tag, punctuation.definition.tag#d9ddd9
entity.other.attribute-name#2b2f2f
meta.diff, meta.diff.header#d9ddd9
markup.deleted#55745c
markup.inserted#2b2f2f
markup.changed#1f4a36
markup.heading, markup.heading.setext, punctuation.definition.heading#2b2f2fbold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#1f4a36
string.other.link.title, string.other.link.description#2b2f2f
markup.underline.link#d9ddd9underline
punctuation.definition.list#d9ddd9
markup.quote, punctuation.definition.quote#d9ddd9italic
Morphous Theme by Ameyanagi - VS Code Theme