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#212121
  • activityBar.border#ffffff15
  • activityBar.foreground#ff007a
  • activityBar.inactiveForeground#fbfbfb60
  • activityBarBadge.background#ff007a
  • activityBarBadge.foreground#212121
  • button.background#ff007a
  • button.foreground#212121
  • button.hoverBackground#ff007add
  • editor.background#212121
  • editor.foreground#fbfbfb
  • editor.inactiveSelectionBackground#ff6aae3580
  • editor.lineHighlightBackground#11111140
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#ff6aae35
  • editorCursor.foreground#ff007a
  • editorGroupHeader.tabsBackground#212121dd
  • editorLineNumber.activeForeground#ff007a
  • editorLineNumber.foreground#ff6aae80
  • focusBorder#ff007a
  • foreground#fbfbfb
  • input.background#111111
  • input.border#ffffff15
  • input.foreground#fbfbfb
  • input.placeholderForeground#fbfbfb60
  • list.activeSelectionBackground#ff007a30
  • list.activeSelectionForeground#fbfbfb
  • list.highlightForeground#ff007a
  • list.hoverBackground#11111140
  • list.hoverForeground#fbfbfb
  • list.inactiveSelectionBackground#ff007a15
  • list.inactiveSelectionForeground#fbfbfb
  • selection.background#ff6aae35
  • sideBar.background#111111
  • sideBar.border#ffffff15
  • sideBar.foreground#fbfbfb
  • sideBarSectionHeader.background#21212180
  • sideBarSectionHeader.foreground#fbfbfb
  • sideBarTitle.foreground#ff007a
  • statusBar.background#212121
  • statusBar.border#ffffff15
  • statusBar.foreground#fbfbfb
  • statusBar.noFolderBackground#212121
  • tab.activeBackground#212121
  • tab.activeBorderTop#ff007a
  • tab.activeForeground#fbfbfb
  • tab.border#ffffff15
  • tab.inactiveBackground#11111160
  • tab.inactiveForeground#fbfbfb80
  • terminal.ansiBlack#212121
  • terminal.ansiBlue#ff6aae
  • terminal.ansiCyan#c6ff2e
  • terminal.ansiGreen#ff007a
  • terminal.ansiMagenta#d9ff6a
  • terminal.ansiRed#d9ff6a
  • terminal.ansiWhite#fbfbfb
  • terminal.ansiYellow#c6ff2e
  • terminal.background#212121
  • terminal.foreground#fbfbfb
  • titleBar.activeBackground#212121
  • titleBar.activeForeground#fbfbfb
  • titleBar.border#ffffff15
  • titleBar.inactiveBackground#212121
  • titleBar.inactiveForeground#fbfbfb60
  • widget.border#ffffff15

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#ff6aaeitalic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#ff6aaebold
storage.type, storage.modifier#ff6aaeitalic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#ff007a
string, punctuation.definition.string, string.template, meta.template.expression#c6ff2e
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#d9ff6a
variable, variable.other.readwrite, variable.other.object#fbfbfb
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#fbfbfb
variable.parameter, meta.parameter#fbfbfbdditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#fbfbfb80
keyword.operator#fbfbfb
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#c6ff2ebold
entity.other.inherited-class#ff007a
entity.name.tag, punctuation.definition.tag#ff6aae
entity.other.attribute-name#ff007a
meta.diff, meta.diff.header#ff6aae
markup.deleted#d9ff6a
markup.inserted#ff007a
markup.changed#c6ff2e
markup.heading, markup.heading.setext, punctuation.definition.heading#ff007abold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#c6ff2e
string.other.link.title, string.other.link.description#ff007a
markup.underline.link#ff6aaeunderline
punctuation.definition.list#ff6aae
markup.quote, punctuation.definition.quote#ff6aaeitalic