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.activeBorder#2959aa
  • activityBar.background#d6d8df
  • activityBar.border#d6d8df
  • activityBar.foreground#363c4d
  • activityBar.inactiveForeground#7d7f8f
  • activityBarBadge.background#2959aa
  • activityBarBadge.foreground#fff
  • activityBarTop.activeBorder#2959aa
  • activityBarTop.foreground#363c4d
  • activityBarTop.inactiveForeground#707280
  • badge.background#979db833
  • badge.foreground#363c4d
  • breadcrumb.activeSelectionForeground#363c4d
  • breadcrumb.background#d6d8df
  • breadcrumb.focusForeground#363c4d
  • breadcrumb.foreground#707280
  • breadcrumbPicker.background#d6d8df
  • button.background#2959aadd
  • button.foreground#ffffff
  • button.hoverBackground#2959aaAA
  • button.secondaryBackground#707280
  • charts.blue#2959aa
  • charts.foreground#40434f
  • charts.green#33635c
  • charts.lines#f4f5f8
  • charts.orange#965027
  • charts.purple#5a3e8e
  • charts.red#8c4351
  • charts.yellow#8f5e15
  • chat.avatarBackground#2959aa
  • chat.avatarForeground#e6e7ed
  • chat.requestBorder#c1c2c7
  • chat.slashCommandBackground#e6e7ed
  • chat.slashCommandForeground#2959aa
  • debugConsole.errorForeground#942f2f
  • debugConsole.infoForeground#166775
  • debugExceptionWidget.background#acb0bf40
  • debugExceptionWidget.border#942f2f
  • debugIcon.breakpointDisabledForeground#707280
  • debugIcon.breakpointForeground#db4b4b
  • debugIcon.breakpointUnverifiedForeground#c24242
  • debugIcon.continueForeground#3e6396
  • debugIcon.pauseForeground#3e6396
  • debugIcon.startForeground#2959aa
  • debugIcon.stepBackForeground#3e6396
  • debugIcon.stepIntoForeground#3e6396
  • debugIcon.stepOutForeground#3e6396
  • debugIcon.stepOverForeground#3e6396
  • debugTokenExpression.boolean#965027
  • debugTokenExpression.error#942f2f
  • debugTokenExpression.name#2959aa
  • debugTokenExpression.number#965027
  • debugTokenExpression.string#385f0d
  • debugTokenExpression.value#40434f
  • debugToolBar.background#e6e7ed
  • debugView.stateLabelBackground#e6e7ed
  • debugView.stateLabelForeground#363c4d
  • debugView.valueChangedHighlight#f4f5f8
  • descriptionForeground#707280
  • diffEditor.diagonalFill#cacbcf
  • diffEditor.insertedLineBackground#2d9c9120
  • diffEditor.insertedTextBackground#2d9c9120
  • diffEditor.removedLineBackground#e8686812
  • diffEditor.removedTextBackground#e8686812
  • diffEditor.unchangedCodeBackground#c7c9d425
  • diffEditorGutter.insertedLineBackground#2d9c9120
  • diffEditorGutter.removedLineBackground#e8686812
  • diffEditorOverview.insertedForeground#2d9c9120
  • diffEditorOverview.removedForeground#e8686812
  • disabledForeground#707280
  • dropdown.background#e6e7ed
  • dropdown.border#c1c2c7
  • dropdown.foreground#363c4d
  • dropdown.listBackground#e6e7ed
  • editor.background#e6e7ed
  • editor.findMatchBackground#2d9c9130
  • editor.findMatchHighlightBackground#2d9c9120
  • editor.findRangeHighlightBackground#2959aa15
  • editor.focusedStackFrameHighlightBackground#c5e3d0
  • editor.foldBackground#b2b3b833
  • editor.foreground#343b59
  • editor.inactiveSelectionBackground#acb0bf33
  • editor.lineHighlightBackground#dcdee3
  • editor.rangeHighlightBackground#b3b6c320
  • editor.selectionBackground#acb0bf40
  • editor.selectionHighlightBackground#9aa5ce55
  • editor.stackFrameHighlightBackground#e7e8c8
  • editor.wordHighlightBackground#9aa5ce33
  • editor.wordHighlightStrongBackground#9aa5ce66
  • editorBracketHighlight.foreground1#698cd6
  • editorBracketHighlight.foreground2#68b3de
  • editorBracketHighlight.foreground3#9a7ecc
  • editorBracketHighlight.foreground4#25aac2
  • editorBracketHighlight.foreground5#80a856
  • editorBracketHighlight.foreground6#cfa25f
  • editorBracketHighlight.unexpectedBracket.foreground#bd4040
  • editorBracketMatch.background#cdced1
  • editorBracketMatch.border#dcdee3
  • editorBracketPairGuide.activeBackground1#698cd6
  • editorBracketPairGuide.activeBackground2#68b3de
  • editorBracketPairGuide.activeBackground3#9a7ecc
  • editorBracketPairGuide.activeBackground4#25aac2
  • editorBracketPairGuide.activeBackground5#80a856
  • editorBracketPairGuide.activeBackground6#cfa25f
  • editorCodeLens.foreground#868891
  • editorCursor.foreground#363c4d
  • editorError.foreground#bd4040
  • editorGhostText.foreground#73767d
  • editorGroup.border#c1c2c7
  • editorGroup.dropBackground#c1c2c7
  • editorGroupHeader.border#c1c2c7
  • editorGroupHeader.noTabsBackground#d6d8df
  • editorGroupHeader.tabsBackground#d6d8df
  • editorGroupHeader.tabsBorder#c1c2c7
  • editorGutter.addedBackground#71b6bd
  • editorGutter.deletedBackground#a8626a
  • editorGutter.modifiedBackground#637dbf
  • editorHint.foreground#0da0ba
  • editorHoverWidget.background#dcdee3
  • editorHoverWidget.border#c1c2c7
  • editorIndentGuide.activeBackground1#bdc1cf
  • editorIndentGuide.background1#d0d4e3
  • editorInfo.foreground#0da0ba
  • editorInlayHint.foreground#606269
  • editorLineNumber.activeForeground#363c4d
  • editorLineNumber.foreground#9da0ab
  • editorLink.activeForeground#1f2335
  • editorMarkerNavigation.background#d6d8df
  • editorOverviewRuler.addedForeground#71b6bd
  • editorOverviewRuler.border#c1c2c7
  • editorOverviewRuler.bracketMatchForeground#c1c2c7
  • editorOverviewRuler.deletedForeground#a8626a
  • editorOverviewRuler.errorForeground#bd4040
  • editorOverviewRuler.findMatchForeground#363c4d44
  • editorOverviewRuler.infoForeground#1abc9c
  • editorOverviewRuler.modifiedForeground#637dbf
  • editorOverviewRuler.rangeHighlightForeground#363c4d44
  • editorOverviewRuler.selectionHighlightForeground#363c4d22
  • editorOverviewRuler.warningForeground#8f5e15
  • editorOverviewRuler.wordHighlightForeground#5a3e8e55
  • editorOverviewRuler.wordHighlightStrongForeground#5a3e8e66
  • editorPane.background#e6e7ed
  • editorRuler.foreground#c1c2c7
  • editorSuggestWidget.background#dcdee3
  • editorSuggestWidget.border#c1c2c7
  • editorSuggestWidget.highlightForeground#2959aa
  • editorSuggestWidget.selectedBackground#e8e9ed
  • editorWarning.foreground#8f5e15
  • editorWhitespace.foreground#e6e7ed
  • editorWidget.background#d6d8df
  • editorWidget.border#c1c2c7
  • editorWidget.foreground#363c4d
  • editorWidget.resizeBorder#70728033
  • errorForeground#5a607d
  • extensionBadge.remoteBackground#2959aa
  • extensionBadge.remoteForeground#ffffff
  • extensionButton.prominentBackground#2959aaDD
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#2959aaAA
  • focusBorder#70728033
  • foreground#363c4d
  • gitDecoration.addedResourceForeground#166775
  • gitDecoration.conflictingResourceForeground#8f5e15
  • gitDecoration.deletedResourceForeground#914c54
  • gitDecoration.ignoredResourceForeground#707280
  • gitDecoration.modifiedResourceForeground#2959aa
  • gitDecoration.renamedResourceForeground#166775
  • gitDecoration.stageDeletedResourceForeground#914c54
  • gitDecoration.stageModifiedResourceForeground#2959aa
  • gitDecoration.untrackedResourceForeground#166775
  • gitlens.gutterBackgroundColor#dcdee3
  • gitlens.gutterForegroundColor#363c4d
  • gitlens.gutterUncommittedForegroundColor#2959aa
  • gitlens.trailingLineForegroundColor#73767d
  • icon.foreground#707280
  • inlineChat.foreground#363c4d
  • inlineChatDiff.inserted#2d9c9130
  • inlineChatDiff.removed#e8686842
  • inlineChatInput.background#e6e7ed
  • input.background#e6e7ed
  • input.border#c1c2c7
  • input.foreground#363c4d
  • input.placeholderForeground#4a5272
  • inputOption.activeBackground#2959aa44
  • inputValidation.errorBackground#85353e
  • inputValidation.errorBorder#942f2f
  • inputValidation.errorForeground#e8e9ed
  • inputValidation.infoBackground#3d59a15c
  • inputValidation.infoBorder#3d59a1
  • inputValidation.infoForeground#000000
  • inputValidation.warningBackground#c2985b
  • inputValidation.warningBorder#8f5e15
  • inputValidation.warningForeground#000000
  • list.activeSelectionBackground#e6e7ed
  • list.activeSelectionForeground#363c4d
  • list.deemphasizedForeground#363c4d
  • list.dropBackground#c1c2c7
  • list.errorForeground#942f2f
  • list.focusBackground#e6e7ed
  • list.focusForeground#363c4d
  • list.highlightForeground#2959aa
  • list.hoverBackground#e1e2e8
  • list.hoverForeground#363c4d
  • list.inactiveSelectionBackground#e6e7ed
  • list.inactiveSelectionForeground#363c4d
  • list.invalidItemForeground#c97018
  • list.warningForeground#8F5E15
  • listFilterWidget.background#e6e7ed
  • listFilterWidget.noMatchesOutline#a6333f
  • listFilterWidget.outline#2959aa
  • menu.background#d6d8df
  • menu.border#c1c2c7
  • menu.foreground#363c4d
  • menu.selectionBackground#7a85a8
  • menu.selectionForeground#343b58
  • menu.separatorBackground#c1c2c7
  • menubar.selectionBackground#7a85a8
  • menubar.selectionBorder#c1c2c7
  • menubar.selectionForeground#343b58
  • merge.currentContentBackground#007a7544
  • merge.currentHeaderBackground#007a75aa
  • merge.incomingContentBackground#2959aa44
  • merge.incomingHeaderBackground#2959aaaa
  • mergeEditor.change.background#007a7522
  • mergeEditor.change.word.background#007a7522
  • mergeEditor.conflict.handled.minimapOverViewRuler#007a75
  • mergeEditor.conflict.handledFocused.border#007a7525
  • mergeEditor.conflict.handledUnfocused.border#007a7525
  • mergeEditor.conflict.unhandled.minimapOverViewRuler#bb7a61
  • mergeEditor.conflict.unhandledFocused.border#bb7a61
  • mergeEditor.conflict.unhandledUnfocused.border#bb7a6188
  • minimap.errorHighlight#bd4040
  • multiDiffEditor.border#e6e7ed
  • multiDiffEditor.headerBackground#e6e7ed
  • notebook.cellBorderColor#c1c2c7
  • notebook.cellEditorBackground#d6d8df
  • notebook.cellStatusBarItemHoverBackground#e6e7ed
  • notebook.editorBackground#e6e7ed
  • notebook.focusedCellBorder#707280
  • notificationCenterHeader.background#dcdee3
  • notificationLink.foreground#2959aa
  • notifications.background#dcdee3
  • notificationsErrorIcon.foreground#bb616b
  • notificationsInfoIcon.foreground#637dbf
  • notificationsWarningIcon.foreground#bba461
  • panel.background#d6d8df
  • panel.border#c1c2c7
  • panelInput.border#e6e7ed
  • panelTitle.activeBorder#2959aa
  • panelTitle.activeForeground#363c4d
  • panelTitle.inactiveForeground#707280
  • peekView.border#c1c2c7
  • peekViewEditor.background#dcdee3
  • peekViewEditor.matchHighlightBackground#2959aa22
  • peekViewResult.background#d7d9de
  • peekViewResult.fileForeground#363c4d
  • peekViewResult.lineForeground#363c4d
  • peekViewResult.matchHighlightBackground#2959aa22
  • peekViewResult.selectionBackground#2959aa33
  • peekViewResult.selectionForeground#363c4d
  • peekViewTitle.background#d6d8df
  • peekViewTitleDescription.foreground#363c4d
  • peekViewTitleLabel.foreground#363c4d
  • pickerGroup.border#c1c2c7
  • pickerGroup.foreground#363c4d
  • progressBar.background#2959aa
  • sash.hoverBorder#707280
  • scmGraph.foreground1#8F5E15
  • scmGraph.foreground2#cfa25f
  • scmGraph.foreground3#41a6b5
  • scmGraph.foreground4#506FCA
  • scmGraph.foreground5#7b43ba
  • scmGraph.historyItemBaseRefColor#7b43ba
  • scmGraph.historyItemHoverAdditionsForeground#385F0D
  • scmGraph.historyItemHoverDeletionsForeground#8c4351
  • scmGraph.historyItemRefColor#2959aa
  • scmGraph.historyItemRemoteRefColor#41a6b5
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#90929632
  • scrollbarSlider.background#90929625
  • scrollbarSlider.hoverBackground#90929620
  • selection.background#acb0bf55
  • settings.headerForeground#2959aa
  • sideBar.background#d6d8df
  • sideBar.border#c1c2c7
  • sideBar.dropBackground#c1c2c7
  • sideBar.foreground#363c4d
  • sideBarSectionHeader.background#d6d8df
  • sideBarSectionHeader.border#c1c2c7
  • sideBarSectionHeader.foreground#363c4d
  • sideBarTitle.foreground#363c4d
  • statusBar.background#d6d8df
  • statusBar.border#c1c2c7
  • statusBar.debuggingBackground#e6e7ed
  • statusBar.debuggingForeground#363c4d
  • statusBar.foreground#363c4d
  • statusBar.noFolderBackground#e6e7ed
  • statusBarItem.activeBackground#c1c2c7
  • statusBarItem.hoverBackground#e6e7ed
  • statusBarItem.prominentBackground#c1c2c7
  • statusBarItem.prominentHoverBackground#e6e7ed
  • tab.activeBackground#dadce3
  • tab.activeBorder#2959aa
  • tab.activeForeground#363c4d
  • tab.activeModifiedBorder#e6e7ed
  • tab.border#c1c2c7
  • tab.hoverBackground#dadce3
  • tab.hoverForeground#1f222b
  • tab.inactiveBackground#d6d8df
  • tab.inactiveForeground#363c4d
  • tab.inactiveModifiedBorder#e6e7ed
  • tab.lastPinnedBorder#dadbe0
  • tab.selectedBackground#d6d8df
  • tab.unfocusedActiveBorder#9da0ab
  • tab.unfocusedActiveForeground#363c4d
  • tab.unfocusedHoverForeground#363c4d
  • tab.unfocusedInactiveForeground#363c4d
  • terminal.ansiBlack#343B58
  • terminal.ansiBlue#2959aa
  • terminal.ansiBrightBlack#343B58
  • terminal.ansiBrightBlue#2959aa
  • terminal.ansiBrightCyan#006c86
  • terminal.ansiBrightGreen#33635c
  • terminal.ansiBrightMagenta#7b43ba
  • terminal.ansiBrightRed#8c4351
  • terminal.ansiBrightWhite#707280
  • terminal.ansiBrightYellow#8f5e15
  • terminal.ansiCyan#006c86
  • terminal.ansiGreen#33635c
  • terminal.ansiMagenta#7b43ba
  • terminal.ansiRed#8c4351
  • terminal.ansiWhite#707280
  • terminal.ansiYellow#8f5e15
  • terminal.background#d6d8df
  • terminal.foreground#343B58
  • terminal.selectionBackground#acb0bf40
  • terminalCursor.foreground#707280
  • textBlockQuote.background#d6d8df
  • textCodeBlock.background#e6e7ed
  • textLink.activeForeground#363c4d
  • textLink.foreground#2959aa
  • textPreformat.foreground#33635c
  • textSeparator.foreground#707280
  • titleBar.activeBackground#d6d8df
  • titleBar.activeForeground#363c4d
  • titleBar.border#c1c2c7
  • titleBar.inactiveBackground#d6d8df
  • titleBar.inactiveForeground#363c4d
  • toolbar.activeBackground#acb0bf40
  • toolbar.hoverBackground#acb0bf40
  • tree.indentGuidesStroke#c1c2c7
  • walkThrough.embeddedEditorBackground#d6d8df
  • widget.shadow#ffffff00
  • window.activeBorder#cdced1
  • window.inactiveBorder#cdced1

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#888b94
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#6c6e75
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#606269
variable.other.constant, punctuation.definition.constant, constant.language, constant.numeric, support.constant, constant.other.caps#965027
string, constant.other.symbol, constant.other.key, meta.attribute-selector, string constant.character#385f0d
constant.other.color, constant.other.color.rgb-value.hex punctuation.definition.constant#40434f
invalid, invalid.illegal#942f2f
invalid.deprecated#65359d
storage.type#65359d
meta.var.expr storage.type, storage.modifier#7b43ba
punctuation.definition.template-expression, punctuation.section.embedded, meta.embedded.line.tag.smarty, support.constant.handlebars, punctuation.section.tag.twig#0f4b6e
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#006c86
keyword.operator.spread, keyword.operator.rest#8c4351bold
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#006C86
keyword.control.module.js, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.default, meta.import keyword.other#0f4b6e
keyword, keyword.control, keyword.other.important#65359d
keyword.other.DML#0f4b6e
keyword.operator.logical, storage.type.function, keyword.operator.bitwise, keyword.operator.ternary, keyword.operator.comparison, keyword.operator.relational, keyword.operator.or.regexp#65359d
entity.name.tag#8c4351
entity.name.tag support.class.component, meta.tag.custom entity.name.tag, meta.tag.other.unrecognized.html.derivative entity.name.tag, meta.tag#69323d
punctuation.definition.tag, text.html.php meta.embedded.block.html meta.tag.metadata.script.end.html punctuation.definition.tag.begin.html text.html.basic#b05467
meta.tag.custom punctuation.definition.tag, meta.jsx punctuation.definition.tag#69323d
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#8f5e15
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#343b58
meta.array.literal variable#0f4b6e
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#33635c
variable.other.property, support.variable.property, support.variable.property.dom, meta.function-call variable.other.object.property, variable.other.object.property.cs#0f4b6e
variable.other.object.property#343b58
meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.object-literal.key#296973
source.cpp meta.block variable.other#8c4351
support.other.variable#8c4351
meta.class-method.js entity.name.function.js, entity.name.method.js, variable.function.constructor, keyword.other.special-method, storage.type.cs#2959aa
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#2959aa
variable.parameter.function.language.special, variable.parameter, meta.function.parameters punctuation.definition.variable, meta.function.parameter variable#8f5e15
keyword.other.type.php, storage.type.php, constant.character, constant.escape, keyword.other.unit#65359d
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#65359d
entity.other.inherited-class#65359d
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#006c86
entity.name#343b58
support.function#006c86
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#2959aa
support.constant.font-name, meta.definition.variable#385f0d
entity.other.attribute-name.class, meta.at-rule.mixin.scss entity.name.function.scss#385f0d
entity.other.attribute-name.id#942f2f
entity.name.tag.css#006c86
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#8f5e15
meta.property-list#484c61
meta.property-list meta.at-rule.if, meta.at-rule.return variable.parameter.url, meta.property-list meta.at-rule.else#965027
entity.other.attribute-name.parent-selector-suffix punctuation.definition.entity.css#33635c
meta.property-list meta.property-list#484c61
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#65359d
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#4f4168
meta.property-list meta.at-rule.include#343b58
support.constant.property-value#965027
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#343b58
variable.language#8c4351
variable.other punctuation.definition.variable#343b58
source.js constant.other.object.key.js string.unquoted.label.js, variable.language.this punctuation.definition.variable, keyword.other.this#8c4351
entity.other.attribute-name, text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#65359d
text.html constant.character.entity#006c86
text.html punctuation.definition.entity#006c86
entity.other.attribute-name.id.html, meta.directive.vue entity.other.attribute-name.html#65359d
source.sass keyword.control#2959aa
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.placeholder, meta.property-list meta.property-value#65359d
markup.inserted#449dab
markup.deleted#914c54
markup.changed#2959aa
string.regexp#3e6968
punctuation.definition.group#8c4351
constant.other.character-class.regexp#65359d
constant.other.character-class.set.regexp, punctuation.definition.character-class.regexp#8f5e15
keyword.operator.quantifier.regexp#65359d
constant.character.escape.backslash#343b58
constant.character.escape#363c4d
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#2959aa
keyword.other.unit#8c4351
source.json meta.structure.dictionary.json support.type.property-name.json#2959aa
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#006c86
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#0f4b6e
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#65359d
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#8f5e15
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#006c86
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#33635c
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#8c4351
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#385f0d
punctuation.definition.list_item.markdown#484c61
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#484c61
meta.embedded.block#343b58
meta.tag JSXNested, meta.jsx.children, text.html, text.log#40434f
text.html.markdown markup.inline.raw.markdown#65359d
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#4E5579
heading.1.markdown entity.name, heading.1.markdown punctuation.definition.heading.markdown#363c4dbold
heading.2.markdown entity.name, heading.2.markdown punctuation.definition.heading.markdown#0F4B6Ebold
heading.3.markdown entity.name, heading.3.markdown punctuation.definition.heading.markdown#2959aabold
heading.4.markdown entity.name, heading.4.markdown punctuation.definition.heading.markdown#395b96bold
heading.5.markdown entity.name, heading.5.markdown punctuation.definition.heading.markdown#40434fbold
heading.6.markdown entity.name, heading.6.markdown punctuation.definition.heading.markdown#747ca1bold
markup.italic, markup.italic punctuation#343b58italic
markup.bold, markup.bold punctuation#343b58bold
markup.bold markup.italic, markup.bold markup.italic punctuation#343b58bold 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#33635c
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.language.fenced.markdown#363c4d
meta.separator#868891bold
markup.table#c0cefc
token.info-token#0db9d7
token.warn-token#ffdb69
token.error-token#942f2f
token.debug-token#b267e6
entity.tag.apacheconf#8c4351
meta.preprocessor#33635c
source.env#2959aa

Shiki preview

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

Loading...

Tokyo Night - Coding Theme