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.activeBorder#fffac2
  • activityBar.background#09090b
  • activityBar.border#27272a
  • activityBar.foreground#fffac2
  • activityBarBadge.background#fffac2
  • activityBarBadge.foreground#000000
  • editor.background#18181b
  • editor.foreground#e4e4e7
  • editorGutter.addedBackground#4ade8033
  • editorGutter.modifiedBackground#fb923c52
  • editorLineNumber.activeForeground#3f3f46
  • editorLineNumber.foreground#09090b00
  • focusBorder#00000000
  • list.activeSelectionBackground#c084fc33
  • list.activeSelectionForeground#d4d4d8
  • list.hoverBackground#18181b
  • list.hoverForeground#d4d4d8
  • list.inactiveFocusBackground#1d2d3e
  • list.inactiveSelectionBackground#18181b
  • list.inactiveSelectionForeground#d4d4d8
  • panel.background#09090b
  • quickInput.background#27272a
  • sideBar.background#09090b
  • sideBar.border#27272a
  • sideBar.foreground#6b7280
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#a78bfa33
  • terminal.background#09090b
  • titleBar.activeBackground#09090b
  • titleBar.border#27272a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#52525b—
comment.block.documentation, comment.block.documentation storage, comment.block.documentation keyword, comment.block.documentation punctuation, comment.block.documentation punctuation.definition, comment.block.documentation punctuation.separator, comment.block.documentation variable, comment.block.documentation entity, comment.block.documentation support.class, comment.block.documentation entity.name.type#52525bitalic
keyword, storage, keyword.control.flow, keyword.control.return, punctuation.accessor, punctuation.definition.arrow, support.type.primitive#ffb571—
keyword.control#fff387—
storage.modifier#ffd4a8—
variable#e4e4e7—
variable.language.this, variable.language.this punctuation.definition.variable#a394e5italic
variable.language.super#ffb571italic
punctuation, punctuation.definition.variable#a394e5—
punctuation.definition, punctuation.separator, punctuation.terminator, punctuation.section, meta.brace, meta.tag.tsx keyword.operator.assignment, meta.tag.jsx keyword.operator.assignment#a1a1aa—
meta.method-call, meta.function-call#a394e5—
support.class, keyword.operator.nullable-type#a394e5—
meta.class entity.name, meta.class entity.other.inherited-class, entity.name.type, support.type#a394e5—
support.function, entity.name.function, meta.class meta.definition.method, meta.class meta.function entity.name#a394e5—
meta.function-call, meta.function-call entity.name.function, meta.method-call entity.name.function#a394e5
entity#a394e5—
variable.other.property, support.variable.property#e0d6fe—
constant.language, constant.numeric, constant.numeric keyword.other.unit, constant punctuation.separator#ffb3ba—
string#8af09e—
punctuation.definition.string#8af09e—
meta.use, meta.import, meta.namespace, meta.function.closure storage.type—italic
meta.use punctuation.separator, meta.use support.other#a394e555—
support.function.construct#a394e5—
meta.namespace keyword, meta.namespace entity.name.type, meta.namespace punctuation.separator#ffd4a8—
meta.function-call.php entity.name.variable.parameter#a394e588—
meta.attribute.php, meta.attribute.php punctuation.definition, meta.attribute.php support.attribute#fffac2—
text.html entity.name.tag#a394e5—
text.html punctuation.definition.tag#a394e555—
text.html meta.tag.custom entity.name.tag#a394e5—
text.html meta.tag.custom punctuation.definition.tag#a394e555—
text.html meta.tag.other entity.name.tag#a394e5—
text.html meta.tag.other punctuation.definition.tag#a394e555—
entity.other.attribute-name#ffd4a8italic
text.html keyword.blade, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#ffb571—
text.html.php.blade begin.bracket.round, text.html.php.blade end.bracket.round#a1a1aa—
source.json string support.type.property-name#bab3ee—
meta.object-literal.key#bab3ee—
source.json punctuation, source.json punctuation.definition, source.json punctuation.separator#a1a1aa—
source.js meta.import variable.other.readwrite, source.jsx meta.import variable.other.readwrite, source.ts meta.import variable.other.readwrite, source.tsx meta.import variable.other.readwrite#a394e5—
meta.import keyword.control, meta.export keyword.control#ffb571italic
source.css meta.property-name support.type.property-name#bab3ee—
source.css entity.other.attribute-name#ffd4a8—
source.css meta.property-value#d4d4d8—
source.css constant.other.color, source.css constant.other.color punctuation.definition#ffb3ba—
source.css support.function, source.css keyword.control.at-rule, source.css keyword.control.at-rule punctuation.definition, meta.at-rule.tailwind, meta.at-rule.tailwind punctuation.definition, meta.at-rule.tailwind keyword.control, meta.at-rule.tailwind variable#ffb571—
source.css support.constant#fff387—
source.css entity#a394e5—
source.css entity.name.tag#ff9142—
source.css meta.at-rule.apply entity.other.attribute-name#a394e5
source.css variable#d4d4d8italic
source.css comment—italic
source.dart entity.name.function#fffac2—
source.dart keyword.control, source.dart punctuation.dot#ffb571—
source.dart keyword.declaration#ffb571—
source.c meta.preprocessor, source.c meta.preprocessor keyword.control, source.c meta.preprocessor punctuation.definition, source.python keyword.control.import#ffb571italic
source.python meta.function-call.arguments#e4e4e7—