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#34383d
  • activityBar.border#ffffff15
  • activityBar.foreground#181b20
  • activityBar.inactiveForeground#f7f4ef60
  • activityBarBadge.background#181b20
  • activityBarBadge.foreground#34383d
  • button.background#181b20
  • button.foreground#34383d
  • button.hoverBackground#181b20dd
  • editor.background#34383d
  • editor.foreground#f7f4ef
  • editor.inactiveSelectionBackground#f1ede43580
  • editor.lineHighlightBackground#0f111440
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#f1ede435
  • editorCursor.foreground#181b20
  • editorGroupHeader.tabsBackground#34383ddd
  • editorLineNumber.activeForeground#181b20
  • editorLineNumber.foreground#9aa0a380
  • focusBorder#181b20
  • foreground#f7f4ef
  • input.background#0f1114
  • input.border#ffffff15
  • input.foreground#f7f4ef
  • input.placeholderForeground#f7f4ef60
  • list.activeSelectionBackground#181b2030
  • list.activeSelectionForeground#f7f4ef
  • list.highlightForeground#181b20
  • list.hoverBackground#0f111440
  • list.hoverForeground#f7f4ef
  • list.inactiveSelectionBackground#181b2015
  • list.inactiveSelectionForeground#f7f4ef
  • selection.background#f1ede435
  • sideBar.background#0f1114
  • sideBar.border#ffffff15
  • sideBar.foreground#f7f4ef
  • sideBarSectionHeader.background#34383d80
  • sideBarSectionHeader.foreground#f7f4ef
  • sideBarTitle.foreground#181b20
  • statusBar.background#34383d
  • statusBar.border#ffffff15
  • statusBar.foreground#f7f4ef
  • statusBar.noFolderBackground#34383d
  • tab.activeBackground#34383d
  • tab.activeBorderTop#181b20
  • tab.activeForeground#f7f4ef
  • tab.border#ffffff15
  • tab.inactiveBackground#0f111460
  • tab.inactiveForeground#f7f4ef80
  • terminal.ansiBlack#34383d
  • terminal.ansiBlue#f1ede4
  • terminal.ansiCyan#d8d8d2
  • terminal.ansiGreen#181b20
  • terminal.ansiMagenta#34383d
  • terminal.ansiRed#34383d
  • terminal.ansiWhite#f7f4ef
  • terminal.ansiYellow#d8d8d2
  • terminal.background#34383d
  • terminal.foreground#f7f4ef
  • titleBar.activeBackground#34383d
  • titleBar.activeForeground#f7f4ef
  • titleBar.border#ffffff15
  • titleBar.inactiveBackground#34383d
  • titleBar.inactiveForeground#f7f4ef60
  • widget.border#ffffff15

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9aa0a3italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#f1ede4bold
storage.type, storage.modifier#f1ede4italic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#181b20
string, punctuation.definition.string, string.template, meta.template.expression#d8d8d2
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#34383d
variable, variable.other.readwrite, variable.other.object#f7f4ef
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#f7f4ef
variable.parameter, meta.parameter#f7f4efdditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#f7f4ef80
keyword.operator#f7f4ef
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#d8d8d2bold
entity.other.inherited-class#181b20
entity.name.tag, punctuation.definition.tag#f1ede4
entity.other.attribute-name#181b20
meta.diff, meta.diff.header#9aa0a3
markup.deleted#34383d
markup.inserted#181b20
markup.changed#d8d8d2
markup.heading, markup.heading.setext, punctuation.definition.heading#181b20bold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#d8d8d2
string.other.link.title, string.other.link.description#181b20
markup.underline.link#9aa0a3underline
punctuation.definition.list#f1ede4
markup.quote, punctuation.definition.quote#9aa0a3italic