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.typeitalic
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 commentitalic
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
Papaja Theme by corentinlthr - VS Code Theme