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#1f2335
  • activityBar.border#1f2335
  • activityBar.foreground#8089b3
  • activityBar.inactiveForeground#41496b
  • activityBarBadge.background#3d59a1
  • activityBarBadge.foreground#fff
  • activityBarTop.foreground#8089b3
  • activityBarTop.inactiveForeground#41496b
  • badge.background#7e83b233
  • badge.foreground#a9b1d6
  • breadcrumb.activeSelectionForeground#a9b1d6
  • breadcrumb.background#1E2233
  • breadcrumb.focusForeground#a9b1d6
  • breadcrumb.foreground#545c7e
  • breadcrumbPicker.background#1f2335
  • button.background#3d59a1dd
  • button.foreground#ffffff
  • button.hoverBackground#3d59a1AA
  • button.secondaryBackground#41496b
  • charts.blue#7aa2f7
  • charts.foreground#9AA5CE
  • charts.green#73daca
  • charts.lines#1f2335
  • charts.orange#ff9e64
  • charts.purple#9d7cd8
  • charts.red#f7768e
  • charts.yellow#e0af68
  • chat.avatarBackground#3d59a1
  • chat.avatarForeground#a9b1d6
  • chat.requestBorder#282e44
  • chat.slashCommandBackground#1b1e2e
  • chat.slashCommandForeground#7aa2f7
  • debugConsole.errorForeground#bb616b
  • debugConsole.infoForeground#8089b3
  • debugConsole.sourceForeground#8089b3
  • debugConsole.warningForeground#c49a5a
  • debugConsoleInputIcon.foreground#73daca
  • debugExceptionWidget.background#1b1e2e
  • debugExceptionWidget.border#963c47
  • debugIcon.breakpointDisabledForeground#545c7e
  • debugIcon.breakpointForeground#db4b4b
  • debugIcon.breakpointUnverifiedForeground#c24242
  • debugTokenExpression.boolean#ff9e64
  • debugTokenExpression.error#bb616b
  • debugTokenExpression.name#7dcfff
  • debugTokenExpression.number#ff9e64
  • debugTokenExpression.string#9ece6a
  • debugTokenExpression.value#9aa5ce
  • debugToolBar.background#1b1e2e
  • debugView.stateLabelBackground#1b1e2e
  • debugView.stateLabelForeground#8089b3
  • debugView.valueChangedHighlight#3d59a1cc
  • descriptionForeground#545c7e
  • diffEditor.diagonalFill#2c324a
  • diffEditor.insertedLineBackground#41a6b520
  • diffEditor.insertedTextBackground#41a6b520
  • diffEditor.removedLineBackground#db4b4b22
  • diffEditor.removedTextBackground#db4b4b22
  • diffEditor.unchangedCodeBackground#2f344d66
  • diffEditorGutter.insertedLineBackground#41a6b525
  • diffEditorGutter.removedLineBackground#db4b4b22
  • diffEditorOverview.insertedForeground#41a6b525
  • diffEditorOverview.removedForeground#db4b4b22
  • disabledForeground#545c7e
  • dropdown.background#1b1e2e
  • dropdown.foreground#8089b3
  • dropdown.listBackground#1b1e2e
  • editor.background#24283b
  • editor.findMatchBackground#3d59a166
  • editor.findMatchBorder#ffdb69aa
  • editor.findMatchHighlightBackground#3d59a166
  • editor.findRangeHighlightBackground#6f7bb625
  • editor.focusedStackFrameHighlightBackground#73daca20
  • editor.foldBackground#181b294a
  • editor.foreground#a9b1d6
  • editor.inactiveSelectionBackground#6f7bb615
  • editor.lineHighlightBackground#292e42
  • editor.rangeHighlightBackground#6f7bb620
  • editor.selectionBackground#6f7bb640
  • editor.selectionHighlightBackground#6f7bb633
  • editor.stackFrameHighlightBackground#e2bd3a20
  • editor.wordHighlightBackground#6f7bb633
  • editor.wordHighlightStrongBackground#6f7bb644
  • editorBracketHighlight.foreground1#698cd6
  • editorBracketHighlight.foreground2#68b3de
  • editorBracketHighlight.foreground3#9a7ecc
  • editorBracketHighlight.foreground4#25aac2
  • editorBracketHighlight.foreground5#80a856
  • editorBracketHighlight.foreground6#cfa25f
  • editorBracketHighlight.unexpectedBracket.foreground#db4b4b
  • editorBracketMatch.background#1f2335
  • editorBracketMatch.border#545c7e
  • editorBracketPairGuide.activeBackground1#698cd6
  • editorBracketPairGuide.activeBackground2#68b3de
  • editorBracketPairGuide.activeBackground3#9a7ecc
  • editorBracketPairGuide.activeBackground4#25aac2
  • editorBracketPairGuide.activeBackground5#80a856
  • editorBracketPairGuide.activeBackground6#cfa25f
  • editorCodeLens.foreground#5f6996
  • editorCursor.foreground#c0caf5
  • editorError.foreground#db4b4b
  • editorGhostText.foreground#7582ba
  • editorGroup.border#1b1e2e
  • editorGroup.dropBackground#292e42
  • editorGroup.emptyBackground#24283b
  • editorGroupHeader.border#1b1e2e
  • editorGroupHeader.noTabsBackground#1f2335
  • editorGroupHeader.tabsBackground#1f2335
  • editorGroupHeader.tabsBorder#1b1e2e
  • editorGutter.addedBackground#164846
  • editorGutter.deletedBackground#823c41
  • editorGutter.modifiedBackground#3d547a
  • editorHint.foreground#0da0ba
  • editorHoverWidget.background#1f2335
  • editorHoverWidget.border#1b1e2e
  • editorIndentGuide.activeBackground1#3b4261
  • editorIndentGuide.background1#2d324a
  • editorInfo.foreground#0da0ba
  • editorInlayHint.foreground#7582ba
  • editorLightBulb.foreground#e0af68
  • editorLightBulbAutoFix.foreground#e0af68
  • editorLineNumber.activeForeground#8089b3
  • editorLineNumber.foreground#3b4261
  • editorLink.activeForeground#a9b1d6
  • editorMarkerNavigation.background#1f2335
  • editorOverviewRuler.addedForeground#164846
  • editorOverviewRuler.border#1b1e2e
  • editorOverviewRuler.bracketMatchForeground#1b1e2e
  • editorOverviewRuler.deletedForeground#703438
  • editorOverviewRuler.errorForeground#db4b4b
  • editorOverviewRuler.findMatchForeground#a9b1d644
  • editorOverviewRuler.infoForeground#1abc9c
  • editorOverviewRuler.modifiedForeground#3d547a
  • editorOverviewRuler.rangeHighlightForeground#a9b1d644
  • editorOverviewRuler.selectionHighlightForeground#a9b1d622
  • editorOverviewRuler.warningForeground#e0af68
  • editorOverviewRuler.wordHighlightForeground#bb9af755
  • editorOverviewRuler.wordHighlightStrongForeground#bb9af766
  • editorPane.background#24283b
  • editorRuler.foreground#1b1e2e
  • editorSuggestWidget.background#1f2335
  • editorSuggestWidget.border#1b1e2e
  • editorSuggestWidget.highlightForeground#668ac4
  • editorSuggestWidget.selectedBackground#282e44
  • editorWarning.foreground#e0af68
  • editorWhitespace.foreground#3b4261
  • editorWidget.background#1f2335
  • editorWidget.border#1b1e2e
  • editorWidget.foreground#8089b3
  • editorWidget.resizeBorder#545c7e33
  • errorForeground#5a607d
  • extensionBadge.remoteBackground#3d59a1
  • extensionBadge.remoteForeground#ffffff
  • extensionButton.prominentBackground#3d59a1DD
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#3d59a1AA
  • focusBorder#545c7e33
  • foreground#8089b3
  • gitDecoration.addedResourceForeground#449dab
  • gitDecoration.conflictingResourceForeground#e0af68cc
  • gitDecoration.deletedResourceForeground#914c54
  • gitDecoration.ignoredResourceForeground#545c7e
  • gitDecoration.modifiedResourceForeground#6183bb
  • gitDecoration.renamedResourceForeground#449dab
  • gitDecoration.stageDeletedResourceForeground#914c54
  • gitDecoration.stageModifiedResourceForeground#6183bb
  • gitDecoration.untrackedResourceForeground#449dab
  • gitlens.gutterBackgroundColor#1f2335
  • gitlens.gutterForegroundColor#8089b3
  • gitlens.gutterUncommittedForegroundColor#7aa2f7
  • gitlens.trailingLineForegroundColor#7582ba
  • icon.foreground#8089b3
  • inlineChat.background#1b1e2e
  • inlineChat.foreground#a9b1d6
  • inlineChatDiff.inserted#41a6b540
  • inlineChatDiff.removed#db4b4b42
  • input.background#1b1e2e
  • input.border#282e44
  • input.foreground#a9b1d6
  • input.placeholderForeground#4a5272
  • inputOption.activeBackground#3d59a144
  • inputOption.activeForeground#c0caf5
  • inputValidation.errorBackground#85353e
  • inputValidation.errorBorder#963c47
  • inputValidation.errorForeground#bbc2e0
  • inputValidation.infoBackground#3d59a15c
  • inputValidation.infoBorder#3d59a1
  • inputValidation.infoForeground#bbc2e0
  • inputValidation.warningBackground#c2985b
  • inputValidation.warningBorder#e0af68
  • inputValidation.warningForeground#000000
  • list.activeSelectionBackground#2c324a
  • list.activeSelectionForeground#a9b1d6
  • list.deemphasizedForeground#8089b3
  • list.dropBackground#292e42
  • list.errorForeground#bb616b
  • list.focusBackground#292e42
  • list.focusForeground#a9b1d6
  • list.highlightForeground#668ac4
  • list.hoverBackground#1b1e2e
  • list.hoverForeground#a9b1d6
  • list.inactiveSelectionBackground#292e42
  • list.inactiveSelectionForeground#a9b1d6
  • list.invalidItemForeground#c97018
  • list.warningForeground#c49a5a
  • listFilterWidget.background#1b1e2e
  • listFilterWidget.noMatchesOutline#a6333f
  • listFilterWidget.outline#3d59a1
  • menu.background#1f2335
  • menu.border#1b1e2e
  • menu.foreground#8089b3
  • menu.selectionBackground#2f3549
  • menu.selectionForeground#c0caf5
  • menu.separatorBackground#1b1e2e
  • menubar.selectionBackground#2f3549
  • menubar.selectionBorder#1b1e2e
  • menubar.selectionForeground#c0caf5
  • merge.currentContentBackground#007a7544
  • merge.currentHeaderBackground#41a6b525
  • merge.incomingContentBackground#3d59a144
  • merge.incomingHeaderBackground#3d59a1aa
  • mergeEditor.change.background#41a6b525
  • mergeEditor.change.word.background#41a6b540
  • mergeEditor.conflict.handled.minimapOverViewRuler#449dab
  • mergeEditor.conflict.handledFocused.border#41a6b565
  • mergeEditor.conflict.handledUnfocused.border#41a6b525
  • mergeEditor.conflict.unhandled.minimapOverViewRuler#e0af68
  • mergeEditor.conflict.unhandledFocused.border#e0af68d9
  • mergeEditor.conflict.unhandledUnfocused.border#e0af6888
  • minimapGutter.addedBackground#1C5957
  • minimapGutter.deletedBackground#944449
  • minimapGutter.modifiedBackground#3d547a
  • multiDiffEditor.border#24283b
  • multiDiffEditor.headerBackground#24283b
  • notebook.cellBorderColor#1b1e2e
  • notebook.cellEditorBackground#1f2335
  • notebook.cellStatusBarItemHoverBackground#2c324a
  • notebook.editorBackground#24283b
  • notebook.focusedCellBorder#29355a
  • notificationCenterHeader.background#1b1e2e
  • notificationLink.foreground#6183bb
  • notifications.background#1b1e2e
  • notificationsErrorIcon.foreground#bb616b
  • notificationsInfoIcon.foreground#0da0ba
  • notificationsWarningIcon.foreground#bba461
  • panel.background#1f2335
  • panel.border#1b1e2e
  • panelInput.border#1f2335
  • panelTitle.activeBorder#3d59a1
  • panelTitle.activeForeground#a9b1d6
  • panelTitle.inactiveForeground#8089b3
  • peekView.border#1b1e2e
  • peekViewEditor.background#1f2335
  • peekViewEditor.matchHighlightBackground#3d59a166
  • peekViewResult.background#1b1e2e
  • peekViewResult.fileForeground#8089b3
  • peekViewResult.lineForeground#a9b1d6
  • peekViewResult.matchHighlightBackground#3d59a166
  • peekViewResult.selectionBackground#3d59a133
  • peekViewResult.selectionForeground#a9b1d6
  • peekViewTitle.background#1b1e2e
  • peekViewTitleDescription.foreground#8089b3
  • peekViewTitleLabel.foreground#a9b1d6
  • pickerGroup.border#1b1e2e
  • pickerGroup.foreground#a9b1d6
  • progressBar.background#3d59a1
  • sash.hoverBorder#29355a
  • scmGraph.foreground1#ff9e64
  • scmGraph.foreground2#e0af68
  • scmGraph.foreground3#41a6b5
  • scmGraph.foreground4#7aa2f7
  • scmGraph.foreground5#bb9af7
  • scmGraph.historyItemBaseRefColor#9d7cd8
  • scmGraph.historyItemHoverAdditionsForeground#41a6b5
  • scmGraph.historyItemHoverDefaultLabelForeground#a9b1d6
  • scmGraph.historyItemHoverDeletionsForeground#f7768e
  • scmGraph.historyItemHoverLabelForeground#1b1e2e
  • scmGraph.historyItemRefColor#506FCA
  • scmGraph.historyItemRemoteRefColor#41a6b5
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#9cacff22
  • scrollbarSlider.background#9cacff15
  • scrollbarSlider.hoverBackground#9cacff10
  • selection.background#6f7bb635
  • settings.headerForeground#6183bb
  • sideBar.background#1f2335
  • sideBar.border#1b1e2e
  • sideBar.dropBackground#292e42
  • sideBar.foreground#8089b3
  • sideBarSectionHeader.background#1f2335
  • sideBarSectionHeader.border#1b1e2e
  • sideBarSectionHeader.foreground#a9b1d6
  • sideBarTitle.foreground#8089b3
  • statusBar.background#1f2335
  • statusBar.border#1b1e2e
  • statusBar.debuggingBackground#1f2335
  • statusBar.debuggingForeground#8089b3
  • statusBar.foreground#8089b3
  • statusBar.noFolderBackground#1f2335
  • statusBarItem.activeBackground#1b1e2e
  • statusBarItem.hoverBackground#282e44
  • statusBarItem.prominentBackground#1b1e2e
  • statusBarItem.prominentHoverBackground#282e44
  • tab.activeBackground#1f2335
  • tab.activeBorder#3d59a1
  • tab.activeForeground#a9b1d6
  • tab.activeModifiedBorder#282d42
  • tab.border#1b1e2e
  • tab.hoverForeground#a9b1d6
  • tab.inactiveBackground#1f2335
  • tab.inactiveForeground#8089b3
  • tab.inactiveModifiedBorder#282d42
  • tab.lastPinnedBorder#2c3147
  • tab.unfocusedActiveBorder#3b4261
  • tab.unfocusedActiveForeground#a9b1d6
  • tab.unfocusedHoverForeground#a9b1d6
  • tab.unfocusedInactiveForeground#8089b3
  • terminal.ansiBlack#414868
  • terminal.ansiBlue#7aa2f7
  • terminal.ansiBrightBlack#414868
  • terminal.ansiBrightBlue#7aa2f7
  • terminal.ansiBrightCyan#7dcfff
  • terminal.ansiBrightGreen#73daca
  • terminal.ansiBrightMagenta#bb9af7
  • terminal.ansiBrightRed#f7768e
  • terminal.ansiBrightWhite#a9b1d6
  • terminal.ansiBrightYellow#e0af68
  • terminal.ansiCyan#7dcfff
  • terminal.ansiGreen#73daca
  • terminal.ansiMagenta#bb9af7
  • terminal.ansiRed#f7768e
  • terminal.ansiWhite#8089b3
  • terminal.ansiYellow#e0af68
  • terminal.background#1f2335
  • terminal.foreground#8089b3
  • terminal.selectionBackground#6f7bb640
  • textBlockQuote.background#1f2335
  • textCodeBlock.background#1f2335
  • textLink.activeForeground#7dcfff
  • textLink.foreground#668ac4
  • textPreformat.foreground#73daca
  • textSeparator.foreground#545c7e
  • titleBar.activeBackground#1f2335
  • titleBar.activeForeground#8089b3
  • titleBar.border#1b1e2e
  • titleBar.inactiveBackground#1f2335
  • titleBar.inactiveForeground#8089b3
  • toolbar.activeBackground#2c324a
  • toolbar.hoverBackground#2c324a
  • tree.indentGuidesStroke#2e344f
  • walkThrough.embeddedEditorBackground#1f2335
  • widget.shadow#ffffff00
  • window.activeBorder#0d0f17
  • window.inactiveBorder#0d0f17

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#5f6996
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#6f7bb0
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#7582ba
variable.other.constant, punctuation.definition.constant, constant.language, constant.numeric, support.constant, constant.other.caps#ff9e64
string, constant.other.symbol, constant.other.key, meta.attribute-selector, string constant.character#fff9de
constant.other.color, constant.other.color.rgb-value.hex punctuation.definition.constant#9aa5ce
invalid, invalid.illegal#bef202
invalid.deprecated#bb9af7
storage.type#bb9af7
meta.var.expr storage.type, storage.modifier#fe40b9
punctuation.definition.template-expression, punctuation.section.embedded, meta.embedded.line.tag.smarty, support.constant.handlebars, punctuation.section.tag.twig#7dcfff
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#2ac3de
keyword.operator.spread, keyword.operator.rest#f7768ebold
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#89ddff
keyword.control.module.js, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.default, meta.import keyword.other#7dcfff
keyword, keyword.control, keyword.other.important#ffc219
keyword.other.DML#7dcfff
keyword.operator.logical, storage.type.function, keyword.operator.bitwise, keyword.operator.ternary, keyword.operator.comparison, keyword.operator.relational, keyword.operator.or.regexp#bb9af7
entity.name.tag#bef202
entity.name.tag support.class.component, meta.tag.custom entity.name.tag, meta.tag.other.unrecognized.html.derivative, meta.tag#bef202
punctuation.definition.tag, text.html.php meta.embedded.block.html meta.tag.metadata.script.end.html punctuation.definition.tag.begin.html text.html.basic#ba3c97
constant.other.php, variable.other.global.safer, variable.other.global.safer punctuation.definition.variable, variable.other.global, variable.other.global punctuation.definition.variable, constant.other.haskell#e0af68
variable, support.variable, string constant.other.placeholder, variable.parameter.handlebars, variable.other.object, meta.fstring, meta.function-call meta.function-call.arguments, meta.embedded.inline.phpx constant.other.php#c0caf5
meta.array.literal variable#7dcfff
meta.object-literal.key, entity.name.type.hcl, string.alias.graphql, string.unquoted.graphql, string.unquoted.alias.graphql, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, meta.field.declaration.ts variable.object.property, meta.block entity.name.label#73daca
variable.other.property, support.variable.property, support.variable.property.dom, meta.function-call variable.other.object.property, variable.other.object.property.cs#7dcfff
variable.other.object.property#c0caf5
meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.object-literal.key#41a6b5
source.cpp meta.block variable.other#bef202
support.other.variable#bef202
meta.class-method.js entity.name.function.js, entity.name.method.js, variable.function.constructor, keyword.other.special-method, storage.type.cs#7aa2f7
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#7aa2f7
variable.parameter.function.language.special, variable.parameter, meta.function.parameters punctuation.definition.variable, meta.function.parameter variable#e0af68
keyword.other.type.php, storage.type.php, constant.character, constant.escape, keyword.other.unit#bb9af7
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#f90050
entity.other.inherited-class#bb9af7
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#2ac3de
entity.name#c0caf5
support.function#2ac3de
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#7aa2f7
support.constant.font-name, meta.definition.variable#9ece6a
entity.other.attribute-name.class, meta.at-rule.mixin.scss entity.name.function.scss#9ece6a
entity.other.attribute-name.id#fc7b7b
entity.name.tag.css#2ac3de
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#e0af68
meta.property-list#9abdf5
meta.property-list meta.at-rule.if, meta.at-rule.return variable.parameter.url, meta.property-list meta.at-rule.else#ff9e64
entity.other.attribute-name.parent-selector-suffix punctuation.definition.entity.css#73daca
meta.property-list meta.property-list#9abdf5
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#bb9af7
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#9d7cd8
meta.property-list meta.at-rule.include#c0caf5
support.constant.property-value#ff9e64
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#c0caf5
variable.language#f7768e
variable.other punctuation.definition.variable#c0caf5
source.js constant.other.object.key.js string.unquoted.label.js, variable.language.this punctuation.definition.variable, keyword.other.this#f7768e
entity.other.attribute-name, text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#f96a00
text.html constant.character.entity#2AC3DE
entity.other.attribute-name.id.html, meta.directive.vue entity.other.attribute-name.html#bb9af7
source.sass keyword.control#7aa2f7
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.placeholder, meta.property-list meta.property-value#bb9af7
markup.inserted#449dab
markup.deleted#914c54
markup.changed#6183bb
string.regexp#b4f9f8
punctuation.definition.group#f7768e
constant.other.character-class.regexp#bb9af7
constant.other.character-class.set.regexp, punctuation.definition.character-class.regexp#e0af68
keyword.operator.quantifier.regexp#89ddff
constant.character.escape.backslash#c0caf5
constant.character.escape#89ddff
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#7aa2f7
keyword.other.unit#f7768e
source.json meta.structure.dictionary.json support.type.property-name.json#7aa2f7
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#2ac3de
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#7dcfff
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#bb9af7
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#e0af68
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#2ac3de
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#73daca
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#f7768e
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#9ece6a
punctuation.definition.list_item.markdown#9abdf5
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#9abdf5
meta.embedded.block#c0caf5
meta.tag JSXNested, meta.jsx.children, text.html, text.log#9aa5ce
text.html.markdown markup.inline.raw.markdown#bb9af7
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#4E5579
heading.1.markdown entity.name, heading.1.markdown punctuation.definition.heading.markdown#89ddffbold
heading.2.markdown entity.name, heading.2.markdown punctuation.definition.heading.markdown#61bdf2bold
heading.3.markdown entity.name, heading.3.markdown punctuation.definition.heading.markdown#7aa2f7bold
heading.4.markdown entity.name, heading.4.markdown punctuation.definition.heading.markdown#6d91debold
heading.5.markdown entity.name, heading.5.markdown punctuation.definition.heading.markdown#9aa5cebold
heading.6.markdown entity.name, heading.6.markdown punctuation.definition.heading.markdown#747ca1bold
markup.italic, markup.italic punctuation#c0caf5italic
markup.bold, markup.bold punctuation#c0caf5bold
markup.bold markup.italic, markup.bold markup.italic punctuation#c0caf5bold italic
markup.underline, markup.underline punctuationunderline
markup.quote punctuation.definition.blockquote.markdown#4E5579
markup.quoteitalic
string.other.link, markup.underline.link, constant.other.reference.link.markdown, string.other.link.description.title.markdown#73daca
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.language.fenced.markdown#89ddff
meta.separator#5f6996bold
markup.table#c0cefc
token.info-token#0db9d7
token.warn-token#ffdb69
token.error-token#db4b4b
token.debug-token#b267e6
entity.tag.apacheconf#f7768e
meta.preprocessor#73daca
source.env#7aa2f7

Shiki preview

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

Loading...