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#f2f5f9
  • activityBar.border#ffffff15
  • activityBar.foreground#d8b14a
  • activityBar.inactiveForeground#f7f9fc60
  • activityBarBadge.background#d8b14a
  • activityBarBadge.foreground#f2f5f9
  • button.background#d8b14a
  • button.foreground#f2f5f9
  • button.hoverBackground#d8b14add
  • editor.background#f2f5f9
  • editor.foreground#f7f9fc
  • editor.inactiveSelectionBackground#f0c97a3580
  • editor.lineHighlightBackground#0e1a2440
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#f0c97a35
  • editorCursor.foreground#d8b14a
  • editorGroupHeader.tabsBackground#f2f5f9dd
  • editorLineNumber.activeForeground#d8b14a
  • editorLineNumber.foreground#a6b1b780
  • focusBorder#d8b14a
  • foreground#f7f9fc
  • input.background#0e1a24
  • input.border#ffffff15
  • input.foreground#f7f9fc
  • input.placeholderForeground#f7f9fc60
  • list.activeSelectionBackground#d8b14a30
  • list.activeSelectionForeground#f7f9fc
  • list.highlightForeground#d8b14a
  • list.hoverBackground#0e1a2440
  • list.hoverForeground#f7f9fc
  • list.inactiveSelectionBackground#d8b14a15
  • list.inactiveSelectionForeground#f7f9fc
  • selection.background#f0c97a35
  • sideBar.background#0e1a24
  • sideBar.border#ffffff15
  • sideBar.foreground#f7f9fc
  • sideBarSectionHeader.background#f2f5f980
  • sideBarSectionHeader.foreground#f7f9fc
  • sideBarTitle.foreground#d8b14a
  • statusBar.background#f2f5f9
  • statusBar.border#ffffff15
  • statusBar.foreground#f7f9fc
  • statusBar.noFolderBackground#f2f5f9
  • tab.activeBackground#f2f5f9
  • tab.activeBorderTop#d8b14a
  • tab.activeForeground#f7f9fc
  • tab.border#ffffff15
  • tab.inactiveBackground#0e1a2460
  • tab.inactiveForeground#f7f9fc80
  • terminal.ansiBlack#f2f5f9
  • terminal.ansiBlue#f0c97a
  • terminal.ansiCyan#5f86a8
  • terminal.ansiGreen#d8b14a
  • terminal.ansiMagenta#7fa0a8
  • terminal.ansiRed#7fa0a8
  • terminal.ansiWhite#f7f9fc
  • terminal.ansiYellow#5f86a8
  • terminal.background#f2f5f9
  • terminal.foreground#f7f9fc
  • titleBar.activeBackground#f2f5f9
  • titleBar.activeForeground#f7f9fc
  • titleBar.border#ffffff15
  • titleBar.inactiveBackground#f2f5f9
  • titleBar.inactiveForeground#f7f9fc60
  • widget.border#ffffff15

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#a6b1b7italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#f0c97abold
storage.type, storage.modifier#f0c97aitalic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#d8b14a
string, punctuation.definition.string, string.template, meta.template.expression#5f86a8
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#7fa0a8
variable, variable.other.readwrite, variable.other.object#f7f9fc
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#f7f9fc
variable.parameter, meta.parameter#f7f9fcdditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#f7f9fc80
keyword.operator#f7f9fc
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#5f86a8bold
entity.other.inherited-class#d8b14a
entity.name.tag, punctuation.definition.tag#f0c97a
entity.other.attribute-name#d8b14a
meta.diff, meta.diff.header#a6b1b7
markup.deleted#7fa0a8
markup.inserted#d8b14a
markup.changed#5f86a8
markup.heading, markup.heading.setext, punctuation.definition.heading#d8b14abold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#5f86a8
string.other.link.title, string.other.link.description#d8b14a
markup.underline.link#a6b1b7underline
punctuation.definition.list#f0c97a
markup.quote, punctuation.definition.quote#a6b1b7italic