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—
Myth Theme by Rodrez - VS Code Theme