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#c8c7d1
  • activityBar.border#bebcc7
  • activityBar.dropBackground#d3d2db
  • activityBar.foreground#313036
  • activityBarBadge.background#7e70e6
  • activityBarBadge.foreground#f1f0ff
  • badge.background#7e70e6
  • badge.foreground#f1f0ff
  • breadcrumbPicker.background#f6f6f9
  • button.background#7e70e6
  • button.foreground#f1f0ff
  • button.hoverBackground#7e70e6
  • debugExceptionWidget.background#f6f6f9
  • debugExceptionWidget.border#f6f6f9
  • debugToolBar.background#e9e8ed
  • descriptionForeground#1d1d20
  • diffEditor.insertedTextBackground#1a68e6
  • diffEditor.insertedTextBorder#1a68e6
  • diffEditor.removedTextBackground#1a68e6
  • diffEditor.removedTextBorder#1a68e6
  • dropdown.background#e9e8ed
  • dropdown.border#c8c7d1
  • dropdown.foreground#1d1d20
  • editor.background#e9e8ed
  • editor.findMatchBackground#6c6b76
  • editor.findMatchHighlightBackground#807e8b
  • editor.foreground#0d0830
  • editor.hoverHighlightBackground#c8c7d1
  • editor.inactiveSelectionBackground#95949e
  • editor.lineHighlightBackground#dedde4
  • editor.rangeHighlightBackground#d3d2db
  • editor.selectionBackground#d3d2db
  • editor.selectionHighlightBackground#d3d2db
  • editor.wordHighlightBackground#c8c7d1
  • editor.wordHighlightStrongBackground#c8c7d1
  • editorBracketMatch.background#f6f6f9
  • editorBracketMatch.border#d3d2db
  • editorCodeLens.foreground#62616b
  • editorCursor.background#f6f6f9
  • editorCursor.foreground#a0aaba
  • editorError.foreground#bd2887
  • editorGroup.background#95949e
  • editorGroup.border#f6f6f9
  • editorGroup.dropBackground#3077e8
  • editorGroupHeader.noTabsBackground#dedde4
  • editorGroupHeader.tabsBackground#dedde4
  • editorGroupHeader.tabsBorder#f6f6f9
  • editorGutter.addedBackground#1a68e6
  • editorGutter.background#dedde4
  • editorGutter.deletedBackground#a42375
  • editorGutter.modifiedBackground#8a2ac6
  • editorHoverWidget.background#f6f6f9
  • editorHoverWidget.border#f6f6f9
  • editorIndentGuide.activeBackground#d3d2db
  • editorIndentGuide.background#c8c7d1
  • editorLineNumber.activeForeground#62616b
  • editorLineNumber.foreground#b3b2bd
  • editorMarkerNavigation.background#c8c7d1
  • editorMarkerNavigationError.background#f5a3d7
  • editorMarkerNavigationWarning.background#daacf6
  • editorOverviewRuler.commonContentForeground#8a2ac6
  • editorOverviewRuler.currentContentForeground#8a2ac6
  • editorOverviewRuler.incomingContentForeground#8a2ac6
  • editorRuler.foreground#62616b
  • editorSuggestWidget.background#dedde4
  • editorSuggestWidget.border#f6f6f9
  • editorSuggestWidget.foreground#62616b
  • editorSuggestWidget.highlightForeground#1a68e6
  • editorSuggestWidget.selectedBackground#f6f6f9
  • editorWarning.foreground#8a2ac6
  • editorWhitespace.foreground#95949e
  • editorWidget.background#f6f6f9
  • editorWidget.border#f6f6f9
  • errorForeground#ce2c93
  • extensionButton.prominentBackground#1a68e6
  • extensionButton.prominentForeground#f6f6f9
  • extensionButton.prominentHoverBackground#1a68e6
  • focusBorder#3077e8
  • foreground#0d0830
  • gitDecoration.addedResourceForeground#1a68e6
  • gitDecoration.conflictingResourceForeground#8a2ac6
  • gitDecoration.deletedResourceForeground#ce2c93
  • gitDecoration.ignoredResourceForeground#c8c7d1
  • gitDecoration.modifiedResourceForeground#3077e8
  • gitDecoration.untrackedResourceForeground#1d1d20
  • input.background#c8c7d1
  • input.border#807e8b
  • input.foreground#1d1d20
  • input.placeholderForeground#62616b
  • inputOption.activeBorder#3077e8
  • inputValidation.errorBackground#ce2c93
  • inputValidation.errorBorder#ce2c93
  • inputValidation.infoBackground#e9e8ed
  • inputValidation.infoBorder#8a2ac6
  • inputValidation.warningBackground#8a2ac6
  • inputValidation.warningBorder#8a2ac6
  • list.activeSelectionBackground#d3d2db
  • list.activeSelectionForeground#08070d
  • list.dropBackground#dedde4
  • list.errorForeground#ce2c93
  • list.focusBackground#d3d2db
  • list.focusForeground#1d1d20
  • list.highlightForeground#3077e8
  • list.hoverBackground#d3d2db
  • list.hoverForeground#1d1d20
  • list.inactiveSelectionBackground#c8c7d1
  • list.inactiveSelectionForeground#62616b
  • list.invalidItemForeground#8a2ac6
  • list.warningForeground#ce2c93
  • merge.currentHeaderBackground#95949e
  • merge.incomingHeaderBackground#8a2ac6
  • meta.objectliteral.js#8a2ac6
  • notificationLink.foreground#3077e8
  • notifications.background#f6f6f9
  • notifications.foreground#1d1d20
  • panel.background#e9e8ed
  • panel.border#f6f6f9
  • panel.dropBackground#3077e8
  • panelTitle.activeBorder#8a2ac6
  • panelTitle.activeForeground#08070d
  • panelTitle.inactiveForeground#807e8b
  • peekView.border#95949e
  • peekViewEditor.background#c8c7d1
  • peekViewEditor.matchHighlightBackground#8a2ac6
  • peekViewResult.background#c8c7d1
  • peekViewResult.fileForeground#c8c7d1
  • peekViewResult.lineForeground#c8c7d1
  • peekViewResult.matchHighlightBackground#08070d
  • peekViewResult.selectionBackground#d3d2db
  • peekViewResult.selectionForeground#95949e
  • peekViewTitle.background#dedde4
  • peekViewTitleDescription.foreground#95949e
  • peekViewTitleLabel.foreground#95949e
  • pickerGroup.border#f6f6f9
  • pickerGroup.foreground#1d1d20
  • progress.background#95949e
  • progressBar.background#7e70e6
  • punctuation.definition.generic.begin.html#8a2ac6
  • scrollbar.shadow#6c6b76
  • scrollbarSlider.activeBackground#b3b2bd
  • scrollbarSlider.background#c8c7d1
  • scrollbarSlider.hoverBackground#bebcc7
  • selection.background#7e70e6
  • sideBar.background#e9e8ed
  • sideBar.border#dedde4
  • sideBar.foreground#6c6b76
  • sideBarSectionHeader.background#d3d2db
  • sideBarSectionHeader.foreground#62616b
  • sideBarTitle.foreground#4e4e56
  • source.elm#95949e
  • statusBar.background#a9a8b3
  • statusBar.border#b3b2bd
  • statusBar.debuggingBackground#9f9ea9
  • statusBar.debuggingBorder#95949e
  • statusBar.foreground#585760
  • statusBar.noFolderBackground#e9e8ed
  • statusBar.noFolderBorder#c8c7d1
  • statusBarItem.activeBackground#95949e
  • statusBarItem.hoverBackground#95949e
  • statusBarItem.prominentBackground#d3d2db
  • statusBarItem.prominentHoverBackground#c8c7d1
  • string.quoted.single.js#3925d0
  • tab.activeBackground#e9e8ed
  • tab.activeBorder#e9e8ed
  • tab.activeForeground#1d1d20
  • tab.border#e9e8ed
  • tab.hoverBackground#d3d2db
  • tab.inactiveBackground#dedde4
  • tab.inactiveForeground#62616b
  • tab.unfocusedActiveBorder#807e8b
  • tab.unfocusedActiveForeground#62616b
  • tab.unfocusedInactiveForeground#62616b
  • terminal.ansiBlack#c8c7d1
  • terminal.ansiBlue#7e70e6
  • terminal.ansiBrightBlack#95949e
  • terminal.ansiBrightBlue#6c6b76
  • terminal.ansiBrightCyan#62616b
  • terminal.ansiBrightGreen#95949e
  • terminal.ansiBrightMagenta#5d5760
  • terminal.ansiBrightRed#6b6167
  • terminal.ansiBrightWhite#08070d
  • terminal.ansiBrightYellow#807e8b
  • terminal.ansiCyan#3077e8
  • terminal.ansiGreen#1a68e6
  • terminal.ansiMagenta#8a2ac6
  • terminal.ansiRed#ce2c93
  • terminal.ansiWhite#1d1d20
  • terminal.ansiYellow#8a2ac6
  • terminal.background#f6f6f9
  • terminal.foreground#45444b
  • textLink.activeForeground#3077e8
  • textLink.foreground#3077e8
  • titleBar.activeBackground#e9e8ed
  • titleBar.activeForeground#1d1d20
  • titleBar.inactiveBackground#f6f6f9
  • walkThrough.embeddedEditorBackground#f6f6f9
  • welcomePage.buttonBackground#f6f6f9
  • welcomePage.buttonHoverBackground#f6f6f9
  • widget.shadow#9f9ea9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#08070d
meta.embedded, source.groovy.embedded#45444b
comment, punctuation.definition.comment#8a8994italic
variable, string constant.other.placeholder#ce2c93
constant.other.color#0d0830
invalid, invalid.illegal#08070d
keyword, punctuation.accessor, storage.type#8a2ac6
storage.modifier#8a2ac6
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#9f9ea9
keyword.control, constant.other.color, keyword.other.template, keyword.other.substitution#3077e8
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#ce2c93
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.debugger, keyword.other.special-method#8a2ac6
meta.block variable.other#45444b
support.other.variable, string.other.link#a42375
constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other#4e4e56
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#7e70e6normal
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#8a2ac6
support.type#3077e8
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#581b7e
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ce2c93
variable.language#ce2c93italic
entity.name.method.js#8a2ac6italic
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#8a2ac6
entity.other.attribute-name#8a2ac6
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#8a2ac6italic
entity.other.attribute-name.class#454f5f
source.sass keyword.control#8a2ac6
markup.inserted#1a68e6
markup.deleted#ce2c93
markup.deleted.diff#ce2c93
markup.inserted.diff#1a68e6
markup.changed#8a2ac6
string.regexp#3077e8
constant.character.escape#3077e8
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#ce2c93italic
source.js constant.other.object.key.js string.unquoted.label.js#ce2c93italic
support.type.property-name.json#8a2ac6
support.constant.json#1a68e6
meta.structure.dictionary.value.json string.quoted.double#8a2ac6
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#ce2c93
source.json meta.structure.dictionary.json support.type.property-name.json#8a2ac6
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8a2ac6
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#1a68e6
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#8a2ac6
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#8a2ac6
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#1a68e6
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#1a68e6
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#1a68e6
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#1a68e6
text.html.markdown, punctuation.definition.list_item.markdown#0d0830
text.html.markdown, beginning.punctuation.definition.list.markdown#4e4e56
text.html.markdown markup.inline.raw.markdown#8a2ac6
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#6c6b76
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#ce2c93
markup.italic.markdown#a42375italic
markup.bold, markup.bold string#a42375bold
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#a42375bold
markup.underline#8a2ac6underline
markup.strikestrike
markup.quote punctuation.definition.blockquote.markdown#e9e8ed
markup.quote.markdown#4e4e56
markup.quoteitalic
string.other.link.title.markdown#8a2ac6
markup.underline.link.markdown#7e70e6
string.other.link.description.title.markdown#8a2ac6
constant.other.reference.link.markdown#8a2ac6
markup.raw.block#8a2ac6
markup.raw.block.fenced.markdown#e9e8ed
punctuation.definition.fenced.markdown#e9e8ed
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#0d0830
variable.language.fenced.markdown#6c6b76
meta.separator#6c6b76bold
markup.table#0d0830
token.info-token#7e70e6
token.warn-token#a42375
token.error-token#ce2c93
token.debug-token#8a2ac6
string#1d1d20
string.quoted, meta.attribute-selector.css entity.other.attribute-name.attribute, variable.other.readwrite.js#3321ba
support.constant.math#1a68e6
string.regexp#1a68e6
constant.numeric, constant.character.numeric#1d1d20
variable.language, variable.other#ce2c93
variable.language.this.js, variable.language.this.php#ce2c93
keyword#1a68e6
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#4e4e56italic
entity.name.class, meta.class entity.name.type.class#a42375
entity.name.type#4e4e56
entity.name.function#4e4e56
punctuation.definition.variable#4e4e56
punctuation.section.embedded.begin, punctuation.section.embedded.end#5a49df
constant.language, punctuation.definition.constant, variable.other.constant, meta.preprocessor#1a68e6
support.function.construct, keyword.other.new#7524a8
constant.character, constant.other#a42375
constant.character.escape#a42375
string.regexp, string.regexp keyword.other#6c6b76
entity.other.inherited-class#8a2ac6
entity.name.tag#ce2c93
punctuation.definition.tag, meta.tag#4e4e56
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#1a68e6
entity.other.attribute-name#5a49df
entity.name.tag.custom#7e70e6
support.function#4e4e56
punctuation.separator.continuation#ce2c93
invalid.broken#f6f6f9
invalid.unimplemented#0d0830
invalid.illegal#0d0830
support.type, support.class#3077e8
support.variable.dom#3077e8
support.type.exception#a42375
support.other.variable
invalid#0d0830
invalid.deprecated#a42375
keyword.operator#3077e8
keyword.operator.relational#8a2ac6italic
keyword.operator.assignment#8a2ac6
keyword.operator.arithmetic#8a2ac6
keyword.operator.bitwise#8a2ac6
keyword.operator.increment#8a2ac6
keyword.operator.ternary#8a2ac6
comment.line.double-slash#95949e
object#7e70e6
constant.language.null#ce2c93
meta.brace#95949e
meta.delimiter.period#1d1d20
constant.language.boolean#ce2c93
object.comma#08070d
variable.parameter.function#3077e8
support.type.vendor.property-name, support.constant.vendor.property-value, support.type.property-name, meta.property-list entity.name.tag#8a2ac6
meta.property-list entity.name.tag.reference#7e70e6
constant.other.color.rgb-value punctuation.definition.constant#a42375
meta.selector#8a2ac6italic
entity.other.attribute-name.id#343036
meta.property-name#3077e8
entity.name.tag.doctype, meta.tag.sgml.doctype#95949eitalic
keyword.control.operator#3077e8
keyword.operator.logical#8a2ac6
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property#1a68e6
variable.other.object.property#1d1d20italic
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx#1d1d20
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#5a49dfitalic
variable.interpolation#ce2c93
support.variable.property#3077e8
string.template meta.template.expression#ce2c93
string.template punctuation.definition.string#1d1d20
italic#8a2ac6italic
bold#1a68e6bold
quote#95949eitalic
raw#4e4e56
variable.assignment.coffee#3077e8
variable.parameter.function.coffee#1d1d20
variable.assignment.coffee#1a68e6
variable.other.readwrite.cs#1d1d20
entity.name.type.class.cs, storage.type.cs#8a2ac6
entity.name.type.namespace.cs#4e4e56
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#22272f
support.constant.property-value.css#175dcf
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#3077e8
keyword.other.unit.css, keyword.control.at-rule.media.css#3077e8
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#8a2ac6
source.elixir entity.name.function#1a68e6
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#7e70e6
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#1a68e6
source.elixir .punctuation.binary.elixir#8a2ac6italic
source.go meta.function-call.go#4e4e56
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#8a2ac6italic
source.go constant.language.go, source.go constant.other.placeholder.go#ce2c93
meta.class entity.name.type.class.js#a42375
meta.method.declaration storage.type.js#454f5f
terminator.js#1d1d20
meta.js punctuation.definition.js#1d1d20
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc#95949e
variable.other.jsdoc, variable.other.phpdoc#3077e8
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other#1d1d20
variable.parameter.function.js#8a2ac6
variable.js, variable.other.js#1d1d20
entity.name.type.js, entity.name.type.module.js#a42375
support.class.js#1d1d20
variable.other.ruby#1d1d20
entity.name.type.class.ruby#a42375
constant.language.symbol.hashkey.ruby#1a68e6
meta.attribute-selector.less entity.other.attribute-name.attribute#a42375
variable.other.php, variable.other.property.php#1d1d20
support.class.php#a42375
meta.function-call.php punctuation#1d1d20
variable.other.global.php#1a68e6
variable.other.global.php punctuation.definition.variable#1a68e6
constant.language.python#ce2c93
variable.parameter.function.python, meta.function-call.arguments.python#8a2ac6
meta.function-call.python, meta.function-call.generic.python#1d1d20
punctuation.python#1d1d20
entity.name.function.decorator.python#1a68e6
source.python variable.language.special#8a2ac6
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass#454f5f
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#8a2ac6
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute#a42375
entity.name.tag.scss, entity.name.tag.sass#1a68e6
keyword.other.unit.scss, keyword.other.unit.sass#8a2ac6
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#1d1d20
entity.name.type.ts, entity.name.type.tsx#a42375
support.class.node.ts, support.class.node.tsx#8a2ac6
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#95949e
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block#1d1d20
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#8a2ac6
meta.tag.js meta.jsx.children.tsx#8a2ac6
entity.name.tag.yaml#1a68e6
variable.other.readwrite.js, variable.parameter#4b38dc
support.class.component.js, support.class.component.tsx#a42375
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#1d1d20
meta.class entity.name.type.class.tsx#a42375
entity.name.type.tsx, entity.name.type.module.tsx#a42375
meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx#8a2ac6
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#1d1d20italic
markup.deleted#1d1d20
markup.changed#1d1d20
markup.inserted#1d1d20
markup.quote#1a68e6
markup.list#1a68e6
markup.bold, markup.italic#a42375
markup.inline.raw#6c6b76
markup.heading.setext#7e70e6

Shiki preview

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

Loading...