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#0f1624
  • activityBar.border#ffffff15
  • activityBar.foreground#9ac7f6
  • activityBar.inactiveForeground#f9fbff60
  • activityBarBadge.background#9ac7f6
  • activityBarBadge.foreground#0f1624
  • button.background#9ac7f6
  • button.foreground#0f1624
  • button.hoverBackground#9ac7f6dd
  • editor.background#0f1624
  • editor.foreground#f9fbff
  • editor.inactiveSelectionBackground#dbe3f33580
  • editor.lineHighlightBackground#0d142140
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#dbe3f335
  • editorCursor.foreground#9ac7f6
  • editorGroupHeader.tabsBackground#0f1624dd
  • editorLineNumber.activeForeground#9ac7f6
  • editorLineNumber.foreground#d9dee680
  • focusBorder#9ac7f6
  • foreground#f9fbff
  • input.background#0d1421
  • input.border#ffffff15
  • input.foreground#f9fbff
  • input.placeholderForeground#f9fbff60
  • list.activeSelectionBackground#9ac7f630
  • list.activeSelectionForeground#f9fbff
  • list.highlightForeground#9ac7f6
  • list.hoverBackground#0d142140
  • list.hoverForeground#f9fbff
  • list.inactiveSelectionBackground#9ac7f615
  • list.inactiveSelectionForeground#f9fbff
  • selection.background#dbe3f335
  • sideBar.background#0d1421
  • sideBar.border#ffffff15
  • sideBar.foreground#f9fbff
  • sideBarSectionHeader.background#0f162480
  • sideBarSectionHeader.foreground#f9fbff
  • sideBarTitle.foreground#9ac7f6
  • statusBar.background#0f1624
  • statusBar.border#ffffff15
  • statusBar.foreground#f9fbff
  • statusBar.noFolderBackground#0f1624
  • tab.activeBackground#0f1624
  • tab.activeBorderTop#9ac7f6
  • tab.activeForeground#f9fbff
  • tab.border#ffffff15
  • tab.inactiveBackground#0d142160
  • tab.inactiveForeground#f9fbff80
  • terminal.ansiBlack#0f1624
  • terminal.ansiBlue#dbe3f3
  • terminal.ansiCyan#cfe3ff
  • terminal.ansiGreen#9ac7f6
  • terminal.ansiMagenta#6c7a8f
  • terminal.ansiRed#6c7a8f
  • terminal.ansiWhite#f9fbff
  • terminal.ansiYellow#cfe3ff
  • terminal.background#0f1624
  • terminal.foreground#f9fbff
  • titleBar.activeBackground#0f1624
  • titleBar.activeForeground#f9fbff
  • titleBar.border#ffffff15
  • titleBar.inactiveBackground#0f1624
  • titleBar.inactiveForeground#f9fbff60
  • widget.border#ffffff15

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#d9dee6italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#dbe3f3bold
storage.type, storage.modifier#dbe3f3italic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#9ac7f6
string, punctuation.definition.string, string.template, meta.template.expression#cfe3ff
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#6c7a8f
variable, variable.other.readwrite, variable.other.object#f9fbff
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#f9fbff
variable.parameter, meta.parameter#f9fbffdditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#f9fbff80
keyword.operator#f9fbff
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#cfe3ffbold
entity.other.inherited-class#9ac7f6
entity.name.tag, punctuation.definition.tag#dbe3f3
entity.other.attribute-name#9ac7f6
meta.diff, meta.diff.header#d9dee6
markup.deleted#6c7a8f
markup.inserted#9ac7f6
markup.changed#cfe3ff
markup.heading, markup.heading.setext, punctuation.definition.heading#9ac7f6bold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#cfe3ff
string.other.link.title, string.other.link.description#9ac7f6
markup.underline.link#d9dee6underline
punctuation.definition.list#dbe3f3
markup.quote, punctuation.definition.quote#d9dee6italic