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.activeBackground#404cfa
  • activityBar.background#030c14
  • activityBar.border#0a0c27
  • activityBar.foreground#96f8a3
  • activityBarBadge.background#404cfa
  • activityBarBadge.foreground#96f8a3
  • badge.background#96f8a3
  • badge.foreground#030c14
  • breadcrumb.background#0a0c27
  • breadcrumb.foreground#96f8a3
  • button.background#404cfa
  • button.foreground#e8e8e8
  • button.hoverBackground#404cfad6
  • editor.background#030c14
  • editor.foreground#e8e8e8
  • editorBracketHighlight.foreground1#96f8a3
  • editorBracketHighlight.foreground2#3b58fa
  • editorBracketHighlight.foreground3#1997c1
  • editorCursor.foreground#e8e8e8
  • editorGroupHeader.tabsBackground#030c14
  • icon.foreground#e8e8e8
  • minimap.background#030c14
  • panel.background#030c14
  • panel.border#96f8a391
  • panelTitle.activeForeground#e8e8e8
  • sideBar.background#030c148e
  • sideBar.border#96f8a391
  • sideBar.foreground#21a3e98b
  • sideBarSectionHeader.background#030c14
  • sideBarSectionHeader.border#e8e8e839
  • sideBarSectionHeader.foreground#404cfac4
  • statusBar.background#0a0c27
  • tab.activeBackground#0d115c
  • tab.activeBorder#96f8a3
  • tab.activeForeground#e8e8e8
  • tab.hoverBackground#e8e8e82f
  • tab.inactiveBackground#030c14
  • tab.inactiveForeground#e8e8e897
  • terminal.border#acfcff
  • terminal.foreground#404cfa
  • terminal.tab.activeBorder#404cfa
  • terminalCursor.foreground#96f8a3
  • titleBar.activeBackground#0a0c27

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#aebfff
variable, meta.definition.variable.name, meta.object-literal.key, support.variable, entity.name.variable, constant.other.placeholder#acfcff
variable.language.this#10dfc0
variable.language.this#aebfff
variable.other.constant, variable.other.enummember#21a3e9bold
entity.name.type, entity.name.type.class, entity.name.type.ts, meta.type.annotation.ts, support.type.primitive#404cfabold italic
keyword.operator.expression.typeof.ts, meta.object.type.ts, keyword.operator.type.ts, meta.brace.square.ts, keyword.operator.type.annotation.ts, punctuation.definition.typeparameters.begin.ts, punctuation.definition.typeparameters.end.ts, string.quoted.single.ts, keyword.operator.expression.typeof.tsx, meta.object.type.tsx, keyword.operator.type.tsx, meta.brace.square.tsx, keyword.operator.type.annotation.tsx, punctuation.definition.typeparameters.begin.tsx, punctuation.definition.typeparameters.end.tsx, string.quoted.single.tsx, punctuation.definition.parameters.begin.ts, punctuation.definition.parameters.begin.tsx, storage.type.function.arrow.ts, storage.type.function.arrow.tsx, keyword.operator.expression.infer.ts, keyword.operator.expression.infer.tsx, string.template.ts, string.template.tsx, constant.numeric.decimal.ts, constant.numeric.decimal.tsx, variable.parameter.ts, meta.brace.round.ts, variable.parameter.tsx, meta.brace.round.tsx, punctuation.definition.parameters.end.ts, punctuation.definition.parameters.end.tsx, keyword.operator.expression.extends.ts
keyword, keyword.control, keyword.operator.new, keyword.other.using, keyword.other.operator, entity.name.operator#557edf
keyword.operator#e7ff9e
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.definition.template-expression.begin.js.jsx, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.js, punctuation.definition.template-expression.end.ts, meta.template.expression.js#fa745f
storage.type, storage.modifier, keyword.operator.expression.keyof.ts, keyword.operator.expression.keyof.tsx, keyword.operator.expression.is.ts, keyword.operator.expression.is.tsx, keyword.operator.expression.in.ts, keyword.operator.expression.in.tsx, keyword.operator.expression.infer.ts, keyword.operator.expression.infer.tsx, punctuation.definition.typeparameters.begin.ts, punctuation.definition.typeparameters.begin.tsx#50b4f1
storage.type.function.arrow#37e07a
constant.other.color, punctuation, meta.tag, punctuation.separator.inheritance.php, keyword.other.template, keyword.other.substitution#b2b8bc
punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#50b4f1
text.html.derivative meta.tag.custom.start.html entity.name.tag.html, text.html.derivative meta.tag.custom.end.html entity.name.tag.html, meta.tag.other.unrecognized.html.derivative entity.name.tag.html#7c70ccbold
entity.name.tag, entity.name.tag.html, meta.tag.sgml, markup.deleted.git_gutter#2466e9
entity.name.tag.tsx, entity.name.tag.jsx, meta.tag.sgml, markup.deleted.git_gutter#7df81fdabold
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#d9f461
support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#37e07a
constant.language#10dfc0
constant.numeric#ffd500
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#feeded
support.type, support.class, entity.name.type.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#10dfc0
support.class.component.js.jsx, support.class.component.tsx, markup.changed.git_gutter, support.type.sys-types#7df81fdabold
meta.attribute.unrecognized entity.other.attribute-name.html#96f8a3
entity.other.attribute-name.html#e1eea0
entity.other.attribute-name.js.jsx, entity.other.attribute-name.tsx, meta.tag.attributes.tsx#448fff
comment.block.html, punctuation.definition.comment.html#52d486
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, punctuation.decorator.ts, meta.decorator.ts, source.ts meta.decorator.ts meta.function-call.ts entity.name.function.ts#7c70cc
source.js constant.other.object.key.js string.unquoted.label.js#788AB3italic
support.type.property-name.css#448fff
support.constant.property-value.css#d9f461
entity.other.attribute-name.class.css#10dfc0
punctuation.definition.entity.css, entity.other.attribute-name.pseudo-class.css, keyword.operator.combinator.css, punctuation.terminator.rule.css, entity.other.attribute-name.pseudo-element.css#acfcff
keyword.other.unit.rem.css, keyword.other.unit.px.css, keyword.other.unit.em.css, keyword.other.unit.percentage.css#50b4f1
support.function.css#37e07a
entity.name.function.pipe.ng#5cac5cbold italic
keyword.control.block.kind.ng, keyword.control.block.transition.ng, storage.type.ng#37e07a
entity.other.ng-binding-name.event.html#37e07a
entity.other.ng-binding-name.property.html, punctuation.definition.ng-binding-name.begin.html, punctuation.definition.ng-binding-name.end.html, entity.other.ng-binding-name.ngModel.html#5fb7ed
entity.other.ng-binding-name.template.html#fa905f
Tungsten Carbide Theme by johnsonav - VS Code Theme