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#37c886
  • activityBar.background#141820
  • activityBar.border#141820
  • activityBar.dropBackground#37c88653
  • activityBar.foreground#d1dfff
  • activityBar.inactiveForeground#d1dfff70
  • activityBarBadge.background#37c886
  • activityBarBadge.foreground#f8fafd
  • badge.background#37c886
  • badge.foreground#f8fafd
  • breadcrumb.activeSelectionForeground#37c886
  • breadcrumb.background#212836
  • breadcrumb.focusForeground#f8fafd
  • breadcrumb.foreground#99a3b8b6
  • breadcrumbPicker.background#1b212c
  • button.background#37c886cc
  • button.foreground#f8fafd
  • button.hoverBackground#37c886
  • debugExceptionWidget.background#ff45794f
  • debugExceptionWidget.border#ff4579
  • debugIcon.breakpointCurrentStackframeForeground#ffcc00
  • debugIcon.breakpointDisabledForeground#d1dfff3a
  • debugIcon.breakpointForeground#ff4579
  • debugIcon.breakpointStackframeForeground#37c756
  • debugIcon.breakpointUnverifiedForeground#848484
  • debugIcon.continueForeground#37c886
  • debugIcon.disconnectForeground#ff4579
  • debugIcon.pauseForeground#37c886
  • debugIcon.restartForeground#37c756
  • debugIcon.startForeground#37c756
  • debugIcon.stepBackForeground#37c886
  • debugIcon.stepIntoForeground#37c886
  • debugIcon.stepOutForeground#37c886
  • debugIcon.stepOverForeground#37c886
  • debugIcon.stopForeground#ff4579
  • debugToolBar.background#141820
  • diffEditor.insertedTextBackground#6af69921
  • diffEditor.insertedTextBorder#212836
  • diffEditor.removedTextBackground#ff457922
  • diffEditor.removedTextBorder#212836
  • dropdown.background#212836
  • dropdown.border#d1dfff0e
  • dropdown.foreground#99a3b8
  • editor.background#212836
  • editor.findMatchBackground#37c88637
  • editor.findMatchBorder#37c886
  • editor.findMatchHighlightBackground#37c8862d
  • editor.foreground#bac7e4
  • editor.hoverHighlightBackground#37c88637
  • editor.inactiveSelectionBackground#67769630
  • editor.lineHighlightBackground#67769630
  • editor.rangeHighlightBackground#37c88637
  • editor.selectionBackground#67769660
  • editor.selectionHighlightBackground#37c88715
  • editor.selectionHighlightBorder#37c886f2
  • editor.stackFrameHighlightBackground#ffff012c
  • editor.wordHighlightBackground#37c8862d
  • editor.wordHighlightBorder#37c88654
  • editor.wordHighlightStrongBackground#37c88662
  • editor.wordHighlightStrongBorder#37c886f2
  • editorBracketMatch.background#212836
  • editorBracketMatch.border#37c886f2
  • editorCodeLens.foreground#37c886
  • editorCursor.background#bac7e4
  • editorCursor.foreground#37c886
  • editorError.foreground#ff4579
  • editorGroup.border#d1dfff0e
  • editorGroup.dropBackground#37c88653
  • editorGroup.emptyBackground#212836
  • editorGroupHeader.noTabsBackground#212836
  • editorGroupHeader.tabsBackground#1b212c
  • editorGroupHeader.tabsBorder#21283600
  • editorGutter.addedBackground#6af699cc
  • editorGutter.background#212836
  • editorGutter.deletedBackground#ff4579
  • editorGutter.modifiedBackground#ffbf7acc
  • editorHint.foreground#ff4579
  • editorHoverWidget.background#1b212c
  • editorHoverWidget.border#d1dfff1a
  • editorIndentGuide.activeBackground#d1dfffab
  • editorIndentGuide.background#d1dfff3a
  • editorLineNumber.activeForeground#d1dfffab
  • editorLineNumber.foreground#d1dfff3a
  • editorMarkerNavigation.background#1b212c
  • editorMarkerNavigationError.background#ff4579
  • editorMarkerNavigationInfo.background#04fa04
  • editorMarkerNavigationWarning.background#facf5a
  • editorOverviewRuler.border#212836
  • editorOverviewRuler.deletedForeground#ff4579
  • editorOverviewRuler.errorForeground#ff4579
  • editorOverviewRuler.findMatchForeground#ffbf7acc
  • editorOverviewRuler.selectionHighlightForeground#37c88633
  • editorOverviewRuler.wordHighlightForeground#37c88681
  • editorOverviewRuler.wordHighlightStrongForeground#37c886
  • editorPane.background#1b212c
  • editorRuler.foreground#67769645
  • editorSuggestWidget.background#1b212c
  • editorSuggestWidget.border#d1dfff0e
  • editorSuggestWidget.foreground#99a3b8
  • editorSuggestWidget.highlightForeground#37c886
  • editorSuggestWidget.selectedBackground#67769645
  • editorUnnecessaryCode.opacity#1418207a
  • editorWarning.foreground#facf5a
  • editorWhitespace.foreground#99a3b836
  • editorWidget.background#1b212c
  • editorWidget.border#d1dfff0e
  • errorForeground#ff4579
  • extensionButton.prominentBackground#37c886cc
  • extensionButton.prominentForeground#f8fafd
  • extensionButton.prominentHoverBackground#37c886
  • focusBorder#37c886
  • foreground#f8fafd
  • gitDecoration.addedResourceForeground#6af699cc
  • gitDecoration.conflictingResourceForeground#facf5a
  • gitDecoration.deletedResourceForeground#ff4579
  • gitDecoration.ignoredResourceForeground#99a3b856
  • gitDecoration.modifiedResourceForeground#ffbf7acc
  • gitDecoration.untrackedResourceForeground#37c886
  • gitlens.gutterBackgroundColor#212836
  • gitlens.gutterForegroundColor#f8fafd
  • gitlens.gutterUncommittedForegroundColor#37c88699
  • gitlens.lineHighlightBackgroundColor#37c88633
  • gitlens.lineHighlightOverviewRulerColor#37c88699
  • gitlens.trailingLineBackgroundColor#00000000
  • gitlens.trailingLineForegroundColor#99a3b836
  • input.background#212836
  • input.border#d1dfff0e
  • input.foreground#f8fafd
  • input.placeholderForeground#99a3b877
  • inputOption.activeBorder#37c886
  • inputValidation.errorBackground#212836
  • inputValidation.errorBorder#ff4579
  • inputValidation.infoBackground#212836
  • inputValidation.infoBorder#37c886
  • inputValidation.warningBackground#212836
  • inputValidation.warningBorder#facf5a
  • list.activeSelectionBackground#6776963b
  • list.activeSelectionForeground#37c886
  • list.dropBackground#6776963b
  • list.errorForeground#ff4579
  • list.focusBackground#6776963b
  • list.focusForeground#f8fafd
  • list.highlightForeground#37c886
  • list.hoverBackground#6776963b
  • list.hoverForeground#f8fafd
  • list.inactiveSelectionBackground#67769630
  • list.inactiveSelectionForeground#99a3b8
  • list.invalidItemForeground#ff4579
  • list.warningForeground#facf5a
  • menu.background#1b212c
  • menu.foreground#99a3b8
  • menu.selectionBackground#67769645
  • menu.selectionForeground#d1dfff
  • menu.separatorBackground#677696dc
  • menubar.selectionBackground#67769645
  • menubar.selectionForeground#9da5b4
  • merge.currentHeaderBackground#37c88656
  • merge.incomingHeaderBackground#6af69975
  • notificationCenter.border#1b212c
  • notificationCenterHeader.background#141820
  • notificationCenterHeader.foreground#f8fafd
  • notificationLink.foreground#37c886
  • notifications.background#141820
  • notifications.border#37c886
  • notifications.foreground#f8fafdcc
  • notificationsErrorIcon.foreground#ff4579
  • notificationsInfoIcon.foreground#37c886
  • notificationsWarningIcon.foreground#facf5a
  • notificationToast.border#1b212c
  • panel.background#1b212c
  • panel.border#1b212c
  • panelTitle.activeBorder#37c886
  • panelTitle.activeForeground#f8fafd
  • panelTitle.inactiveForeground#99a3b8
  • peekView.border#37c886
  • peekViewEditor.background#1b212c
  • peekViewEditor.matchHighlightBackground#37c88662
  • peekViewEditorGutter.background#212836
  • peekViewResult.background#141820
  • peekViewResult.fileForeground#99a3b8
  • peekViewResult.lineForeground#99a3b8
  • peekViewResult.matchHighlightBackground#37c88662
  • peekViewResult.selectionBackground#67769645
  • peekViewResult.selectionForeground#f8fafd
  • peekViewTitle.background#1b212c
  • peekViewTitleDescription.foreground#99a3b8
  • peekViewTitleLabel.foreground#f8fafd
  • pickerGroup.border#37c886
  • pickerGroup.foreground#37c886
  • progressBar.background#37c886
  • quickInput.background#1b212c
  • quickInput.foreground#99a3b8
  • scrollbar.shadow#141820
  • scrollbarSlider.activeBackground#67769694
  • scrollbarSlider.background#67769645
  • scrollbarSlider.hoverBackground#67769657
  • selection.background#37c88637
  • settings.checkboxBackground#1b212c
  • settings.checkboxBorder#d1dfff21
  • settings.checkboxForeground#37c886
  • settings.dropdownBackground#1b212c
  • settings.dropdownBorder#d1dfff21
  • settings.dropdownForeground#f8fafdcc
  • settings.dropdownListBorder#37c886
  • settings.headerForeground#37c886
  • settings.modifiedItemIndicator#ffbf7acc
  • settings.numberInputBackground#1b212c
  • settings.numberInputBorder#d1dfff21
  • settings.numberInputForeground#f8fafdcc
  • settings.textInputBackground#1b212c
  • settings.textInputBorder#d1dfff21
  • settings.textInputForeground#f8fafdcc
  • sideBar.background#1b212c
  • sideBar.border#1b212c
  • sideBar.foreground#99a3b8
  • sideBarSectionHeader.background#141820
  • sideBarSectionHeader.foreground#99a3b8
  • sideBarTitle.foreground#99a3b8
  • statusBar.background#141820
  • statusBar.border#141820
  • statusBar.debuggingBackground#ff4579
  • statusBar.debuggingBorder#ff4579
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#99a3b8
  • statusBar.noFolderBackground#141820
  • statusBar.noFolderBorder#141820
  • statusBarItem.activeBackground#37c886
  • statusBarItem.hoverBackground#67769657
  • statusBarItem.prominentBackground#37c88650
  • statusBarItem.prominentHoverBackground#37c886
  • tab.activeBackground#212836
  • tab.activeBorder#37c886
  • tab.activeForeground#f8fafd
  • tab.activeModifiedBorder#37c886
  • tab.border#212836
  • tab.inactiveBackground#1b212c
  • tab.inactiveForeground#99a3b8b6
  • tab.inactiveModifiedBorder#37c88680
  • tab.unfocusedActiveBorder#37c88669
  • tab.unfocusedActiveForeground#f8fafd83
  • tab.unfocusedInactiveForeground#99a3b87c
  • terminal.ansiBlack#212836
  • terminal.ansiBlue#82aaff
  • terminal.ansiBrightBlack#7992b4
  • terminal.ansiBrightBlue#82aaff
  • terminal.ansiBrightCyan#00d9ff
  • terminal.ansiBrightGreen#6af699
  • terminal.ansiBrightMagenta#c792ea
  • terminal.ansiBrightRed#ff4579
  • terminal.ansiBrightWhite#f8fafd
  • terminal.ansiBrightYellow#fffa9e
  • terminal.ansiCyan#00d9ff
  • terminal.ansiGreen#6af699
  • terminal.ansiMagenta#c792ea
  • terminal.ansiRed#ff4579
  • terminal.ansiWhite#f8fafd
  • terminal.ansiYellow#fffa9e
  • terminal.background#212836
  • terminal.border#67769645
  • terminal.foreground#99a3b8
  • terminal.selectionBackground#67769660
  • terminalCursor.foreground#37c886
  • textLink.activeForeground#37c886
  • textLink.foreground#37c886
  • titleBar.activeBackground#212836
  • titleBar.activeForeground#99a3b8
  • titleBar.border#1b212c
  • titleBar.inactiveBackground#212836
  • titleBar.inactiveForeground#99a3b8
  • walkThrough.embeddedEditorBackground#141820
  • welcomePage.buttonBackground#141820
  • welcomePage.buttonHoverBackground#141820
  • widget.shadow#14182050
  • window.activeBorder#37c886
  • window.inactiveBorder#37c88660

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
markup.changed, meta.diff.header.git, meta.diff.header.from-file, meta.diff.header.to-file#82aaff
markup.deleted.diff#ff457990
markup.inserted.diff#6af699ff
comment.line.double-slash, comment, punctuation.definition.comment, comment.block, comment.line, comment.block.documentation, comment.line.double-slash#506686
string#6af699
string.quoted, variable.other.readwrite.js#6af699
support.constant.math#ffbf7a
constant.numeric, constant.character.numeric#ffbf7a
constant.language, punctuation.definition.constant, variable.other.constant#82aaff
constant.character, constant.other#82aaff
constant.character.escape#ffbf7a
string.regexp, string.regexp keyword.other#82aaff
meta.function punctuation.separator.comma#00d9ff
variable#6af699
storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js#c792ea
storage.type#c792ea
storage.type.function.arrow.js#c792ea
storage.modifier#c792ea
entity.name.class, meta.class entity.name.type.class#fffa9e
storage.modifier.async.js#fffa9e
entity.other.inherited-class#6af699
entity.name.function#82aaff
punctuation.definition.tag#bac7e4
meta.tag#00d9ff
entity.name.tag, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag.js.jsx, meta.tag.js, meta.tag.tsx, meta.tag.html#ff4579
meta.tag.other.unrecognized.html.derivative entity.name.tag #bac7e4
entity.other.attribute-name#ffbf7a
entity.name.tag.custom#6af699
support.function, support.constant#82aaff
support.constant.meta.property-value#00d9ff
support.type#ff4579
support.variable.dom#ff4579
invalid#ff4579
invalid.deprecated#ff4579
punctuation, punctuation.accessor, keyword#00d9ff
keyword.operator#00d9ff
keyword.operator.relational#00d9ff
keyword.operator.assignment#00d9ff
keyword.operator.arithmetic#00d9ff
keyword.operator.bitwise#00d9ff
keyword.operator.increment#00d9ff
keyword.operator.ternary#00d9ff
keyword.operator.expression#c792ea
object#bac7e4
constant.language.null#ff4579
meta.brace#bac7e4
meta.delimiter.period#bac7e4
meta.object-literal.key#d1dfff
punctuation.definition.string#6af699
punctuation.definition.block#00d9ff
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#ff4579
constant.language.boolean#ff4579
object.comma#bac7e4
variable.parameter.function#00d9ff
support.type.vendor.property-name, support.constant.vendor.property-value, support.type.property-name, meta.property-list entity.name.tag#00d9ff
meta.property-list entity.name.tag.reference#00d9ff
constant.other.color.rgb-value punctuation.definition.constant#ffbf7a
constant.other.color, constant.other.rgb-value, constant.other.color.rgb-value#fffa9e
keyword.other.unit#fffa9e
meta.selector#c792ea
entity.other.attribute-name.id#82aaff
meta.property-name#00d9ff
entity.name.tag.doctype, meta.tag.sgml.doctype#c792ea
punctuation.definition.parameters#00d9ff
keyword.control.operator#00d9ff
keyword.operator.logical#c792ea
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance#00d9ff
variable.other.object.property, variable.other.property#ff4579
variable.other.object.js
entity.name.function#82aaff
keyword.operator.comparison, keyword.control.ruby, keyword.control.module.ruby, keyword.control.class.ruby, keyword.control.def.ruby, keyword.control.flow.js, keyword.control.flow.tsx, keyword.control.loop.js, keyword.control.import.js, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx#c792ea
keyword.control.conditional.js#c792ea
support.constant, keyword.other.special-method, keyword.other.new, keyword.operator.new, keyword.control#c792ea
keyword.other.debugger#ffbf7a
support.class.console.js#fffa9e
invalid.broken#ffbf7a
invalid.unimplemented#ffbf7a
invalid.illegal#ff4579
variable.language#bac7e4
support.variable.property#00d9ff
variable.function#82aaff
variable.interpolation#ff4579
meta.function-call#fffa9e
punctuation.section.embedded#00d9ff
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array#bac7e4
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list#6af699
string.template meta.template.expression#ff4579
string.template punctuation.definition.string#6af699
italic#c792ea
bold#6af699bold
quote#bac7e4
raw#00d9ff
variable.assignment.coffee#00d9ff
variable.parameter.function.coffee#bac7e4
variable.assignment.coffee#00d9ff
variable.other.readwrite.cs#bac7e4
entity.name.type.class.cs, storage.type.cs#c792ea
entity.name.type.namespace.cs#bac7e4
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, support.constant.property-value.css#ff4579
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#00d9ff
keyword.other.unit.css#fffa9e
meta.attribute-selector.css entity.other.attribute-name.attribute, entity.other.attribute-name.class.css, variable.other.readwrite.js#ffbf7a
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#c792ea
keyword.other.important.scss, keyword.other.important.css#6af699italic bold
entity.other.attribute-name.id.css#82aaff
support.constant.font-name, support.constant.color#ffbf7a
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#82aaff
source.elixir entity.name.function#6af699
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#82aaff
source.elixir punctuation.definition.string#6af699
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#6af699
source.elixir .punctuation.binary.elixir#c792ea
source.go meta.function-call.go#bac7e4
entity.other.attribute-name.id.html#ffbf7a
punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html#bac7e4
meta.tag.sgml.doctype.html#c792ea
meta.class entity.name.type.class.js, support.class.builtin.js#fffa9e
meta.method.declaration storage.type.js#82aaff
meta.method.declaration meta.var.expr.js storage.type.js#c792ea
storage.type.class.js#c792ea
terminator.js#bac7e4
meta.js punctuation.definition.js#bac7e4
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc#bac7e4
variable.other.jsdoc, variable.other.phpdoc#82aaff
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other#bac7e5
constant.language.import-export-all.js#00d9ff
variable.parameter.function.js#82aaff
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx#bac7e4
variable.js, variable.other.js, variable.other.constant.js#bac7e4
entity.name.type.js, entity.name.type.module.js#fffa9e
support.class.js#bac7e4
support.type.property-name.json#82aaff
support.constant.json#82aaff
meta.structure.dictionary.value.json string.quoted.double#6af699
string.quoted.double.json punctuation.definition.string.json, punctuation.definition.string.json#6af699
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#ff4579
variable.other.ruby#bac7e4
variable.other.readwrite.instance.ruby, variable.other.readwrite.class.ruby#ff4579
entity.name.type.class.ruby#ffbf7a
entity.name.type.module.ruby#fffa9e
constant.language.symbol.hashkey.ruby#00d9ff
entity.name.tag.less#00d9ff
keyword.other.unit.css#fffa9e
meta.attribute-selector.less entity.other.attribute-name.attribute#ffbf7a
markup.heading.markdown#ff4579
markup.italic.markdown#c792ea
markup.bold.markdown, punctuation.definition.bold.markdown#ffbf7abold
beginning.punctuation.definition.quote.markdown, markup.quote.markdown#00d9ff
markup.inline.raw.markdown, markup.inline.raw#6af699
markup.underline.link.markdown, markup.underline.link.image.markdown#00d9ff
string.other.link.title.markdown, string.other.link.description.markdown#82aaff
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string, punctuation.definition.metadata.markdown#bac7e4
beginning.punctuation.definition.list.markdown#ff4579
variable.other.php, variable.other.property.php#bac7e4
support.class.php#fffa9e
meta.function-call.php punctuation#bac7e4
variable.other.global.php#6af699
variable.other.global.php punctuation.definition.variable#6af699
constant.language.python#ff4579
variable.parameter.function.python, meta.function-call.arguments.python#82aaff
meta.function-call.python, meta.function-call.generic.python#82aaff
punctuation.python#bac7e4
entity.name.function.decorator.python#6af699
source.python variable.language.special#82aaff
variable.less, variable.other.less#ff4579
variable.scss, variable.sass, source.sass variable, variable.parameter.url.scss, variable.parameter.url.sass#ff4579
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#82aaff
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#bac7e4
entity.name.tag.reference.scss
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute, source.css.scss meta.property-list.scss entity.other.attribute-name.parent-selector-suffix.css punctuation.definition.entity.css#ffbf7a
entity.name.tag.scss, entity.name.tag.sass#00d9ff
keyword.other.unit.scss, keyword.other.unit.sass#fffa9e
variable.stylus, variable.other.stylus#ff4579
variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts#bac7e4
entity.name.type.ts, entity.name.type.tsx#fffa9e
support.class.node.ts, support.class.node.tsx#82aaff
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#bac7e4
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block#00d9ff
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#82aaff
meta.tag.js meta.jsx.children.tsx#82aaff
entity.name.tag.yaml#82aaff
variable.other.readwrite.js, variable.parameter#bac7e4
support.class.component.js, support.class.component.js.jsx, support.class.component.tsx#c792ea
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#bac7e4
meta.class entity.name.type.class.tsx#fffa9e
entity.name.type.tsx, entity.name.type.module.tsx#fffa9e
meta.method.declaration storage.type.tsx#82aaff
token.info-token#82aaff
token.warn-token#ffbf7a
token.error-token#ff4579
token.debug-token#b267e6
variable.language.this.ts, variable.language.this.js, variable.language.this.tsx, variable.language.this.jsx#ffbf7a
variable.language.super.ts, variable.language.super.js, variable.language.super.tsx, variable.language.super.jsx#ffbf7a
keyword.control.default.js, keyword.control.default.ts, keyword.control.default.tsx#ff4579
source.vue entity.name.tag.other.html, source.vue text.html.vue-html meta.tag.other.html#c792ea
source.vue text.html.vue-html expression.embedded.vue meta.array.literal.js meta.brace.square.js#ff4579
source.vue text.html.vue-html meta.tag.block.any.html meta.directive.vue source.directive.vue meta.array.literal.js meta.brace.square.js, source.vue text.html.vue-html meta.tag.block.any.html meta.directive.vue source.directive.vue meta.objectliteral.js punctuation.definition.block.js#ff4579
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#6af699
source.vue text.html.vue-html meta.tag.block.any.html meta.directive.vue source.directive.vue meta.brace.round.js#00d9ff
source.vue text.html.vue-html meta.tag.other.html meta.directive.vue source.directive.vue variable.other.readwrite.js, source.vue text.html.vue-html meta.tag.other.html meta.directive.vue source.directive.vue variable.other.object.js, source.vue text.html.vue-html meta.tag.inline.any.html meta.directive.vue source.directive.vue variable.other.readwrite.js, source.vue text.html.vue-html meta.tag.block.any.html meta.directive.vue source.directive.vue variable.other.readwrite.js#d1dfff
source.vue text.html.vue-html expression.embedded.vue variable.other.readwrite.js, source.vue text.html.vue-html expression.embedded.vue variable.other.object.js#d1dfff
source.vue text.html.vue-html expression.embedded.vue variable.other.object.property, source.vue text.html.vue-html expression.embedded.vue variable.other.property.js#ff4579
source.vue meta.object-literal.key#d1dfff
comment, punctuation.definition.comment, string.quoted.docstring, Keyword, keyword.control, keyword.operator.expression, Storage, italic, variable.language, entity.name.method.js, entity.name.method.jsx, entity.name.method.ts, entity.name.method.tsx, entity.other.attribute-name, tag.decorator.js entity.name.tag.js, tag.decorator.js entity.name.tag.js.jsx, tag.decorator.js entity.name.tag.jsx, tag.decorator.js punctuation.definition.tag.js, source.js constant.other.object.key.js string.unquoted.label.js, markup.italic, markup.quote, storage.modifier.async.jsitalic

Shiki preview

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

Loading...

Electron vue - Coding Theme