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#30382f
  • activityBar.border#ffffff15
  • activityBar.foreground#b8e3c2
  • activityBar.inactiveForeground#f4f7ed60
  • activityBarBadge.background#b8e3c2
  • activityBarBadge.foreground#30382f
  • button.background#b8e3c2
  • button.foreground#30382f
  • button.hoverBackground#b8e3c2dd
  • editor.background#30382f
  • editor.foreground#f4f7ed
  • editor.inactiveSelectionBackground#60745c3580
  • editor.lineHighlightBackground#22282040
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#60745c35
  • editorCursor.foreground#b8e3c2
  • editorGroupHeader.tabsBackground#30382fdd
  • editorLineNumber.activeForeground#b8e3c2
  • editorLineNumber.foreground#9aa99580
  • focusBorder#b8e3c2
  • foreground#f4f7ed
  • input.background#222820
  • input.border#ffffff15
  • input.foreground#f4f7ed
  • input.placeholderForeground#f4f7ed60
  • list.activeSelectionBackground#b8e3c230
  • list.activeSelectionForeground#f4f7ed
  • list.highlightForeground#b8e3c2
  • list.hoverBackground#22282040
  • list.hoverForeground#f4f7ed
  • list.inactiveSelectionBackground#b8e3c215
  • list.inactiveSelectionForeground#f4f7ed
  • selection.background#60745c35
  • sideBar.background#222820
  • sideBar.border#ffffff15
  • sideBar.foreground#f4f7ed
  • sideBarSectionHeader.background#30382f80
  • sideBarSectionHeader.foreground#f4f7ed
  • sideBarTitle.foreground#b8e3c2
  • statusBar.background#30382f
  • statusBar.border#ffffff15
  • statusBar.foreground#f4f7ed
  • statusBar.noFolderBackground#30382f
  • tab.activeBackground#30382f
  • tab.activeBorderTop#b8e3c2
  • tab.activeForeground#f4f7ed
  • tab.border#ffffff15
  • tab.inactiveBackground#22282060
  • tab.inactiveForeground#f4f7ed80
  • terminal.ansiBlack#30382f
  • terminal.ansiBlue#60745c
  • terminal.ansiCyan#d9f0d8
  • terminal.ansiGreen#b8e3c2
  • terminal.ansiMagenta#caa46a
  • terminal.ansiRed#caa46a
  • terminal.ansiWhite#f4f7ed
  • terminal.ansiYellow#d9f0d8
  • terminal.background#30382f
  • terminal.foreground#f4f7ed
  • titleBar.activeBackground#30382f
  • titleBar.activeForeground#f4f7ed
  • titleBar.border#ffffff15
  • titleBar.inactiveBackground#30382f
  • titleBar.inactiveForeground#f4f7ed60
  • widget.border#ffffff15

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9aa995italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#60745cbold
storage.type, storage.modifier#60745citalic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#b8e3c2—
string, punctuation.definition.string, string.template, meta.template.expression#d9f0d8—
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#caa46a—
variable, variable.other.readwrite, variable.other.object#f4f7ed—
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#f4f7ed—
variable.parameter, meta.parameter#f4f7eddditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#f4f7ed80—
keyword.operator#f4f7ed—
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#d9f0d8bold
entity.other.inherited-class#b8e3c2—
entity.name.tag, punctuation.definition.tag#60745c—
entity.other.attribute-name#b8e3c2—
meta.diff, meta.diff.header#9aa995—
markup.deleted#caa46a—
markup.inserted#b8e3c2—
markup.changed#d9f0d8—
markup.heading, markup.heading.setext, punctuation.definition.heading#b8e3c2bold
markup.bold—bold
markup.italic—italic
markup.inline.raw, markup.raw.block#d9f0d8—
string.other.link.title, string.other.link.description#b8e3c2—
markup.underline.link#9aa995underline
punctuation.definition.list#60745c—
markup.quote, punctuation.definition.quote#9aa995italic