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#f2f4f6
  • activityBar.border#00000015
  • activityBar.foreground#1a1d21
  • activityBar.inactiveForeground#0d0f1260
  • activityBarBadge.background#1a1d21
  • activityBarBadge.foreground#f2f4f6
  • button.background#1a1d21
  • button.foreground#f2f4f6
  • button.hoverBackground#1a1d21dd
  • editor.background#f2f4f6
  • editor.foreground#0d0f12
  • editor.inactiveSelectionBackground#3a3f462580
  • editor.lineHighlightBackground#ffffff50
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#3a3f4625
  • editorCursor.foreground#1a1d21
  • editorGroupHeader.tabsBackground#ffffffaa
  • editorLineNumber.activeForeground#1a1d21
  • editorLineNumber.foreground#6b717880
  • focusBorder#1a1d21
  • foreground#0d0f12
  • input.background#ffffff
  • input.border#00000015
  • input.foreground#0d0f12
  • input.placeholderForeground#0d0f1260
  • list.activeSelectionBackground#1a1d2130
  • list.activeSelectionForeground#0d0f12
  • list.highlightForeground#1a1d21
  • list.hoverBackground#ffffff40
  • list.hoverForeground#0d0f12
  • list.inactiveSelectionBackground#1a1d2115
  • list.inactiveSelectionForeground#0d0f12
  • selection.background#3a3f4625
  • sideBar.background#ffffff
  • sideBar.border#00000015
  • sideBar.foreground#0d0f12
  • sideBarSectionHeader.background#ffffff80
  • sideBarSectionHeader.foreground#0d0f12
  • sideBarTitle.foreground#1a1d21
  • statusBar.background#f2f4f6
  • statusBar.border#00000015
  • statusBar.foreground#0d0f12
  • statusBar.noFolderBackground#f2f4f6
  • tab.activeBackground#f2f4f6
  • tab.activeBorderTop#1a1d21
  • tab.activeForeground#0d0f12
  • tab.border#00000015
  • tab.inactiveBackground#f2f4f660
  • tab.inactiveForeground#0d0f1280
  • terminal.ansiBlack#0d0f12
  • terminal.ansiBlue#3a3f46
  • terminal.ansiCyan#182633
  • terminal.ansiGreen#1a1d21
  • terminal.ansiMagenta#d97706
  • terminal.ansiRed#d97706
  • terminal.ansiWhite#0d0f12
  • terminal.ansiYellow#182633
  • terminal.background#f2f4f6
  • terminal.foreground#0d0f12
  • titleBar.activeBackground#f2f4f6
  • titleBar.activeForeground#0d0f12
  • titleBar.border#00000015
  • titleBar.inactiveBackground#f2f4f6
  • titleBar.inactiveForeground#0d0f1260
  • widget.border#00000015

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6b7178italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#3a3f46bold
storage.type, storage.modifier#3a3f46italic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#1a1d21
string, punctuation.definition.string, string.template, meta.template.expression#182633
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#d97706
variable, variable.other.readwrite, variable.other.object#0d0f12
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#0d0f12
variable.parameter, meta.parameter#0d0f12dditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#0d0f1280
keyword.operator#0d0f12
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#182633bold
entity.other.inherited-class#1a1d21
entity.name.tag, punctuation.definition.tag#3a3f46
entity.other.attribute-name#1a1d21
meta.diff, meta.diff.header#6b7178
markup.deleted#d97706
markup.inserted#1a1d21
markup.changed#182633
markup.heading, markup.heading.setext, punctuation.definition.heading#1a1d21bold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#182633
string.other.link.title, string.other.link.description#1a1d21
markup.underline.link#6b7178underline
punctuation.definition.list#3a3f46
markup.quote, punctuation.definition.quote#6b7178italic
Morphous Theme by Ameyanagi - VS Code Theme