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#cdc7d1
  • activityBar.border#c3bcc7
  • activityBar.dropBackground#d7d2db
  • activityBar.foreground#343036
  • activityBarBadge.background#aa52e0
  • activityBarBadge.foreground#f5e6ff
  • badge.background#aa52e0
  • badge.foreground#f5e6ff
  • breadcrumbPicker.background#f8f6f9
  • button.background#aa52e0
  • button.foreground#f5e6ff
  • button.hoverBackground#aa52e0
  • debugExceptionWidget.background#f8f6f9
  • debugExceptionWidget.border#f8f6f9
  • debugToolBar.background#ebe8ed
  • descriptionForeground#1f1d20
  • diffEditor.insertedTextBackground#5a49df
  • diffEditor.insertedTextBorder#5a49df
  • diffEditor.removedTextBackground#5a49df
  • diffEditor.removedTextBorder#5a49df
  • dropdown.background#ebe8ed
  • dropdown.border#cdc7d1
  • dropdown.foreground#1f1d20
  • editor.background#ebe8ed
  • editor.findMatchBackground#726b76
  • editor.findMatchHighlightBackground#867e8b
  • editor.foreground#120519
  • editor.hoverHighlightBackground#cdc7d1
  • editor.inactiveSelectionBackground#9a949e
  • editor.lineHighlightBackground#e1dde4
  • editor.rangeHighlightBackground#d7d2db
  • editor.selectionBackground#d7d2db
  • editor.selectionHighlightBackground#d7d2db
  • editor.wordHighlightBackground#cdc7d1
  • editor.wordHighlightStrongBackground#cdc7d1
  • editorBracketMatch.background#f8f6f9
  • editorBracketMatch.border#d7d2db
  • editorCodeLens.foreground#67616b
  • editorCursor.background#f8f6f9
  • editorCursor.foreground#a9a8b3
  • editorError.foreground#bd3a28
  • editorGroup.background#9a949e
  • editorGroup.border#f8f6f9
  • editorGroup.dropBackground#6e5fe3
  • editorGroupHeader.noTabsBackground#e1dde4
  • editorGroupHeader.tabsBackground#e1dde4
  • editorGroupHeader.tabsBorder#f8f6f9
  • editorGutter.addedBackground#5a49df
  • editorGutter.background#e1dde4
  • editorGutter.deletedBackground#a83324
  • editorGutter.modifiedBackground#a42375
  • editorHoverWidget.background#f8f6f9
  • editorHoverWidget.border#f8f6f9
  • editorIndentGuide.activeBackground#d7d2db
  • editorIndentGuide.background#cdc7d1
  • editorLineNumber.activeForeground#67616b
  • editorLineNumber.foreground#b9b2bd
  • editorMarkerNavigation.background#cdc7d1
  • editorMarkerNavigationError.background#f5ada3
  • editorMarkerNavigationWarning.background#f5a3d7
  • editorOverviewRuler.commonContentForeground#a42375
  • editorOverviewRuler.currentContentForeground#a42375
  • editorOverviewRuler.incomingContentForeground#a42375
  • editorRuler.foreground#67616b
  • editorSuggestWidget.background#e1dde4
  • editorSuggestWidget.border#f8f6f9
  • editorSuggestWidget.foreground#67616b
  • editorSuggestWidget.highlightForeground#5a49df
  • editorSuggestWidget.selectedBackground#f8f6f9
  • editorWarning.foreground#a42375
  • editorWhitespace.foreground#9a949e
  • editorWidget.background#f8f6f9
  • editorWidget.border#f8f6f9
  • errorForeground#d34431
  • extensionButton.prominentBackground#5a49df
  • extensionButton.prominentForeground#f8f6f9
  • extensionButton.prominentHoverBackground#5a49df
  • focusBorder#6e5fe3
  • foreground#120519
  • gitDecoration.addedResourceForeground#5a49df
  • gitDecoration.conflictingResourceForeground#a42375
  • gitDecoration.deletedResourceForeground#d34431
  • gitDecoration.ignoredResourceForeground#cdc7d1
  • gitDecoration.modifiedResourceForeground#6e5fe3
  • gitDecoration.untrackedResourceForeground#1f1d20
  • input.background#cdc7d1
  • input.border#867e8b
  • input.foreground#1f1d20
  • input.placeholderForeground#67616b
  • inputOption.activeBorder#6e5fe3
  • inputValidation.errorBackground#d34431
  • inputValidation.errorBorder#d34431
  • inputValidation.infoBackground#ebe8ed
  • inputValidation.infoBorder#a42375
  • inputValidation.warningBackground#a42375
  • inputValidation.warningBorder#a42375
  • list.activeSelectionBackground#d7d2db
  • list.activeSelectionForeground#0b070d
  • list.dropBackground#e1dde4
  • list.errorForeground#d34431
  • list.focusBackground#d7d2db
  • list.focusForeground#1f1d20
  • list.highlightForeground#6e5fe3
  • list.hoverBackground#d7d2db
  • list.hoverForeground#1f1d20
  • list.inactiveSelectionBackground#cdc7d1
  • list.inactiveSelectionForeground#67616b
  • list.invalidItemForeground#a42375
  • list.warningForeground#d34431
  • merge.currentHeaderBackground#9a949e
  • merge.incomingHeaderBackground#a42375
  • meta.objectliteral.js#a42375
  • notificationLink.foreground#6e5fe3
  • notifications.background#f8f6f9
  • notifications.foreground#1f1d20
  • panel.background#ebe8ed
  • panel.border#f8f6f9
  • panel.dropBackground#6e5fe3
  • panelTitle.activeBorder#a42375
  • panelTitle.activeForeground#0b070d
  • panelTitle.inactiveForeground#867e8b
  • peekView.border#9a949e
  • peekViewEditor.background#cdc7d1
  • peekViewEditor.matchHighlightBackground#a42375
  • peekViewResult.background#cdc7d1
  • peekViewResult.fileForeground#cdc7d1
  • peekViewResult.lineForeground#cdc7d1
  • peekViewResult.matchHighlightBackground#0b070d
  • peekViewResult.selectionBackground#d7d2db
  • peekViewResult.selectionForeground#9a949e
  • peekViewTitle.background#e1dde4
  • peekViewTitleDescription.foreground#9a949e
  • peekViewTitleLabel.foreground#9a949e
  • pickerGroup.border#f8f6f9
  • pickerGroup.foreground#1f1d20
  • progress.background#9a949e
  • progressBar.background#aa52e0
  • punctuation.definition.generic.begin.html#a42375
  • scrollbar.shadow#726b76
  • scrollbarSlider.activeBackground#b9b2bd
  • scrollbarSlider.background#cdc7d1
  • scrollbarSlider.hoverBackground#c3bcc7
  • selection.background#aa52e0
  • sideBar.background#ebe8ed
  • sideBar.border#e1dde4
  • sideBar.foreground#726b76
  • sideBarSectionHeader.background#d7d2db
  • sideBarSectionHeader.foreground#67616b
  • sideBarTitle.foreground#534e56
  • source.elm#9a949e
  • statusBar.background#afa8b3
  • statusBar.border#b9b2bd
  • statusBar.debuggingBackground#a49ea9
  • statusBar.debuggingBorder#9a949e
  • statusBar.foreground#5d5760
  • statusBar.noFolderBackground#ebe8ed
  • statusBar.noFolderBorder#cdc7d1
  • statusBarItem.activeBackground#9a949e
  • statusBarItem.hoverBackground#9a949e
  • statusBarItem.prominentBackground#d7d2db
  • statusBarItem.prominentHoverBackground#cdc7d1
  • string.quoted.single.js#581b7e
  • tab.activeBackground#ebe8ed
  • tab.activeBorder#ebe8ed
  • tab.activeForeground#1f1d20
  • tab.border#ebe8ed
  • tab.hoverBackground#d7d2db
  • tab.inactiveBackground#e1dde4
  • tab.inactiveForeground#67616b
  • tab.unfocusedActiveBorder#867e8b
  • tab.unfocusedActiveForeground#67616b
  • tab.unfocusedInactiveForeground#67616b
  • terminal.ansiBlack#cdc7d1
  • terminal.ansiBlue#aa52e0
  • terminal.ansiBrightBlack#9a949e
  • terminal.ansiBrightBlue#726b76
  • terminal.ansiBrightCyan#67616b
  • terminal.ansiBrightGreen#9a949e
  • terminal.ansiBrightMagenta#60575d
  • terminal.ansiBrightRed#6e605e
  • terminal.ansiBrightWhite#0b070d
  • terminal.ansiBrightYellow#867e8b
  • terminal.ansiCyan#6e5fe3
  • terminal.ansiGreen#5a49df
  • terminal.ansiMagenta#a42375
  • terminal.ansiRed#d34431
  • terminal.ansiWhite#1f1d20
  • terminal.ansiYellow#a42375
  • terminal.background#f8f6f9
  • terminal.foreground#48444b
  • textLink.activeForeground#6e5fe3
  • textLink.foreground#6e5fe3
  • titleBar.activeBackground#ebe8ed
  • titleBar.activeForeground#1f1d20
  • titleBar.inactiveBackground#f8f6f9
  • walkThrough.embeddedEditorBackground#f8f6f9
  • welcomePage.buttonBackground#f8f6f9
  • welcomePage.buttonHoverBackground#f8f6f9
  • widget.shadow#a49ea9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#0b070d
meta.embedded, source.groovy.embedded#48444b
comment, punctuation.definition.comment#908994italic
variable, string constant.other.placeholder#d34431
constant.other.color#120519
invalid, invalid.illegal#0b070d
keyword, punctuation.accessor, storage.type#a42375
storage.modifier#a42375
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#a49ea9
keyword.control, constant.other.color, keyword.other.template, keyword.other.substitution#6e5fe3
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#d34431
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.debugger, keyword.other.special-method#a42375
meta.block variable.other#48444b
support.other.variable, string.other.link#a83324
constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other#534e56
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#aa52e0normal
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#a42375
support.type#6e5fe3
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#721851
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#d34431
variable.language#d34431italic
entity.name.method.js#a42375italic
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#a42375
entity.other.attribute-name#a42375
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#a42375italic
entity.other.attribute-name.class#4e4e56
source.sass keyword.control#a42375
markup.inserted#5a49df
markup.deleted#d34431
markup.deleted.diff#d34431
markup.inserted.diff#5a49df
markup.changed#a42375
string.regexp#6e5fe3
constant.character.escape#6e5fe3
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#d34431italic
source.js constant.other.object.key.js string.unquoted.label.js#d34431italic
support.type.property-name.json#a42375
support.constant.json#5a49df
meta.structure.dictionary.value.json string.quoted.double#a42375
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#d34431
source.json meta.structure.dictionary.json support.type.property-name.json#a42375
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#a42375
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#5a49df
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#a42375
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#a42375
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#5a49df
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#5a49df
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#5a49df
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#5a49df
text.html.markdown, punctuation.definition.list_item.markdown#120519
text.html.markdown, beginning.punctuation.definition.list.markdown#534e56
text.html.markdown markup.inline.raw.markdown#a42375
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#726b76
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#d34431
markup.italic.markdown#a83324italic
markup.bold, markup.bold string#a83324bold
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#a83324bold
markup.underline#a42375underline
markup.strikestrike
markup.quote punctuation.definition.blockquote.markdown#ebe8ed
markup.quote.markdown#534e56
markup.quoteitalic
string.other.link.title.markdown#a42375
markup.underline.link.markdown#aa52e0
string.other.link.description.title.markdown#a42375
constant.other.reference.link.markdown#a42375
markup.raw.block#a42375
markup.raw.block.fenced.markdown#ebe8ed
punctuation.definition.fenced.markdown#ebe8ed
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#120519
variable.language.fenced.markdown#726b76
meta.separator#726b76bold
markup.table#120519
token.info-token#aa52e0
token.warn-token#a83324
token.error-token#d34431
token.debug-token#a42375
string#1f1d20
string.quoted, meta.attribute-selector.css entity.other.attribute-name.attribute, variable.other.readwrite.js#4c176d
support.constant.math#5a49df
string.regexp#5a49df
constant.numeric, constant.character.numeric#1f1d20
variable.language, variable.other#d34431
variable.language.this.js, variable.language.this.php#d34431
keyword#5a49df
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#534e56italic
entity.name.class, meta.class entity.name.type.class#a83324
entity.name.type#534e56
entity.name.function#534e56
punctuation.definition.variable#534e56
punctuation.section.embedded.begin, punctuation.section.embedded.end#8a2ac6
constant.language, punctuation.definition.constant, variable.other.constant, meta.preprocessor#5a49df
support.function.construct, keyword.other.new#8f1e66
constant.character, constant.other#a83324
constant.character.escape#a83324
string.regexp, string.regexp keyword.other#726b76
entity.other.inherited-class#a42375
entity.name.tag#d34431
punctuation.definition.tag, meta.tag#534e56
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#5a49df
entity.other.attribute-name#8a2ac6
entity.name.tag.custom#aa52e0
support.function#534e56
punctuation.separator.continuation#d34431
invalid.broken#f8f6f9
invalid.unimplemented#120519
invalid.illegal#120519
support.type, support.class#6e5fe3
support.variable.dom#6e5fe3
support.type.exception#a83324
support.other.variable
invalid#120519
invalid.deprecated#a83324
keyword.operator#6e5fe3
keyword.operator.relational#a42375italic
keyword.operator.assignment#a42375
keyword.operator.arithmetic#a42375
keyword.operator.bitwise#a42375
keyword.operator.increment#a42375
keyword.operator.ternary#a42375
comment.line.double-slash#9a949e
object#aa52e0
constant.language.null#d34431
meta.brace#9a949e
meta.delimiter.period#1f1d20
constant.language.boolean#d34431
object.comma#0b070d
variable.parameter.function#6e5fe3
support.type.vendor.property-name, support.constant.vendor.property-value, support.type.property-name, meta.property-list entity.name.tag#a42375
meta.property-list entity.name.tag.reference#aa52e0
constant.other.color.rgb-value punctuation.definition.constant#a83324
meta.selector#a42375italic
entity.other.attribute-name.id#363034
meta.property-name#6e5fe3
entity.name.tag.doctype, meta.tag.sgml.doctype#9a949eitalic
keyword.control.operator#6e5fe3
keyword.operator.logical#a42375
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property#5a49df
variable.other.object.property#1f1d20italic
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx#1f1d20
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#8a2ac6italic
variable.interpolation#d34431
support.variable.property#6e5fe3
string.template meta.template.expression#d34431
string.template punctuation.definition.string#1f1d20
italic#a42375italic
bold#5a49dfbold
quote#9a949eitalic
raw#534e56
variable.assignment.coffee#6e5fe3
variable.parameter.function.coffee#1f1d20
variable.assignment.coffee#5a49df
variable.other.readwrite.cs#1f1d20
entity.name.type.class.cs, storage.type.cs#a42375
entity.name.type.namespace.cs#534e56
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#27272b
support.constant.property-value.css#4b38dc
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#6e5fe3
keyword.other.unit.css, keyword.control.at-rule.media.css#6e5fe3
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#a42375
source.elixir entity.name.function#5a49df
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#aa52e0
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#5a49df
source.elixir .punctuation.binary.elixir#a42375italic
source.go meta.function-call.go#534e56
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#a42375italic
source.go constant.language.go, source.go constant.other.placeholder.go#d34431
meta.class entity.name.type.class.js#a83324
meta.method.declaration storage.type.js#4e4e56
terminator.js#1f1d20
meta.js punctuation.definition.js#1f1d20
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc#9a949e
variable.other.jsdoc, variable.other.phpdoc#6e5fe3
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other#1f1d20
variable.parameter.function.js#a42375
variable.js, variable.other.js#1f1d20
entity.name.type.js, entity.name.type.module.js#a83324
support.class.js#1f1d20
variable.other.ruby#1f1d20
entity.name.type.class.ruby#a83324
constant.language.symbol.hashkey.ruby#5a49df
meta.attribute-selector.less entity.other.attribute-name.attribute#a83324
variable.other.php, variable.other.property.php#1f1d20
support.class.php#a83324
meta.function-call.php punctuation#1f1d20
variable.other.global.php#5a49df
variable.other.global.php punctuation.definition.variable#5a49df
constant.language.python#d34431
variable.parameter.function.python, meta.function-call.arguments.python#a42375
meta.function-call.python, meta.function-call.generic.python#1f1d20
punctuation.python#1f1d20
entity.name.function.decorator.python#5a49df
source.python variable.language.special#a42375
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass#4e4e56
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#a42375
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute#a83324
entity.name.tag.scss, entity.name.tag.sass#5a49df
keyword.other.unit.scss, keyword.other.unit.sass#a42375
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#1f1d20
entity.name.type.ts, entity.name.type.tsx#a83324
support.class.node.ts, support.class.node.tsx#a42375
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#9a949e
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block#1f1d20
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#a42375
meta.tag.js meta.jsx.children.tsx#a42375
entity.name.tag.yaml#5a49df
variable.other.readwrite.js, variable.parameter#7524a8
support.class.component.js, support.class.component.tsx#a83324
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#1f1d20
meta.class entity.name.type.class.tsx#a83324
entity.name.type.tsx, entity.name.type.module.tsx#a83324
meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx#a42375
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#1f1d20italic
markup.deleted#1f1d20
markup.changed#1f1d20
markup.inserted#1f1d20
markup.quote#5a49df
markup.list#5a49df
markup.bold, markup.italic#a83324
markup.inline.raw#726b76
markup.heading.setext#aa52e0

Shiki preview

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

Loading...