Skip to main content
Coding Theme

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#111111
  • activityBar.foreground#dadada
  • activityBarBadge.background#66be84
  • activityBarBadge.foreground#252526
  • badge.background#66be84
  • badge.foreground#252526
  • editor.background#121212
  • editor.findMatchBackground#414141
  • editor.findMatchBorder#414141
  • editor.findMatchHighlightBackground#242424
  • editor.findMatchHighlightBorder#000000
  • editor.foreground#b3b3b3
  • editor.lineHighlightBackground#292929
  • editor.lineHighlightBorder#2c2c2c
  • editor.selectionHighlightBackground#000000
  • editor.wordHighlightBackground#414141
  • editorBracketMatch.background#343434
  • editorBracketMatch.border#343434
  • editorError.foreground#da6a48
  • editorLineNumber.activeForeground#ffffff
  • input.foreground#CCCCCC
  • input.placeholderForeground#CCCCCC
  • list.activeSelectionBackground#8450c7
  • list.focusOutline#252526
  • list.inactiveSelectionBackground#1f1f1f
  • panel.background#3a3636
  • panel.border#343434
  • panelSectionHeader.background#5f5f5f
  • panelSectionHeader.foreground#cccccc
  • panelTitle.inactiveForeground#999999
  • settings.numberInputForeground#CCCCCC
  • sideBar.background#1C1C1C
  • sideBar.foreground#b3b3b3
  • sideBarSectionHeader.background#2d2d2d
  • sideBarTitle.foreground#ffffff
  • statusBar.background#222222
  • statusBar.border#343434
  • statusBar.debuggingBackground#8450c7
  • statusBar.noFolderBackground#4C4C4C
  • tab.activeBorderTop#66be84
  • terminal.ansiBlack#282a36
  • terminal.ansiBlue#57c7ff
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#57c7ff
  • terminal.ansiBrightCyan#9aedfe
  • terminal.ansiBrightGreen#66be84
  • terminal.ansiBrightMagenta#ff6ac1
  • terminal.ansiBrightRed#ff5c57
  • terminal.ansiBrightWhite#eff0eb
  • terminal.ansiBrightYellow#f3f99d
  • terminal.ansiCyan#9aedfe
  • terminal.ansiGreen#66be84
  • terminal.ansiMagenta#ff6ac1
  • terminal.ansiRed#ff5c57
  • terminal.ansiWhite#f1f1f0
  • terminal.ansiYellow#f3f99d
  • terminal.background#1C1C1C
  • terminal.foreground#CCCCCC
  • terminalCursor.background#aca59c
  • terminalCursor.foreground#aca59c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.function, meta.object-literal.keybold
variable.language.this, storage.type, entity.name.type, entity.other.attribute-name, punctuation.definition.comment, comment.block, keyword.control.default, meta.object-literal.key, variable.other.object, comment.line.double-slash, punctuation.definition.comment, punctuation.definition, punctuation.support, variable.other.readwrite, punctuation.support.type.property-name.begin, punctuation.definition.block.tag, comment.line.number-sign, constant.language.nullitalic
string.template.js.jsxunderline
storage.modifier, constant.language.booleanitalic bold
entity.name.tag, support.type.property-name, entity.name.function, punctuation.definition.heading.markdown, entity.name.type, support.function.builtin#789ad8
entity.other.attribute-name, meta.tag.attributes#b47abe
meta.tag.attributes, constant.language.boolean, constant.language.null, meta.tag.without-attributes#ebf2ec
string.quoted.single, string.quoted.double, variable.other.object.property, variable.other.property#dadada
comment.line.double-slash, punctuation.definition.comment, comment.block, punctuation.definition, punctuation.support, variable.other.readwrite, punctuation.support.type.property-name.begin, punctuation.definition.block.tag, comment.line.number-sign#6d6d6d
keyword.control.import, keyword.control.flow, keyword.other.special-method, support.constant.property-value, keyword.other.using, keyword.other.package, meta.import, keyword.operator.arithmetic, storage.type.function.arrow, keyword.operator.comparison, keyword.operator.increment-decrement, keyword.operator.relational, markup.fenced_code.block, keyword.operator.assignment, punctuation.separator, meta.link.inline.markdown, variable.language.this#c77056
support.type.property-name, variable.parameter, meta.object-literal.key, storage.type, support.type.property-name, keyword.other.get, keyword.other.set#b994fa
punctuation.definition.block, punctuation.section.embedded.end, punctuation.section.embedded.begin, support.variable.property, variable.other.readwrite, variable.other.constant, entity.name.type.alias.ts, meta.method-call#e9c076
punctuation.definition.variable.less, variable.parameter.js.jsx, variable.other.less, variable.scss, keyword.type, entity.name.type.namespace, variable.other.readwrite.alias, variable.other.object#70b6aa
punctuation.definition.keyword.scss, keyword.control.at-rule.mixin.scss, keyword.control.at-rule.include.scss, support.constant.handlebars, storage.modifier, constant.language.boolean#66be84
Phillow Dark by Phil Ecker - VS Code Theme