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#f2f6fa
  • activityBar.border#00000015
  • activityBar.foreground#0e3a5a
  • activityBar.inactiveForeground#08122060
  • activityBarBadge.background#0e3a5a
  • activityBarBadge.foreground#f2f6fa
  • button.background#0e3a5a
  • button.foreground#f2f6fa
  • button.hoverBackground#0e3a5add
  • editor.background#f2f6fa
  • editor.foreground#081220
  • editor.inactiveSelectionBackground#6b72802580
  • editor.lineHighlightBackground#33415550
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#6b728025
  • editorCursor.foreground#0e3a5a
  • editorGroupHeader.tabsBackground#334155aa
  • editorLineNumber.activeForeground#0e3a5a
  • editorLineNumber.foreground#6b728080
  • focusBorder#0e3a5a
  • foreground#081220
  • input.background#334155
  • input.border#00000015
  • input.foreground#081220
  • input.placeholderForeground#08122060
  • list.activeSelectionBackground#0e3a5a30
  • list.activeSelectionForeground#081220
  • list.highlightForeground#0e3a5a
  • list.hoverBackground#33415540
  • list.hoverForeground#081220
  • list.inactiveSelectionBackground#0e3a5a15
  • list.inactiveSelectionForeground#081220
  • selection.background#6b728025
  • sideBar.background#334155
  • sideBar.border#00000015
  • sideBar.foreground#081220
  • sideBarSectionHeader.background#33415580
  • sideBarSectionHeader.foreground#081220
  • sideBarTitle.foreground#0e3a5a
  • statusBar.background#f2f6fa
  • statusBar.border#00000015
  • statusBar.foreground#081220
  • statusBar.noFolderBackground#f2f6fa
  • tab.activeBackground#f2f6fa
  • tab.activeBorderTop#0e3a5a
  • tab.activeForeground#081220
  • tab.border#00000015
  • tab.inactiveBackground#f2f6fa60
  • tab.inactiveForeground#08122080
  • terminal.ansiBlack#081220
  • terminal.ansiBlue#6b7280
  • terminal.ansiCyan#e6ecf2
  • terminal.ansiGreen#0e3a5a
  • terminal.ansiMagenta#556b2f
  • terminal.ansiRed#556b2f
  • terminal.ansiWhite#081220
  • terminal.ansiYellow#e6ecf2
  • terminal.background#f2f6fa
  • terminal.foreground#081220
  • titleBar.activeBackground#f2f6fa
  • titleBar.activeForeground#081220
  • titleBar.border#00000015
  • titleBar.inactiveBackground#f2f6fa
  • titleBar.inactiveForeground#08122060
  • widget.border#00000015

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6b7280italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#6b7280bold
storage.type, storage.modifier#6b7280italic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#0e3a5a
string, punctuation.definition.string, string.template, meta.template.expression#e6ecf2
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#556b2f
variable, variable.other.readwrite, variable.other.object#081220
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#081220
variable.parameter, meta.parameter#081220dditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#08122080
keyword.operator#081220
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#e6ecf2bold
entity.other.inherited-class#0e3a5a
entity.name.tag, punctuation.definition.tag#6b7280
entity.other.attribute-name#0e3a5a
meta.diff, meta.diff.header#6b7280
markup.deleted#556b2f
markup.inserted#0e3a5a
markup.changed#e6ecf2
markup.heading, markup.heading.setext, punctuation.definition.heading#0e3a5abold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#e6ecf2
string.other.link.title, string.other.link.description#0e3a5a
markup.underline.link#6b7280underline
punctuation.definition.list#6b7280
markup.quote, punctuation.definition.quote#6b7280italic