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.boldbold
markup.italicitalic
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