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.background#161217
  • activityBar.border#0c070d
  • activityBar.dropBackground#3f3a40
  • activityBar.foreground#a79ea9
  • activityBarBadge.background#ca45de
  • activityBarBadge.foreground#fce6ff
  • badge.background#ca45de
  • badge.foreground#e3dde4
  • breadcrumbPicker.background#0c070d
  • button.background#ca45de
  • button.foreground#e3dde4
  • button.hoverBackground#ca45de
  • debugExceptionWidget.background#0c070d
  • debugExceptionWidget.border#0c070d
  • debugToolBar.background#161217
  • descriptionForeground#e3dde4
  • diffEditor.insertedTextBackground#af88f2
  • diffEditor.insertedTextBorder#af88f2
  • diffEditor.removedTextBackground#af88f2
  • diffEditor.removedTextBorder#af88f2
  • dropdown.background#161217
  • dropdown.border#353036
  • dropdown.foreground#e3dde4
  • editor.background#201d20
  • editor.findMatchBackground#9d949e
  • editor.findMatchHighlightBackground#897e8b
  • editor.foreground#fce6ff
  • editor.hoverHighlightBackground#3f3a40
  • editor.inactiveSelectionBackground#746b76
  • editor.lineHighlightBackground#2a272b
  • editor.rangeHighlightBackground#3f3a40
  • editor.selectionBackground#3f3a40
  • editor.selectionHighlightBackground#3f3a40
  • editor.wordHighlightBackground#3f3a40
  • editor.wordHighlightStrongBackground#3f3a40
  • editorBracketMatch.background#0c070d
  • editorBracketMatch.border#2a272b
  • editorCodeLens.foreground#a79ea9
  • editorCursor.background#0c070d
  • editorCursor.foreground#65616b
  • editorError.foreground#e6854d
  • editorGroup.background#746b76
  • editorGroup.border#0c070d
  • editorGroup.dropBackground#9c6cef
  • editorGroupHeader.noTabsBackground#201d20
  • editorGroupHeader.tabsBackground#201d20
  • editorGroupHeader.tabsBorder#0c070d
  • editorGutter.addedBackground#af88f2
  • editorGutter.background#161217
  • editorGutter.deletedBackground#e78b55
  • editorGutter.modifiedBackground#eb75a2
  • editorHoverWidget.background#0c070d
  • editorHoverWidget.border#0c070d
  • editorIndentGuide.activeBackground#353036
  • editorIndentGuide.background#2a272b
  • editorLineNumber.activeForeground#a79ea9
  • editorLineNumber.foreground#554e56
  • editorMarkerNavigation.background#2a272b
  • editorMarkerNavigationError.background#4c2610
  • editorMarkerNavigationWarning.background#501129
  • editorOverviewRuler.commonContentForeground#eb75a2
  • editorOverviewRuler.currentContentForeground#eb75a2
  • editorOverviewRuler.incomingContentForeground#eb75a2
  • editorRuler.foreground#a79ea9
  • editorSuggestWidget.background#161217
  • editorSuggestWidget.border#0c070d
  • editorSuggestWidget.foreground#a79ea9
  • editorSuggestWidget.highlightForeground#af88f2
  • editorSuggestWidget.selectedBackground#0c070d
  • editorWarning.foreground#eb75a2
  • editorWhitespace.foreground#746b76
  • editorWidget.background#0c070d
  • editorWidget.border#0c070d
  • errorForeground#e47b3f
  • extensionButton.prominentBackground#af88f2
  • extensionButton.prominentForeground#f8f6f9
  • extensionButton.prominentHoverBackground#af88f2
  • focusBorder#9c6cef
  • foreground#fce6ff
  • gitDecoration.addedResourceForeground#af88f2
  • gitDecoration.conflictingResourceForeground#eb75a2
  • gitDecoration.deletedResourceForeground#e47b3f
  • gitDecoration.ignoredResourceForeground#3f3a40
  • gitDecoration.modifiedResourceForeground#9c6cef
  • gitDecoration.untrackedResourceForeground#e3dde4
  • input.background#3f3a40
  • input.border#897e8b
  • input.foreground#e3dde4
  • input.placeholderForeground#a79ea9
  • inputOption.activeBorder#9c6cef
  • inputValidation.errorBackground#e47b3f
  • inputValidation.errorBorder#e47b3f
  • inputValidation.infoBackground#161217
  • inputValidation.infoBorder#eb75a2
  • inputValidation.warningBackground#eb75a2
  • inputValidation.warningBorder#eb75a2
  • list.activeSelectionBackground#3f3a40
  • list.activeSelectionForeground#f8f6f9
  • list.dropBackground#3f3a40
  • list.errorForeground#e47b3f
  • list.focusBackground#3f3a40
  • list.focusForeground#e3dde4
  • list.highlightForeground#9c6cef
  • list.hoverBackground#3f3a40
  • list.hoverForeground#e3dde4
  • list.inactiveSelectionBackground#3f3a40
  • list.inactiveSelectionForeground#a79ea9
  • list.invalidItemForeground#eb75a2
  • list.warningForeground#e47b3f
  • merge.currentHeaderBackground#746b76
  • merge.incomingHeaderBackground#eb75a2
  • meta.objectliteral.js#eb75a2
  • notificationLink.foreground#9c6cef
  • notifications.background#0c070d
  • notifications.foreground#e3dde4
  • panel.background#161217
  • panel.border#0c070d
  • panel.dropBackground#9c6cef
  • panelTitle.activeBorder#eb75a2
  • panelTitle.activeForeground#f8f6f9
  • panelTitle.inactiveForeground#897e8b
  • peekView.border#746b76
  • peekViewEditor.background#2a272b
  • peekViewEditor.matchHighlightBackground#eb75a2
  • peekViewResult.background#161217
  • peekViewResult.fileForeground#3f3a40
  • peekViewResult.lineForeground#3f3a40
  • peekViewResult.matchHighlightBackground#f8f6f9
  • peekViewResult.selectionBackground#3f3a40
  • peekViewResult.selectionForeground#746b76
  • peekViewTitle.background#161217
  • peekViewTitleDescription.foreground#746b76
  • peekViewTitleLabel.foreground#746b76
  • pickerGroup.border#0c070d
  • pickerGroup.foreground#e3dde4
  • progress.background#746b76
  • progressBar.background#ca45de
  • punctuation.definition.generic.begin.html#eb75a2
  • scrollbar.shadow#0c070d
  • scrollbarSlider.activeBackground#4a444b
  • scrollbarSlider.background#2a272b
  • scrollbarSlider.hoverBackground#3f3a40
  • selection.background#ca45de
  • sideBar.background#2a272b
  • sideBar.border#201d20
  • sideBar.foreground#746b76
  • sideBarSectionHeader.background#3f3a40
  • sideBarSectionHeader.foreground#a79ea9
  • sideBarTitle.foreground#a79ea9
  • source.elm#746b76
  • statusBar.background#161217
  • statusBar.border#201d20
  • statusBar.debuggingBackground#161217
  • statusBar.debuggingBorder#161217
  • statusBar.foreground#746b76
  • statusBar.noFolderBackground#161217
  • statusBar.noFolderBorder#3f3a40
  • statusBarItem.activeBackground#746b76
  • statusBarItem.hoverBackground#201d20
  • statusBarItem.prominentBackground#3f3a40
  • statusBarItem.prominentHoverBackground#3f3a40
  • string.quoted.single.js#eaa3f5
  • tab.activeBackground#201d20
  • tab.activeBorder#201d20
  • tab.activeForeground#e3dde4
  • tab.border#201d20
  • tab.hoverBackground#2a272b
  • tab.inactiveBackground#353036
  • tab.inactiveForeground#a79ea9
  • tab.unfocusedActiveBorder#897e8b
  • tab.unfocusedActiveForeground#a79ea9
  • tab.unfocusedInactiveForeground#a79ea9
  • terminal.ansiBlack#3f3a40
  • terminal.ansiBlue#ca45de
  • terminal.ansiBrightBlack#746b76
  • terminal.ansiBrightBlue#9d949e
  • terminal.ansiBrightCyan#a79ea9
  • terminal.ansiBrightGreen#746b76
  • terminal.ansiBrightMagenta#b2a9ac
  • terminal.ansiBrightRed#aba19b
  • terminal.ansiBrightWhite#f8f6f9
  • terminal.ansiBrightYellow#897e8b
  • terminal.ansiCyan#9c6cef
  • terminal.ansiGreen#af88f2
  • terminal.ansiMagenta#eb75a2
  • terminal.ansiRed#e47b3f
  • terminal.ansiWhite#e3dde4
  • terminal.ansiYellow#eb75a2
  • terminal.background#0c070d
  • terminal.foreground#c6bcc7
  • textLink.activeForeground#9c6cef
  • textLink.foreground#9c6cef
  • titleBar.activeBackground#161217
  • titleBar.activeForeground#e3dde4
  • titleBar.inactiveBackground#0c070d
  • walkThrough.embeddedEditorBackground#0c070d
  • welcomePage.buttonBackground#0c070d
  • welcomePage.buttonHoverBackground#0c070d
  • widget.shadow#0c070d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#fce6ff
meta.embedded, source.groovy.embedded#bcb2bd
comment, punctuation.definition.comment#7f7481italic
variable, string constant.other.placeholder#e47b3f
constant.other.color#fce6ff
invalid, invalid.illegal#f8f6f9
keyword, punctuation.accessor, storage.type#eb75a2
storage.modifier#eb75a2
punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, meta.function punctuation.separator.comma, punctuation.definition.string, punctuation.definition.parameters, punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list, meta.array, source.elixir punctuation.definition.string, string.quoted.double.json punctuation.definition.string.json#6a616b
keyword.control, constant.other.color, keyword.other.template, keyword.other.substitution#9c6cef
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#e47b3f
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.debugger, keyword.other.special-method#eb75a2
meta.block variable.other#bcb2bd
support.other.variable, string.other.link#e78b55
constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other#bcb2bd
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#ca45denormal
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#eb75a2
support.type#9c6cef
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#f391b6
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#e47b3f
variable.language#e47b3fitalic
entity.name.method.js#eb75a2italic
meta.class-method.js entity.name.function.js, variable.function.constructor, keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.switch.js, keyword.control.switch.ts#eb75a2
entity.other.attribute-name#eb75a2
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#eb75a2italic
entity.other.attribute-name.class#b6b2bd
source.sass keyword.control#eb75a2
markup.inserted#af88f2
markup.deleted#e47b3f
markup.deleted.diff#e47b3f
markup.inserted.diff#af88f2
markup.changed#eb75a2
string.regexp#9c6cef
constant.character.escape#9c6cef
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#e47b3fitalic
source.js constant.other.object.key.js string.unquoted.label.js#e47b3fitalic
support.type.property-name.json#eb75a2
support.constant.json#af88f2
meta.structure.dictionary.value.json string.quoted.double#eb75a2
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#e47b3f
source.json meta.structure.dictionary.json support.type.property-name.json#eb75a2
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#eb75a2
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#af88f2
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#eb75a2
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#eb75a2
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#af88f2
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#af88f2
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#af88f2
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#af88f2
text.html.markdown, punctuation.definition.list_item.markdown#fce6ff
text.html.markdown, beginning.punctuation.definition.list.markdown#bcb2bd
text.html.markdown markup.inline.raw.markdown#eb75a2
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#9d949e
text.html.markdown meta.dummy.line-break
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, markup.heading1, markup.heading.markdown, entity.name, entity.name.section.markdown, heading.1.markdown#e47b3f
markup.italic.markdown#e78b55italic
markup.bold, markup.bold string#e78b55bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#e78b55bold
markup.underline#eb75a2underline
markup.strikestrike
markup.quote punctuation.definition.blockquote.markdown#161217
markup.quote.markdown#bcb2bd
markup.quoteitalic
string.other.link.title.markdown#eb75a2
markup.underline.link.markdown#ca45de
string.other.link.description.title.markdown#eb75a2
constant.other.reference.link.markdown#eb75a2
markup.raw.block#eb75a2
markup.raw.block.fenced.markdown#161217
punctuation.definition.fenced.markdown#161217
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#fce6ff
variable.language.fenced.markdown#9d949e
meta.separator#9d949ebold
markup.table#fce6ff
token.info-token#ca45de
token.warn-token#e78b55
token.error-token#e47b3f
token.debug-token#eb75a2
string#e3dde4
string.quoted, meta.attribute-selector.css entity.other.attribute-name.attribute, variable.other.readwrite.js#eaa3f5
support.constant.math#af88f2
string.regexp#af88f2
constant.numeric, constant.character.numeric#e3dde4
variable.language, variable.other#e47b3f
variable.language.this.js, variable.language.this.php#e47b3f
keyword#af88f2
storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx#bcb2bditalic
entity.name.class, meta.class entity.name.type.class#e78b55
entity.name.type#bcb2bd
entity.name.function#bcb2bd
punctuation.definition.variable#bcb2bd
punctuation.section.embedded.begin, punctuation.section.embedded.end#db75eb
constant.language, punctuation.definition.constant, variable.other.constant, meta.preprocessor#af88f2
support.function.construct, keyword.other.new#f17eaa
constant.character, constant.other#e78b55
constant.character.escape#e78b55
string.regexp, string.regexp keyword.other#9d949e
entity.other.inherited-class#eb75a2
entity.name.tag#e47b3f
punctuation.definition.tag, meta.tag#bcb2bd
entity.name.tag, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html#af88f2
entity.other.attribute-name#db75eb
entity.name.tag.custom#ca45de
support.function#bcb2bd
punctuation.separator.continuation#e47b3f
invalid.broken#0c070d
invalid.unimplemented#fce6ff
invalid.illegal#fce6ff
support.type, support.class#9c6cef
support.variable.dom#9c6cef
support.type.exception#e78b55
support.other.variable
invalid#fce6ff
invalid.deprecated#e78b55
keyword.operator#9c6cef
keyword.operator.relational#eb75a2italic
keyword.operator.assignment#eb75a2
keyword.operator.arithmetic#eb75a2
keyword.operator.bitwise#eb75a2
keyword.operator.increment#eb75a2
keyword.operator.ternary#eb75a2
comment.line.double-slash#746b76
object#ca45de
constant.language.null#e47b3f
meta.brace#746b76
meta.delimiter.period#e3dde4
constant.language.boolean#e47b3f
object.comma#f8f6f9
variable.parameter.function#9c6cef
support.type.vendor.property-name, support.constant.vendor.property-value, support.type.property-name, meta.property-list entity.name.tag#eb75a2
meta.property-list entity.name.tag.reference#ca45de
constant.other.color.rgb-value punctuation.definition.constant#e78b55
meta.selector#eb75a2italic
entity.other.attribute-name.id#dad2d5
meta.property-name#9c6cef
entity.name.tag.doctype, meta.tag.sgml.doctype#746b76italic
keyword.control.operator#9c6cef
keyword.operator.logical#eb75a2
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property#af88f2
variable.other.object.property#e3dde4italic
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx#e3dde4
keyword.operator.comparison, keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.ruby, keyword.control.module.ruby, keyword.control.class.ruby, keyword.control.def.ruby, keyword.control.loop.js, keyword.control.loop.ts, keyword.control.import.js, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx#db75ebitalic
variable.interpolation#e47b3f
support.variable.property#9c6cef
string.template meta.template.expression#e47b3f
string.template punctuation.definition.string#e3dde4
italic#eb75a2italic
bold#af88f2bold
quote#746b76italic
raw#bcb2bd
variable.assignment.coffee#9c6cef
variable.parameter.function.coffee#e3dde4
variable.assignment.coffee#af88f2
variable.other.readwrite.cs#e3dde4
entity.name.type.class.cs, storage.type.cs#eb75a2
entity.name.type.namespace.cs#bcb2bd
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#d5d2db
support.constant.property-value.css#b792f6
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#9c6cef
keyword.other.unit.css, keyword.control.at-rule.media.css#9c6cef
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#eb75a2
source.elixir entity.name.function#af88f2
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#ca45de
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#af88f2
source.elixir .punctuation.binary.elixir#eb75a2italic
source.go meta.function-call.go#bcb2bd
source.go keyword.package.go, source.go keyword.import.go, source.go keyword.function.go, source.go keyword.type.go, source.go keyword.struct.go, source.go keyword.interface.go, source.go keyword.const.go, source.go keyword.var.go, source.go keyword.map.go, source.go keyword.channel.go, source.go keyword.control.go#eb75a2italic
source.go constant.language.go, source.go constant.other.placeholder.go#e47b3f
meta.class entity.name.type.class.js#e78b55
meta.method.declaration storage.type.js#b6b2bd
terminator.js#e3dde4
meta.js punctuation.definition.js#e3dde4
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc#746b76
variable.other.jsdoc, variable.other.phpdoc#9c6cef
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other#e3dde4
variable.parameter.function.js#eb75a2
variable.js, variable.other.js#e3dde4
entity.name.type.js, entity.name.type.module.js#e78b55
support.class.js#e3dde4
variable.other.ruby#e3dde4
entity.name.type.class.ruby#e78b55
constant.language.symbol.hashkey.ruby#af88f2
meta.attribute-selector.less entity.other.attribute-name.attribute#e78b55
variable.other.php, variable.other.property.php#e3dde4
support.class.php#e78b55
meta.function-call.php punctuation#e3dde4
variable.other.global.php#af88f2
variable.other.global.php punctuation.definition.variable#af88f2
constant.language.python#e47b3f
variable.parameter.function.python, meta.function-call.arguments.python#eb75a2
meta.function-call.python, meta.function-call.generic.python#e3dde4
punctuation.python#e3dde4
entity.name.function.decorator.python#af88f2
source.python variable.language.special#eb75a2
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass#b6b2bd
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#eb75a2
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute#e78b55
entity.name.tag.scss, entity.name.tag.sass#af88f2
keyword.other.unit.scss, keyword.other.unit.sass#eb75a2
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#e3dde4
entity.name.type.ts, entity.name.type.tsx#e78b55
support.class.node.ts, support.class.node.tsx#eb75a2
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#746b76
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block#e3dde4
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#eb75a2
meta.tag.js meta.jsx.children.tsx#eb75a2
entity.name.tag.yaml#af88f2
variable.other.readwrite.js, variable.parameter#e17ef1
support.class.component.js, support.class.component.tsx#e78b55
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#e3dde4
meta.class entity.name.type.class.tsx#e78b55
entity.name.type.tsx, entity.name.type.module.tsx#e78b55
meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx#eb75a2
meta.property-list.css meta.property-value.css variable.other.less, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, meta.brace, keyword.operator.operator, keyword.operator.or.regexp, keyword.operator.expression.in, keyword.operator.relational, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.type, keyword.operator, keyword, punctuation.definintion.string, punctuation, variable.other.readwrite.js, storage.type, source.css, entity.other.attribute-name.class, entity.other.attribute-name.id, string.quoted
meta.diff, meta.diff.header#e3dde4italic
markup.deleted#e3dde4
markup.changed#e3dde4
markup.inserted#e3dde4
markup.quote#af88f2
markup.list#af88f2
markup.bold, markup.italic#e78b55
markup.inline.raw#9d949e
markup.heading.setext#ca45de

Shiki preview

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

Loading...