Skip to main content
Coding Theme

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

  • activityBar.background#15161d
  • activityBar.border#15161d
  • activityBar.foreground#707083
  • activityBar.inactiveForeground#4a4e6b
  • activityBarBadge.background#7a7c9d
  • activityBarBadge.foreground#dbdde4
  • activityBarTop.foreground#707083
  • activityBarTop.inactiveForeground#4a4e6b
  • badge.background#989eb04d
  • badge.foreground#8b8d9c
  • breadcrumb.activeSelectionForeground#979ab3
  • breadcrumb.background#15161d
  • breadcrumb.focusForeground#979ab3
  • breadcrumb.foreground#4a4b64
  • breadcrumbPicker.background#15161d
  • button.background#7a7c9dd4
  • button.foreground#dbdde4
  • button.hoverBackground#7a7c9dc6
  • button.secondaryBackground#262834
  • charts.blue#7a7c9d
  • charts.foreground#7c829d
  • charts.green#5ed6d8
  • charts.lines#15161d
  • charts.orange#cdac98
  • charts.purple#8a8cb2
  • charts.red#ca5f64
  • charts.yellow#b6a6c2
  • chat.avatarBackground#7a7c9d
  • chat.avatarForeground#979ab3
  • chat.requestBorder#121214
  • chat.slashCommandBackground#121214
  • chat.slashCommandForeground#7a7c9d
  • debugConsole.errorForeground#9c7a8f
  • debugConsole.infoForeground#707083
  • debugConsole.sourceForeground#707083
  • debugConsole.warningForeground#b69c91
  • debugConsoleInputIcon.foreground#6f768e
  • debugExceptionWidget.background#121214
  • debugExceptionWidget.border#ca5f64
  • debugIcon.breakpointDisabledForeground#4e506e
  • debugIcon.breakpointForeground#cc7575
  • debugIcon.breakpointUnverifiedForeground#b27978
  • debugTokenExpression.boolean#cdac98
  • debugTokenExpression.error#9c7a8f
  • debugTokenExpression.name#7f9bad
  • debugTokenExpression.number#cdac98
  • debugTokenExpression.string#9cb7a9
  • debugTokenExpression.value#7c829d
  • debugToolBar.background#121214
  • debugView.stateLabelBackground#121214
  • debugView.stateLabelForeground#707083
  • debugView.valueChangedHighlight#7a7c9d4d
  • descriptionForeground#4a4b64
  • diffEditor.diagonalFill#4a4e6b
  • diffEditor.insertedLineBackground#5ed6d826
  • diffEditor.insertedTextBackground#5ed6d826
  • diffEditor.removedLineBackground#cc757526
  • diffEditor.removedTextBackground#cc757526
  • diffEditor.unchangedCodeBackground#4c4e6866
  • diffEditorGutter.insertedLineBackground#5ed6d826
  • diffEditorGutter.removedLineBackground#cc757526
  • diffEditorOverview.insertedForeground#5ed6d826
  • diffEditorOverview.removedForeground#cc757526
  • disabledForeground#4e506e
  • dropdown.background#121214
  • dropdown.foreground#707083
  • dropdown.listBackground#121214
  • editor.background#14151d
  • editor.findMatchBackground#7a7c9d4d
  • editor.findMatchBorder#b6a6c2
  • editor.findMatchHighlightBackground#7a7c9d4d
  • editor.findRangeHighlightBackground#6b6e8a26
  • editor.focusedStackFrameHighlightBackground#6f768e26
  • editor.foldBackground#1112164d
  • editor.foreground#979ab3
  • editor.inactiveSelectionBackground#6b6e8a26
  • editor.lineHighlightBackground#18191b
  • editor.rangeHighlightBackground#6b6e8a14
  • editor.selectionBackground#6b6e8a4d
  • editor.selectionHighlightBackground#6b6e8a4d
  • editor.stackFrameHighlightBackground#ac8a9226
  • editor.wordHighlightBackground#6b6e8a4d
  • editor.wordHighlightStrongBackground#6b6e8a66
  • editorBracketHighlight.foreground1#7f92ac
  • editorBracketHighlight.foreground2#7f9bad
  • editorBracketHighlight.foreground3#8a8cb2
  • editorBracketHighlight.foreground4#5ed6d8
  • editorBracketHighlight.foreground5#9cb7a9
  • editorBracketHighlight.foreground6#cdac98
  • editorBracketHighlight.unexpectedBracket.foreground#cc7575
  • editorBracketMatch.background#15161d
  • editorBracketMatch.border#4a4e6b
  • editorBracketPairGuide.activeBackground1#7f92ac
  • editorBracketPairGuide.activeBackground2#7f9bad
  • editorBracketPairGuide.activeBackground3#8a8cb2
  • editorBracketPairGuide.activeBackground4#5ed6d8
  • editorBracketPairGuide.activeBackground5#9cb7a9
  • editorBracketPairGuide.activeBackground6#cdac98
  • editorCodeLens.foreground#4a4b64
  • editorCursor.foreground#8b8d9c
  • editorError.foreground#cc7575
  • editorGroup.border#121214
  • editorGroup.dropBackground#18191b
  • editorGroupHeader.border#121214
  • editorGroupHeader.noTabsBackground#15161d
  • editorGroupHeader.tabsBackground#15161d
  • editorGroupHeader.tabsBorder#121214
  • editorGutter.addedBackground#4a6f6e
  • editorGutter.deletedBackground#863e45
  • editorGutter.modifiedBackground#6f768e
  • editorHint.foreground#5ed6d8
  • editorHoverWidget.background#15161d
  • editorHoverWidget.border#121214
  • editorIndentGuide.activeBackground1#4a4e6b
  • editorIndentGuide.background1#2a2b44
  • editorInfo.foreground#5ed6d8
  • editorInlayHint.foreground#5e657e
  • editorLightBulb.foreground#b6a6c2
  • editorLightBulbAutoFix.foreground#b6a6c2
  • editorLineNumber.activeForeground#707083
  • editorLineNumber.foreground#4a4e6b
  • editorLink.activeForeground#8b8d9c
  • editorMarkerNavigation.background#15161d
  • editorOverviewRuler.addedForeground#4a6f6e
  • editorOverviewRuler.border#121214
  • editorOverviewRuler.bracketMatchForeground#121214
  • editorOverviewRuler.deletedForeground#863e45
  • editorOverviewRuler.errorForeground#cc7575
  • editorOverviewRuler.findMatchForeground#979ab34d
  • editorOverviewRuler.infoForeground#5ed6d8
  • editorOverviewRuler.modifiedForeground#6f768e
  • editorOverviewRuler.rangeHighlightForeground#979ab34d
  • editorOverviewRuler.selectionHighlightForeground#979ab326
  • editorOverviewRuler.warningForeground#b6a6c2
  • editorOverviewRuler.wordHighlightForeground#8a8cb24d
  • editorOverviewRuler.wordHighlightStrongForeground#8a8cb266
  • editorPane.background#14151d
  • editorRuler.foreground#121214
  • editorSuggestWidget.background#15161d
  • editorSuggestWidget.border#121214
  • editorSuggestWidget.highlightForeground#6f768e
  • editorSuggestWidget.selectedBackground#18191b
  • editorWarning.foreground#b6a6c2
  • editorWhitespace.foreground#4a4e6b
  • editorWidget.background#15161d
  • editorWidget.border#121214
  • editorWidget.foreground#707083
  • editorWidget.resizeBorder#6b6e8a26
  • errorForeground#75657a
  • extensionBadge.remoteBackground#7a7c9d
  • extensionBadge.remoteForeground#dbdde4
  • extensionButton.prominentBackground#7a7c9dd4
  • extensionButton.prominentForeground#dbdde4
  • extensionButton.prominentHoverBackground#7a7c9dc6
  • focusBorder#6b6e8a26
  • foreground#707083
  • gitDecoration.addedResourceForeground#5ed6d8
  • gitDecoration.conflictingResourceForeground#b6a6c280
  • gitDecoration.deletedResourceForeground#863e45
  • gitDecoration.ignoredResourceForeground#4a4b64
  • gitDecoration.modifiedResourceForeground#6f768e
  • gitDecoration.renamedResourceForeground#5ed6d8
  • gitDecoration.stageDeletedResourceForeground#863e45
  • gitDecoration.stageModifiedResourceForeground#6f768e
  • gitDecoration.untrackedResourceForeground#5ed6d8
  • gitlens.gutterBackgroundColor#15161d
  • gitlens.gutterForegroundColor#707083
  • gitlens.gutterUncommittedForegroundColor#7a7c9d
  • gitlens.trailingLineForegroundColor#5e657e
  • icon.foreground#707083
  • inlineChat.foreground#979ab3
  • inlineChatDiff.inserted#5ed6d84d
  • inlineChatDiff.removed#cc75754d
  • inlineChatInput.background#121214
  • input.background#121214
  • input.border#121214
  • input.foreground#979ab3
  • input.placeholderForeground#7070838a
  • inputOption.activeBackground#7a7c9d4d
  • inputOption.activeForeground#8b8d9c
  • inputValidation.errorBackground#683e4a
  • inputValidation.errorBorder#ca5f64
  • inputValidation.errorForeground#8b8d9c
  • inputValidation.infoBackground#7a7c9d4d
  • inputValidation.infoBorder#7a7c9d
  • inputValidation.infoForeground#8b8d9c
  • inputValidation.warningBackground#ac8a92
  • inputValidation.warningBorder#b6a6c2
  • inputValidation.warningForeground#6b6e8a
  • list.activeSelectionBackground#18191b
  • list.activeSelectionForeground#979ab3
  • list.deemphasizedForeground#707083
  • list.dropBackground#18191b
  • list.errorForeground#9c7a8f
  • list.focusBackground#16161a
  • list.focusForeground#979ab3
  • list.highlightForeground#8c95ca
  • list.hoverBackground#121214
  • list.hoverForeground#979ab3
  • list.inactiveSelectionBackground#16161a
  • list.inactiveSelectionForeground#979ab3
  • list.invalidItemForeground#b18765
  • list.warningForeground#b69c91
  • listFilterWidget.background#121214
  • listFilterWidget.noMatchesOutline#b27978
  • listFilterWidget.outline#7a7c9d
  • menu.background#15161d
  • menu.border#121214
  • menu.foreground#707083
  • menu.selectionBackground#18191b
  • menu.selectionForeground#979ab3
  • menu.separatorBackground#121214
  • menubar.selectionBackground#18191b
  • menubar.selectionBorder#15161d
  • menubar.selectionForeground#979ab3
  • merge.currentContentBackground#4a6f6e4d
  • merge.currentHeaderBackground#5ed6d826
  • merge.incomingContentBackground#7a7c9d4d
  • merge.incomingHeaderBackground#7a7c9d4d
  • mergeEditor.change.background#5ed6d826
  • mergeEditor.change.word.background#5ed6d84d
  • mergeEditor.conflict.handled.minimapOverViewRuler#5ed6d8
  • mergeEditor.conflict.handledFocused.border#5ed6d84d
  • mergeEditor.conflict.handledUnfocused.border#5ed6d826
  • mergeEditor.conflict.unhandled.minimapOverViewRuler#b6a6c2
  • mergeEditor.conflict.unhandledFocused.border#b6a6c2b2
  • mergeEditor.conflict.unhandledUnfocused.border#b6a6c280
  • minimapGutter.addedBackground#4a6f6e
  • minimapGutter.deletedBackground#863e45
  • minimapGutter.modifiedBackground#6f768e
  • multiDiffEditor.border#14151d
  • multiDiffEditor.headerBackground#14151d
  • notebook.cellBorderColor#121214
  • notebook.cellEditorBackground#15161d
  • notebook.cellStatusBarItemHoverBackground#16161a
  • notebook.editorBackground#14151d
  • notebook.focusedCellBorder#4a4e6b
  • notificationCenterHeader.background#121214
  • notificationLink.foreground#6f768e
  • notifications.background#121214
  • notificationsErrorIcon.foreground#9c7a8f
  • notificationsInfoIcon.foreground#5ed6d8
  • notificationsWarningIcon.foreground#8a8cb2
  • panel.background#15161d
  • panel.border#121214
  • panelInput.border#15161d
  • panelTitle.activeBorder#15161d
  • panelTitle.activeForeground#707083
  • panelTitle.inactiveForeground#4a4e6b
  • peekView.border#121214
  • peekViewEditor.background#15161d
  • peekViewEditor.matchHighlightBackground#7a7c9d4d
  • peekViewResult.background#121214
  • peekViewResult.fileForeground#707083
  • peekViewResult.lineForeground#979ab3
  • peekViewResult.matchHighlightBackground#7a7c9d4d
  • peekViewResult.selectionBackground#7a7c9d26
  • peekViewResult.selectionForeground#979ab3
  • peekViewTitle.background#121214
  • peekViewTitleDescription.foreground#707083
  • peekViewTitleLabel.foreground#979ab3
  • pickerGroup.border#121214
  • pickerGroup.foreground#979ab3
  • progressBar.background#7a7c9d
  • sash.hoverBorder#4a4e6b
  • scmGraph.foreground1#cdac98
  • scmGraph.foreground2#b6a6c2
  • scmGraph.foreground3#5ed6d8
  • scmGraph.foreground4#7a7c9d
  • scmGraph.foreground5#8a8cb2
  • scmGraph.historyItemBaseRefColor#8a8cb2
  • scmGraph.historyItemHoverAdditionsForeground#5ed6d8
  • scmGraph.historyItemHoverDefaultLabelForeground#979ab3
  • scmGraph.historyItemHoverDeletionsForeground#ca5f64
  • scmGraph.historyItemHoverLabelForeground#15161d
  • scmGraph.historyItemRefColor#6f768e
  • scmGraph.historyItemRemoteRefColor#5ed6d8
  • scrollbar.shadow#0000004d
  • scrollbarSlider.activeBackground#817c9c4d
  • scrollbarSlider.background#817c9c14
  • scrollbarSlider.hoverBackground#817c9c26
  • selection.background#6b6e8a4d
  • settings.headerForeground#6f768e
  • sideBar.background#15161d
  • sideBar.border#121214
  • sideBar.dropBackground#18191b
  • sideBar.foreground#707083
  • sideBarSectionHeader.background#15161d
  • sideBarSectionHeader.border#121214
  • sideBarSectionHeader.foreground#979ab3
  • sideBarTitle.foreground#707083
  • statusBar.background#15161d
  • statusBar.border#121214
  • statusBar.debuggingBackground#15161d
  • statusBar.debuggingForeground#707083
  • statusBar.foreground#707083
  • statusBar.noFolderBackground#15161d
  • statusBarItem.activeBackground#121214
  • statusBarItem.hoverBackground#18191b
  • statusBarItem.prominentBackground#121214
  • statusBarItem.prominentHoverBackground#18191b
  • tab.activeBackground#15161d
  • tab.activeBorder#7a7c9d
  • tab.activeForeground#979ab3
  • tab.activeModifiedBorder#14151d
  • tab.border#121214
  • tab.hoverForeground#979ab3
  • tab.inactiveBackground#15161d
  • tab.inactiveForeground#707083
  • tab.inactiveModifiedBorder#18191b
  • tab.lastPinnedBorder#2e3044
  • tab.unfocusedActiveBorder#18191b
  • tab.unfocusedActiveForeground#979ab3
  • tab.unfocusedHoverForeground#979ab3
  • tab.unfocusedInactiveForeground#707083
  • terminal.ansiBlack#4a4e6b
  • terminal.ansiBlue#7a7c9d
  • terminal.ansiBrightBlack#4a4e6b
  • terminal.ansiBrightBlue#7a7c9d
  • terminal.ansiBrightCyan#7f9bad
  • terminal.ansiBrightGreen#6f768e
  • terminal.ansiBrightMagenta#8a8cb2
  • terminal.ansiBrightRed#ca5f64
  • terminal.ansiBrightWhite#8b8d9c
  • terminal.ansiBrightYellow#b6a6c2
  • terminal.ansiCyan#7f9bad
  • terminal.ansiGreen#6f768e
  • terminal.ansiMagenta#8a8cb2
  • terminal.ansiRed#ca5f64
  • terminal.ansiWhite#707083
  • terminal.ansiYellow#b6a6c2
  • terminal.background#15161d
  • terminal.foreground#707083
  • terminal.selectionBackground#6b6e8a4d
  • textBlockQuote.background#15161d
  • textCodeBlock.background#15161d
  • textLink.activeForeground#7f9bad
  • textLink.foreground#6f768e
  • textPreformat.foreground#7c829d
  • textSeparator.foreground#4a4e6b
  • titleBar.activeBackground#15161d
  • titleBar.activeForeground#707083
  • titleBar.border#121214
  • titleBar.inactiveBackground#15161d
  • titleBar.inactiveForeground#707083
  • toolbar.activeBackground#18191b
  • toolbar.hoverBackground#18191b
  • tree.indentGuidesStroke#4a4e6b
  • walkThrough.embeddedEditorBackground#15161d
  • widget.shadow#15151a4d
  • window.activeBorder#101015
  • window.inactiveBorder#101015

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, meta.var.expr storage.type, keyword.control.flow, keyword.control.return, meta.directive.vue punctuation.separator.key-value.html, meta.directive.vue entity.other.attribute-name.html, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, storage.modifier, string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escapeitalic
keyword.control.flow.block-scalar.literal, keyword.control.flow.python
comment, comment.block.documentation, punctuation.definition.comment, comment.block.documentation punctuation, string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escape#4c5173
keyword.operator.assignment.jsdoc, comment.block.documentation variable, comment.block.documentation storage, comment.block.documentation keyword, comment.block.documentation support, comment.block.documentation markup, comment.block.documentation markup.inline.raw.string.markdown, meta.other.type.phpdoc.php keyword.other.type.php, meta.other.type.phpdoc.php support.other.namespace.php, meta.other.type.phpdoc.php punctuation.separator.inheritance.php, meta.other.type.phpdoc.php support.class, keyword.other.phpdoc.php, log.date#555c81
meta.other.type.phpdoc.php support.class, comment.block.documentation storage.type, comment.block.documentation punctuation.definition.block.tag, comment.block.documentation entity.name.type.instance#5e668f
variable.other.constant, punctuation.definition.constant, constant.language, constant.numeric, support.constant, constant.other.caps#e9955b
string, constant.other.symbol, constant.other.key, meta.attribute-selector, string constant.character#95c064
constant.other.color, constant.other.color.rgb-value.hex punctuation.definition.constant#90a0c5
invalid, invalid.illegal#e94f67
invalid.deprecated#ae92e2
storage.type#ae92e2
meta.var.expr storage.type, storage.modifier#9278cb
punctuation.definition.template-expression, punctuation.section.embedded, meta.embedded.line.tag.smarty, support.constant.handlebars, punctuation.section.tag.twig#73c3ed
keyword.control.smarty, keyword.control.twig, support.constant.handlebars keyword.control, keyword.operator.comparison.twig, keyword.blade, entity.name.function.blade, meta.tag.blade keyword.other.type.php#0ca8c3
keyword.operator.spread, keyword.operator.rest#e36e85bold
keyword.operator, keyword.control.as, keyword.other, keyword.operator.bitwise.shift, punctuation, expression.embbeded.vue punctuation.definition.tag, text.html.twig meta.tag.inline.any.html, meta.tag.template.value.twig meta.function.arguments.twig, meta.directive.vue punctuation.separator.key-value.html, punctuation.definition.constant.markdown, punctuation.definition.string, punctuation.support.type.property-name, text.html.vue-html meta.tag, meta.attribute.directive, punctuation.definition.keyword, punctuation.terminator.rule, punctuation.definition.entity, punctuation.separator.inheritance.php, keyword.other.template, keyword.other.substitution, entity.name.operator, meta.property-list punctuation.separator.key-value, meta.at-rule.mixin punctuation.separator.key-value, meta.at-rule.function variable.parameter.url, meta.embedded.inline.phpx punctuation.definition.tag.begin.html, meta.embedded.inline.phpx punctuation.definition.tag.end.html#7fcee8
keyword.control.module.js, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.default, meta.import keyword.other#73c3ed
keyword, keyword.control, keyword.other.important#ae92e2
keyword.other.DML#73c3ed
keyword.operator.logical, storage.type.function, keyword.operator.bitwise, keyword.operator.ternary, keyword.operator.comparison, keyword.operator.relational, keyword.operator.or.regexp#ae92e2
entity.name.tag, meta.tag, meta.tag entity, meta.tag.custom entity.name.tag, meta.tag.block.any.html, meta.tag.inline.any.html, meta.tag.structure.any.html#64c6b7
variable.other.property, support.variable.property, support.variable.property.dom, meta.function-call variable.other.object.property#73c3ed
variable.other.object.property#b3bee8
meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.object-literal.key#3b96a3
source.cpp meta.block variable.other#e36e85
support.other.variable#e36e85
meta.class-method.js entity.name.function.js, entity.name.method.js, variable.function.constructor, keyword.other.special-method, storage.type.cs#6f97e3
entity.name.function, variable.other.enummember, meta.function-call, meta.function-call entity.name.function, variable.function, meta.definition.method entity.name.function, meta.object-literal entity.name.function#6f97e3
variable.parameter.function.language.special, variable.parameter, meta.function.parameters punctuation.definition.variable, meta.function.parameter variable#d7a85f
keyword.other.type.php, storage.type.php, constant.character, constant.escape, keyword.other.unit#ae92e2
meta.definition.variable variable.other.constant, meta.definition.variable variable.other.readwrite, variable.declaration.hcl variable.other.readwrite.hcl, meta.mapping.key.hcl variable.other.readwrite.hcl, variable.other.declaration#ae92e2
entity.other.inherited-class#ae92e2
support.class, support.type, variable.other.readwrite.alias, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, support.type.sys-types, support.variable.dom, support.constant.math, support.type.object.module, support.constant.json, entity.name.namespace, meta.import.qualifier, variable.other.constant.object#0ca8c3
entity.name#b3bee8
support.function#0ca8c3
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, support.type.property-name.css, support.type.vendored.property-name, support.type.map.key#6f97e3
support.constant.font-name, meta.definition.variable#95c064
entity.other.attribute-name.class, meta.at-rule.mixin.scss entity.name.function.scss#95c064
entity.other.attribute-name.id#e77272
entity.name.tag.css#0ca8c3
entity.other.attribute-name.pseudo-class punctuation.definition.entity, entity.other.attribute-name.pseudo-element punctuation.definition.entity, entity.other.attribute-name.class punctuation.definition.entity, entity.name.tag.reference#d7a85f
meta.property-list#8fb3e8
meta.property-list meta.at-rule.if, meta.at-rule.return variable.parameter.url, meta.property-list meta.at-rule.else#e9955b
entity.other.attribute-name.parent-selector-suffix punctuation.definition.entity.css#64c6b7
meta.property-list meta.property-list#8fb3e8
meta.at-rule.mixin keyword.control.at-rule.mixin, meta.at-rule.include entity.name.function.scss, meta.at-rule.include keyword.control.at-rule.include#ae92e2
keyword.control.at-rule.include punctuation.definition.keyword, keyword.control.at-rule.mixin punctuation.definition.keyword, meta.at-rule.include keyword.control.at-rule.include, keyword.control.at-rule.extend punctuation.definition.keyword, meta.at-rule.extend keyword.control.at-rule.extend, entity.other.attribute-name.placeholder.css punctuation.definition.entity.css, meta.at-rule.media keyword.control.at-rule.media, meta.at-rule.mixin keyword.control.at-rule.mixin, meta.at-rule.function keyword.control.at-rule.function, keyword.control punctuation.definition.keyword#9278cb
meta.property-list meta.at-rule.include#b3bee8
support.constant.property-value#e9955b
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#b3bee8
variable.language#e36e85
variable.other punctuation.definition.variable#b3bee8
source.js constant.other.object.key.js string.unquoted.label.js, variable.language.this punctuation.definition.variable, keyword.other.this#e36e85
entity.other.attribute-name, text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#ae92e2
text.html constant.character.entity#0ca8c3
entity.other.attribute-name.id.html, meta.directive.vue entity.other.attribute-name.html#ae92e2
source.sass keyword.control#6f97e3
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.placeholder, meta.property-list meta.property-value#ae92e2
markup.inserted#3f9a99
markup.deleted#88494e
markup.changed#5878a8
string.regexp#a8eceb
punctuation.definition.group#e36e85
constant.other.character-class.regexp#ae92e2
constant.other.character-class.set.regexp, punctuation.definition.character-class.regexp#d7a85f
keyword.operator.quantifier.regexp#7fcee8
constant.character.escape.backslash#b3bee8
constant.character.escape#7fcee8
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#6f97e3
keyword.other.unit#e36e85
source.json meta.structure.dictionary.json support.type.property-name.json#6f97e3
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#0ca8c3
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#73c3ed
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#ae92e2
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#d7a85f
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#0ca8c3
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#64c6b7
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#e36e85
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#95c064
punctuation.definition.list_item.markdown#8fb3e8
meta.block, meta.brace, punctuation.definition.block, punctuation.definition.use, punctuation.definition.class, punctuation.definition.begin.bracket, punctuation.definition.end.bracket, punctuation.definition.switch-expression.begin.bracket, punctuation.definition.switch-expression.end.bracket, punctuation.definition.section.switch-block.begin.bracket, punctuation.definition.section.switch-block.end.bracket, punctuation.definition.group.shell, punctuation.definition.parameters, punctuation.definition.arguments, punctuation.definition.dictionary, punctuation.definition.array, punctuation.section#8fb3e8
meta.embedded.block#b3bee8
meta.tag JSXNested, meta.jsx.children, text.html, text.log#90a0c5
text.html.markdown markup.inline.raw.markdown#ae92e2
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#4a506e
heading.1.markdown entity.name, heading.1.markdown punctuation.definition.heading.markdown#7fcee8bold
heading.2.markdown entity.name, heading.2.markdown punctuation.definition.heading.markdown#58b0e2bold
heading.3.markdown entity.name, heading.3.markdown punctuation.definition.heading.markdown#6f97e3bold
heading.4.markdown entity.name, heading.4.markdown punctuation.definition.heading.markdown#6688d3bold
heading.5.markdown entity.name, heading.5.markdown punctuation.definition.heading.markdown#90a0c5bold
heading.6.markdown entity.name, heading.6.markdown punctuation.definition.heading.markdown#6d7396bold
markup.italic, markup.italic punctuation#b3bee8italic
markup.bold, markup.bold punctuation#b3bee8bold
markup.bold markup.italic, markup.bold markup.italic punctuation#b3bee8bold italic
markup.underline, markup.underline punctuationunderline
markup.quote punctuation.definition.blockquote.markdown#4a506e
markup.quoteitalic
string.other.link, markup.underline.link, constant.other.reference.link.markdown, string.other.link.description.title.markdown#64c6b7
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.language.fenced.markdown#7fcee8
meta.separator#4c5173bold
markup.table#b3c1ef
token.info-token#0ca8c3
token.warn-token#e9ce61
token.error-token#d04545
token.debug-token#a760d6
entity.tag.apacheconf#e36e85
meta.preprocessor#64c6b7
source.env#6f97e3

Shiki preview

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

Loading...