Skip to main content
CodingTheme

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

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#7AA2F7
markup.deleted.diff#ff457990
markup.inserted.diff#8dff8d
comment.line.double-slash, comment, punctuation.definition.comment, comment.block, comment.line, comment.block.documentation, comment.line.double-slash#d1dfff46
string#8dff8d
string.quoted, variable.other.readwrite.js#8dff8d
support.constant.math#ffbf7a
constant.numeric, constant.character.numeric#ffbf7a
constant.language, punctuation.definition.constant, variable.other.constant#7AA2F7
constant.character, constant.other#7AA2F7
constant.character.escape#ffbf7a
string.regexp, string.regexp keyword.other#7AA2F7
meta.function punctuation.separator.comma#00d9ff
variable#8dff8d
storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js#de7df7
storage.type#de7df7
storage.type.function.arrow.js#de7df7
storage.modifier#de7df7
entity.name.class, meta.class entity.name.type.class#fffa9e
storage.modifier.async.js#fffa9e
entity.other.inherited-class#8dff8d
entity.name.function#7AA2F7
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#8dff8d
support.function, support.constant#7AA2F7
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#de7df7
object#bac7e4
constant.language.null#ff4579
meta.brace#bac7e4
meta.delimiter.period#bac7e4
meta.object-literal.key#d1dfff
punctuation.definition.string#8dff8d
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#de7df7
entity.other.attribute-name.id#7AA2F7
meta.property-name#00d9ff
entity.name.tag.doctype, meta.tag.sgml.doctype#de7df7
punctuation.definition.parameters#00d9ff
keyword.control.operator#00d9ff
keyword.operator.logical#de7df7
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#7AA2F7
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#de7df7
keyword.control.conditional.js#de7df7
support.constant, keyword.other.special-method, keyword.other.new, keyword.operator.new, keyword.control#de7df7
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#7AA2F7
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#8dff8d
string.template meta.template.expression#ff4579
string.template punctuation.definition.string#8dff8d
italic#de7df7
bold#8dff8dbold
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#de7df7
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#de7df7
keyword.other.important.scss, keyword.other.important.css#8dff8ditalic bold
entity.other.attribute-name.id.css#7AA2F7
support.constant.font-name, support.constant.color#ffbf7a
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#7AA2F7
source.elixir entity.name.function#8dff8d
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#7AA2F7
source.elixir punctuation.definition.string#8dff8d
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#8dff8d
source.elixir .punctuation.binary.elixir#de7df7
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#de7df7
meta.class entity.name.type.class.js, support.class.builtin.js#fffa9e
meta.method.declaration storage.type.js#7AA2F7
meta.method.declaration meta.var.expr.js storage.type.js#de7df7
storage.type.class.js#de7df7
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#7AA2F7
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#7AA2F7
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#7AA2F7
support.constant.json#7AA2F7
meta.structure.dictionary.value.json string.quoted.double#8dff8d
string.quoted.double.json punctuation.definition.string.json, punctuation.definition.string.json#8dff8d
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#de7df7
markup.bold.markdown, punctuation.definition.bold.markdown#ffbf7abold
beginning.punctuation.definition.quote.markdown, markup.quote.markdown#00d9ff
markup.inline.raw.markdown, markup.inline.raw#8dff8d
markup.underline.link.markdown, markup.underline.link.image.markdown#00d9ff
string.other.link.title.markdown, string.other.link.description.markdown#7AA2F7
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#8dff8d
variable.other.global.php punctuation.definition.variable#8dff8d
constant.language.python#ff4579
variable.parameter.function.python, meta.function-call.arguments.python#7AA2F7
meta.function-call.python, meta.function-call.generic.python#7AA2F7
punctuation.python#bac7e4
entity.name.function.decorator.python#8dff8d
source.python variable.language.special#7AA2F7
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#7AA2F7
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#7AA2F7
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#7AA2F7
meta.tag.js meta.jsx.children.tsx#7AA2F7
entity.name.tag.yaml#7AA2F7
variable.other.readwrite.js, variable.parameter#bac7e4
support.class.component.js, support.class.component.js.jsx, support.class.component.tsx#fffa9e
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#7AA2F7
token.info-token#7AA2F7
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#de7df7
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#8dff8d
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.js

Shiki preview

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

Loading...