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#00051a
  • activityBar.foreground#ffffff
  • activityBarBadge.background#5a637520
  • activityBarBadge.foreground#747d91
  • button.background#ffffff
  • button.foreground#314365
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#1d1f23
  • dropdown.border#131c28
  • editor.background#000621
  • editor.findMatchHighlightBackground#314365
  • editor.lineHighlightBackground#161f2c
  • editor.selectionBackground#42557b
  • editorActiveLineNumber.foreground#8793ad
  • editorCursor.foreground#f8fafd
  • editorGroup.border#131c28
  • editorGroupHeader.tabsBackground#00051a
  • editorHoverWidget.background#131c28
  • editorHoverWidget.border#131c28
  • editorIndentGuide.background#3b465560
  • editorLineNumber.foreground#747d9170
  • editorLink.activeForeground#ffffff
  • editorSuggestWidget.background#131c28
  • editorSuggestWidget.border#131c28
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWhitespace.foreground#3b4048
  • editorWidget.background#131c28
  • input.background#131c28
  • list.activeSelectionBackground#5a637550
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#5a637540
  • list.highlightForeground#929faf
  • list.hoverBackground#5a637520
  • list.inactiveSelectionBackground#5a637540
  • list.inactiveSelectionForeground#ffffff
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566680
  • scrollbarSlider.hoverBackground#5a637580
  • sideBar.background#00051a
  • sideBarSectionHeader.background#131c28
  • statusBar.background#131c28
  • statusBar.debuggingBackground#131c28
  • statusBar.foreground#747d91
  • statusBar.noFolderBackground#131c28
  • statusBarItem.hoverBackground#5a637540
  • tab.activeBackground#00051a
  • tab.border#192433
  • tab.inactiveBackground#131c28
  • titleBar.activeBackground#192433
  • titleBar.activeForeground#747d91
  • titleBar.inactiveBackground#131c28
  • titleBar.inactiveForeground#747d9160

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.definition.string.begin,punctuation.definition.string.end#FFF171
variable.parameter.function,meta.block,meta.property-list,source,text.html.twig,text.html#FFFFFF
comment, punctuation.definition.comment#6D7187italic
comment#6D7187italic
comment markup.link#6D7187
markup.inserted.diff#FFF171
markup.deleted.diff#FFBD37
meta.function.c#FFBD37
keyword.control.cpp#66D9EF
punctuation.section.block.begin.bracket.curly.cpp,punctuation.section.block.end.bracket.curly.cpp,punctuation.terminator.statement.c,punctuation.section.block.begin.bracket.curly.c,punctuation.section.block.end.bracket.curly.c,punctuation.section.parens.begin.bracket.round.c,punctuation.section.parens.end.bracket.round.c,punctuation.section.parameters.begin.bracket.round.c,punctuation.section.parameters.end.bracket.round.c#FFFFFF
support.constant.math.js,support.constant.property.math.js,support.constant.math.ts,support.constant.property.math.ts#66D9EF
variable.other.constant.js,variable.other.constant.ts#66D9EF
storage.type.annotation.java#66D9EF
source.java#FFBD37
punctuation.section.block.begin.java,punctuation.section.block.end.java,punctuation.definition.method-parameters.begin.java,punctuation.definition.method-parameters.end.java,meta.method.identifier.java,punctuation.section.method.begin.java,punctuation.section.method.end.java,punctuation.terminator.java,punctuation.section.class.begin.java,punctuation.section.class.end.java,punctuation.section.inner-class.begin.java,punctuation.section.inner-class.end.java,meta.method-call.java,storage.type.generic.java#FFFFFF
meta.method.java#61AFEF
storage.modifier.import.java,storage.type.java#66D9EF
meta.definition.variable.name.java#FFBD37
keyword.operator.logical.js,keyword.operator.logical.ts#F92672
support.constant.property-value.scss,support.constant.property-value.css#66D9EF
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#FFFFFF
punctuation.separator.list.comma.css#B9C0CA
support.constant.color.w3c-standard-color-name.css,entity.other.attribute-name.class.css,entity.other.attribute-name.id.css#A6E22Eitalic
support.type.vendored.property-name.css#66D9EF
punctuation.definition.template-expression.begin.js,punctuation.definition.template-expression.end.js,punctuation.definition.template-expression.begin.ts,punctuation.definition.template-expression.end.ts#FFBD37
support.module.node.js,support.type.object.module.js,support.module.node.js,support.module.node.ts,support.type.object.module.ts,support.module.node.ts#66D9EF
variable.other.readwrite.js,meta.object-literal.key.js,support.variable.property.js,support.variable.object.process.js,variable.other.readwrite.ts,meta.object-literal.key.ts,support.variable.property.ts,support.variable.object.process.ts#FFFFFF
support.constant.json.js,support.constant.json.ts#FFFFFF
keyword.operator.expression.instanceof.js,keyword.operator.expression.instanceof.ts#F92672
keyword.operator.expression.typeof.js,keyword.operator.expression.typeof.ts#F92672
support.type.object.console.js,support.type.object.console.ts#FFBD37
entity.name.function.js,support.function.console.js,entity.name.function.ts,support.function.console.ts#A6E22E
keyword.operator.js,keyword.operator.ts,punctuation.separator.key-value.js#F92672
support.type.object.dom.js,support.type.object.dom.ts#66D9EF
support.variable.dom.js,support.variable.property.dom.js,support.variable.dom.ts,support.variable.property.dom.ts,#FFBD37
keyword.operator.arithmetic.js,keyword.operator.comparison.js,keyword.operator.arithmetic.ts,keyword.operator.comparison.ts#F92672
keyword.operator.sizeof.c#F92672
variable.parameter.function.language.python#FFFFFF
support.type.python#66D9EF
keyword.operator.logical.python#F92672
meta.function-call.arguments.python#66D9EF
meta.function-call.python#66D9EF
variable.parameter.function.python#D18C4E
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python,meta.function-call.arguments.python#FFFFFF
meta.function-call.generic.python#61AFEF
punctuation.definition.comment#6D7187
none#FFFFFF
keyword.operator#F92672
keyword#F92672
variable#FFBD37
token.variable.parameter.java#FFFFFF
variable.parameter.js#AE81FF
import.storage.java#66D9EF
token.package.keyword#F92672
token.package,entity.name.type.namespace#FFFFFF
meta.require, meta.function.php#A6E22E
meta.method-call.php, punctuation.definition.parameters.begin.bracket.round.php, punctuation.definition.parameters.end.bracket.round.php, meta.function.parameters.php, meta.method-call.static.php, punctuation.terminator.expression.php, punctuation.definition.begin.bracket.round.php, punctuation.definition.end.bracket.round.php, punctuation.section.scope.begin.php,punctuation.definition.begin.bracket.curly.php,punctuation.definition.end.bracket.curly.php#FFFFFF
support.class#66D9EFitalic
entity.name.type.class, entity.name.class#A6E22E
entity.name.class.identifier.namespace.type,meta.class.body.php#66D9EF
entity.name.type#66D9EF
keyword.control#F92672
control.elements, keyword.operator.less#FFFFFF
keyword.other.special-method#61AFEF
storage#F92672
token.storage.js,token.storage.ts#F92672
keyword.operator.expression.delete.js,keyword.operator.expression.in.js,keyword.operator.expression.of.js,keyword.operator.expression.instanceof.js,keyword.operator.new.js,keyword.operator.expression.typeof.js,keyword.operator.expression.void.js#F92672
token.storage.type.java#66D9EF
support.function#66D9EF
support.type.property-name#66D9EF
support.constant.property-value#66D9EF
support.constant.font-name#FFFFFF
meta.tag#FFFFFF
string#FFF171
entity.other.inherited-class#A6E22E
constant.other.symbol#66D9EF
constant.numeric#AE81FF
none#AE81FF
none#AE81FF
constant#AE81FF
punctuation.definition.constant#AE81FF
entity.name.tag#F92672
entity.other.attribute-name#A6E22Eitalic
entity.other.attribute-name.id#A6E22E
entity.other.attribute-name.class.css#A6E22E
meta.selector#F92672
none#D2945D
markup.heading#FFBD37
markup.heading punctuation.definition.heading, entity.name.section#61AFEF
keyword.other.unit#F92672
markup.bold#FFFFFF
punctuation.definition.bold#66D9EF
markup.italic, punctuation.definition.italic#F92672
emphasis md#F92672
entity.name.section.markdown#FFBD37
punctuation.definition.heading.markdown#FFBD37
markup.heading.setext#FFFFFF
punctuation.definition.bold.markdown#FFFFFF
markup.inline.raw.markdown#FFF171
beginning.punctuation.definition.list.markdown#FFBD37
markup.quote.markdown#6D7187italic
punctuation.definition.string.begin.markdown,punctuation.definition.string.end.markdown,punctuation.definition.metadata.markdown#FFFFFF
punctuation.definition.metadata.markdown#F92672
markup.underline.link.markdown,markup.underline.link.image.markdown#F92672
string.other.link.title.markdown,string.other.link.description.markdown#61AFEF
string.regexp#57B6C2
constant.character.escape#57B6C2
punctuation.section.embedded, variable.interpolation#BE4F44
invalid.illegal#FFFFFF
invalid.broken#FFFFFF
invalid.deprecated#FFFFFF
invalid.unimplemented#FFFFFF
source.json meta.structure.dictionary.json > string.quoted.json#FFBD37
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#FFBD37
source.json meta.structure.dictionary.json > value.json > string.quoted.json,source.json meta.structure.array.json > value.json > string.quoted.json,source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation,source.json meta.structure.array.json > value.json > string.quoted.json > punctuation#FFF171
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#66D9EF
support.type.property-name.json#FFBD37
support.type.property-name.json punctuation#FFBD37
text.html.laravel-blade,source.php.embedded.line.html,entity.name.tag.laravel-blade#C679DD
text.html.laravel-blade,source.php.embedded.line.html,support.constant.laravel-blade#C679DD
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php#FFFFFF
keyword.operator.error-control.php#F92672
keyword.operator.type.php#F92672
punctuation.section.array.begin.php#FFFFFF
punctuation.section.array.end.php#FFFFFF
invalid.illegal.non-null-typehinted.php#FF0000
storage.type.php,storage.type.function#66D9EFitalic
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#FFFFFF
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#FFFFFF
entity.name.goto-label.php,support.other.php#61AFEF
keyword.operator.logical.php,keyword.operator.bitwise.php#F92672
punctuation.definition.variable.php#FFBD37
meta.function.decorator.python#61AFEF
support.token.decorator.python,meta.function.decorator.identifier.python#66D9EF
function.parameter#FFFFFF
function.parameter.js,function.parameter.ts#FFFFFF
function.brace#FFFFFF
function.parameter.ruby, function.parameter.cs#FFFFFF
rgb-value#66D9EF
inline-color-decoration rgb-value#FFFFFF
less rgb-value#FFFFFF
selector.sass#FFBD37
var.this.js,var.this.ts,variable.language.this.js,variable.language.this.ts#F92672
block.scope.end,block.scope.begin#FFFFFF
entity.name.variable.local.cs#FFBD37
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
meta.tag.template.value.twig#61AFEF
meta.method-call.php#FFFFFF
string.quoted, string.template.js, punctuation.definition.string#ADDB67
punctuation.definition, punctuation.definition.arguments, punctuation.definition.parameters, punctuation.section, meta.brace, punctuation.parenthesis, punctuation.section.embedded, punctuation.brackets#C792EA
other#C792EA
source.python, variable.parameter.function, variable.other.readwrite.alias.js, variable.other.readwrite.js, variable.other.readwrite.alias.ts, variable.other.readwrite.ts, variable.other.object.ts, variable.other.property.ts, variable.parameter, entity.other.inherited-class.python, entity.name.tag.js, entity.name.tag.ts, meta.object-literal.key.js.jsx, meta.object-literal.key.ts.tsx#FF2C83
keyword.control.import.python#7FDBCA
storage.type.class, storage.type.function, storage.type.variable, keyword.control.flow, keyword.control.import.ts, keyword.control.import.js, keyword.control.from.js, storage.type, support.function.builtin, meta.object-literal.key.js, meta.object-literal.key.ts, keyword.operator.assignment.js, variable.other.readwrite.js.jsx, variable.other.readwrite.ts.tsx, variable.other.object.js.jsx, variable.other.object.ts.tsx, variable.other.property.js.jsx, variable.other.property.ts.tsx, support.class.component.js.jsx, support.class.component.ts.tsx#7FDBCA
string.quoted.double.js.jsx, string.quoted.double.ts.tsx#ECE48D
keyword.other.rust, keyword.other.fn.rust#7FDBCA
entity.name.namespace.rust, meta.function.definition.rust, storage.type.rust#FF2C83

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Myth Theme - Coding Theme