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.activeBackground#E8EBF5
  • activityBar.activeBorder#3d59a1
  • activityBar.background#F5F7FC
  • activityBar.border#E8EBF5
  • activityBar.foreground#3d59a1
  • activityBar.inactiveForeground#586280
  • activityBarBadge.background#3d59a1
  • activityBarBadge.foreground#fff
  • badge.background#3d59a133
  • badge.foreground#3d59a1
  • breadcrumb.activeSelectionForeground#2d3f6f
  • breadcrumb.background#FFFFFF
  • breadcrumb.focusForeground#2d3f6f
  • breadcrumb.foreground#455070
  • breadcrumbPicker.background#FFFFFF
  • button.background#3d59a1dd
  • button.foreground#ffffff
  • button.hoverBackground#4d69b1
  • charts.blue#254888
  • charts.foreground#4A5678
  • charts.green#135868
  • charts.lines#E8EBF5
  • charts.orange#905015
  • charts.purple#503580
  • charts.red#a52040
  • charts.yellow#6e5818
  • chat.avatarBackground#3d59a1
  • chat.avatarForeground#ffffff
  • chat.requestBackground#FFFFFF
  • chat.requestBorder#3d59a1
  • chat.slashCommandBackground#3d59a144
  • chat.slashCommandForeground#553088
  • debugConsole.errorForeground#803840
  • debugConsole.infoForeground#5a6380
  • debugConsole.sourceForeground#5a6380
  • debugConsole.warningForeground#6e5818
  • debugConsoleInputIcon.foreground#135868
  • debugExceptionWidget.background#FFFFFF
  • debugExceptionWidget.border#a52040
  • debugTokenExpression.boolean#905015
  • debugTokenExpression.error#803840
  • debugTokenExpression.name#135868
  • debugTokenExpression.number#905015
  • debugTokenExpression.string#3a6522
  • debugTokenExpression.value#4A5678
  • debugToolBar.background#FFFFFF
  • debugView.stateLabelBackground#F5F7FC
  • debugView.stateLabelForeground#5a6380
  • debugView.valueChangedHighlight#3d59a1aa
  • descriptionForeground#455070
  • diffEditor.insertedTextBackground#41a6b525
  • diffEditor.removedTextBackground#db4b4b22
  • dropdown.background#FFFFFF
  • dropdown.foreground#5a6380
  • dropdown.listBackground#F5F7FC
  • editor.background#FFFFFF
  • editor.findMatchBackground#3d59a133
  • editor.findMatchBorder#3d59a1
  • editor.findMatchHighlightBackground#3d59a122
  • editor.findRangeHighlightBackground#E8EBF530
  • editor.focusedStackFrameHighlightBackground#2d869520
  • editor.foldBackground#E8EBF520
  • editor.foreground#2d3f6f
  • editor.inactiveSelectionBackground#E8EBF540
  • editor.lineHighlightBackground#F5F7FC
  • editor.rangeHighlightBackground#E8EBF530
  • editor.selectionBackground#3d59a133
  • editor.selectionHighlightBackground#3d59a122
  • editor.stackFrameHighlightBackground#b08f4820
  • editor.wordHighlightBackground#3d59a122
  • editor.wordHighlightStrongBackground#3d59a133
  • editorBracketHighlight.foreground1#6e5818
  • editorBracketHighlight.foreground2#3a6522
  • editorBracketHighlight.foreground3#135868
  • editorBracketHighlight.foreground4#503580
  • editorBracketHighlight.foreground5#1e6275
  • editorBracketHighlight.foreground6#254888
  • editorBracketHighlight.unexpectedBracket.foreground#a52828
  • editorBracketMatch.background#FFFFFF
  • editorBracketMatch.border#586280
  • editorBracketPairGuide.activeBackground1#254888
  • editorBracketPairGuide.activeBackground2#1e6275
  • editorBracketPairGuide.activeBackground3#503580
  • editorBracketPairGuide.activeBackground4#135868
  • editorBracketPairGuide.activeBackground5#3a6522
  • editorBracketPairGuide.activeBackground6#6e5818
  • editorCodeLens.foreground#586280
  • editorCursor.background#FFFFFF
  • editorCursor.foreground#553088
  • editorError.foreground#a52828
  • editorGroup.border#E8EBF5
  • editorGroup.dropBackground#E8EBF550
  • editorGroup.dropIntoPromptBorder#3d59a1
  • editorGroupHeader.border#E8EBF5
  • editorGroupHeader.noTabsBackground#F5F7FC
  • editorGroupHeader.tabsBackground#F5F7FC
  • editorGroupHeader.tabsBorder#E8EBF5
  • editorGutter.addedBackground#41a6b5
  • editorGutter.deletedBackground#a52828
  • editorGutter.modifiedBackground#3d59a1
  • editorHint.foreground#135868
  • editorHoverWidget.background#FFFFFF
  • editorHoverWidget.border#3d59a1
  • editorIndentGuide.activeBackground1#586280
  • editorIndentGuide.activeBackground2#586280
  • editorIndentGuide.activeBackground3#586280
  • editorIndentGuide.activeBackground4#586280
  • editorIndentGuide.activeBackground5#586280
  • editorIndentGuide.activeBackground6#586280
  • editorIndentGuide.background1#E8EBF5
  • editorIndentGuide.background2#E8EBF5
  • editorIndentGuide.background3#E8EBF5
  • editorIndentGuide.background4#E8EBF5
  • editorIndentGuide.background5#E8EBF5
  • editorIndentGuide.background6#E8EBF5
  • editorInfo.foreground#135868
  • editorLightBulb.foreground#6e5818
  • editorLightBulbAutoFix.foreground#6e5818
  • editorLineNumber.activeForeground#553088
  • editorLineNumber.foreground#6e7890
  • editorLink.activeForeground#3d59a1
  • editorMarkerNavigation.background#FFFFFF
  • editorOverviewRuler.addedForeground#41a6b5
  • editorOverviewRuler.border#FFFFFF00
  • editorOverviewRuler.bracketMatchForeground#FFFFFF
  • editorOverviewRuler.deletedForeground#a52828
  • editorOverviewRuler.errorForeground#a52828
  • editorOverviewRuler.findMatchForeground#3d59a144
  • editorOverviewRuler.infoForeground#135868
  • editorOverviewRuler.modifiedForeground#3d59a1
  • editorOverviewRuler.rangeHighlightForeground#3d59a144
  • editorOverviewRuler.selectionHighlightForeground#3d59a122
  • editorOverviewRuler.warningForeground#6e5818
  • editorOverviewRuler.wordHighlightForeground#8b5fc755
  • editorOverviewRuler.wordHighlightStrongForeground#8b5fc766
  • editorPane.background#FFFFFF
  • editorRuler.foreground#E8EBF5
  • editorStickyScrollHover.background#E8EBF5
  • editorSuggestWidget.background#FFFFFF
  • editorSuggestWidget.border#3d59a1
  • editorSuggestWidget.highlightForeground#3d59a1
  • editorSuggestWidget.selectedBackground#F5F7FC
  • editorWarning.foreground#6e5818
  • editorWhitespace.foreground#6e7890
  • editorWidget.background#FFFFFF
  • editorWidget.resizeBorder#E8EBF5
  • errorForeground#a52828
  • extensionBadge.remoteBackground#3d59a1
  • extensionBadge.remoteForeground#ffffff
  • extensionButton.prominentBackground#3d59a1DD
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#4d69b1
  • focusBorder#3d59a133
  • foreground#5a6380
  • gitDecoration.addedResourceForeground#135868
  • gitDecoration.conflictingResourceForeground#6e5818
  • gitDecoration.deletedResourceForeground#a52040
  • gitDecoration.ignoredResourceForeground#586280
  • gitDecoration.modifiedResourceForeground#3d59a1
  • gitDecoration.renamedResourceForeground#135868
  • gitDecoration.stageDeletedResourceForeground#a52040
  • gitDecoration.stageModifiedResourceForeground#3d59a1
  • gitDecoration.untrackedResourceForeground#135868
  • icon.foreground#5a6380
  • inlineChat.background#FFFFFF
  • inlineChat.border#3d59a1
  • inlineChat.shadow#00000011
  • inlineChatInput.border#3d59a1
  • inlineChatInput.focusBorder#3d59a1
  • inlineChatInput.placeholderForeground#7581A08A
  • inlineEdit.modifiedBackground#41a6b525
  • inlineEdit.originalBackground#db4b4b22
  • input.background#FFFFFF
  • input.border#3d59a1
  • input.foreground#2d3f6f
  • input.placeholderForeground#7581A08A
  • inputOption.activeBackground#3d59a144
  • inputOption.activeForeground#2d3f6f
  • inputValidation.errorBackground#f7e8ea
  • inputValidation.errorBorder#a52828
  • inputValidation.errorForeground#2d3f6f
  • inputValidation.infoBackground#e8f4f8
  • inputValidation.infoBorder#135868
  • inputValidation.infoForeground#2d3f6f
  • inputValidation.warningBackground#fef6e8
  • inputValidation.warningBorder#6e5818
  • inputValidation.warningForeground#2d3f6f
  • list.activeSelectionBackground#E8EBF5
  • list.activeSelectionForeground#2d3f6f
  • list.deemphasizedForeground#455070
  • list.dropBackground#E8EBF550
  • list.errorForeground#803840
  • list.focusBackground#F5F7FC
  • list.focusForeground#2d3f6f
  • list.highlightForeground#3d59a1
  • list.hoverBackground#F5F7FC
  • list.hoverForeground#2d3f6f
  • list.inactiveSelectionBackground#F5F7FC
  • list.inactiveSelectionForeground#2d3f6f
  • list.invalidItemForeground#6e5818
  • list.warningForeground#6e5818
  • listFilterWidget.background#FFFFFF
  • listFilterWidget.noMatchesOutline#a52828
  • listFilterWidget.outline#3d59a1
  • menu.background#FFFFFF
  • menu.border#3d59a1
  • menu.foreground#5a6380
  • menu.selectionBackground#E8EBF5
  • menu.selectionForeground#2d3f6f
  • menu.separatorBackground#E8EBF5
  • menubar.selectionBackground#E8EBF5
  • menubar.selectionBorder#E8EBF5
  • menubar.selectionForeground#2d3f6f
  • merge.currentContentBackground#41a6b544
  • merge.currentHeaderBackground#41a6b5aa
  • merge.incomingContentBackground#3d59a144
  • merge.incomingHeaderBackground#3d59a1aa
  • minimapGutter.addedBackground#41a6b5
  • minimapGutter.deletedBackground#a52828
  • minimapGutter.modifiedBackground#3d59a1
  • notebook.cellBorderColor#E8EBF5
  • notebook.cellEditorBackground#FFFFFF
  • notebook.cellHoverBackground#F5F7FC20
  • notebook.cellInsertionIndicator#3d59a1
  • notebook.cellStatusBarItemHoverBackground#F5F7FC
  • notebook.cellToolbarSeparator#E8EBF5
  • notebook.focusedCellBorder#3d59a1
  • notebook.focusedEditorBorder#3d59a1
  • notebook.inactiveFocusedCellBorder#E8EBF5
  • notebook.outputContainerBackgroundColor#F5F7FC
  • notebook.outputContainerBorderColor#E8EBF5
  • notebook.selectedCellBackground#F5F7FC30
  • notebook.selectedCellBorder#3d59a1
  • notebook.symbolHighlightBackground#3d59a122
  • notebookEditorOverviewRuler.runningCellForeground#135868
  • notebookScrollbarSlider.activeBackground#9098B844
  • notebookScrollbarSlider.background#9098B833
  • notebookScrollbarSlider.hoverBackground#9098B844
  • notebookStatusErrorIcon.foreground#a52828
  • notebookStatusRunningIcon.foreground#135868
  • notebookStatusSuccessIcon.foreground#135868
  • notificationCenterHeader.background#F5F7FC
  • notificationLink.foreground#3d59a1
  • notifications.background#FFFFFF
  • notificationsErrorIcon.foreground#803840
  • notificationsInfoIcon.foreground#135868
  • notificationsWarningIcon.foreground#6e5818
  • panel.background#FFFFFF
  • panel.border#E8EBF5
  • panel.dropBorder#3d59a1
  • panelInput.border#E8EBF5
  • panelSection.border#3d59a1
  • panelTitle.activeBorder#3d59a1
  • panelTitle.activeForeground#5a6380
  • panelTitle.inactiveForeground#586280
  • peekView.border#3d59a1
  • peekViewEditor.background#FFFFFF
  • peekViewEditor.matchHighlightBackground#3d59a133
  • peekViewEditor.matchHighlightBorder#3d59a1
  • peekViewResult.background#F5F7FC
  • peekViewResult.fileForeground#5a6380
  • peekViewResult.lineForeground#2d3f6f
  • peekViewResult.matchHighlightBackground#3d59a133
  • peekViewResult.selectionBackground#3d59a133
  • peekViewResult.selectionForeground#2d3f6f
  • peekViewTitle.background#F5F7FC
  • peekViewTitleDescription.foreground#5a6380
  • peekViewTitleLabel.foreground#2d3f6f
  • pickerGroup.border#E8EBF5
  • pickerGroup.foreground#2d3f6f
  • profileBadge.background#3d59a1
  • profileBadge.foreground#ffffff
  • profiles.sashBorder#E8EBF5
  • progressBar.background#3d59a1
  • sash.hoverBorder#3d59a1
  • scmGraph.foreground1#254888
  • scmGraph.foreground2#1e6275
  • scmGraph.foreground3#503580
  • scmGraph.foreground4#135868
  • scmGraph.foreground5#3a6522
  • scmGraph.historyItemHoverLabelForeground#2d3f6f
  • scrollbar.shadow#00000011
  • scrollbarSlider.activeBackground#9098B844
  • scrollbarSlider.background#9098B833
  • scrollbarSlider.hoverBackground#9098B844
  • selection.background#3d59a133
  • settings.headerForeground#3d59a1
  • sideBar.background#F5F7FC
  • sideBar.border#E8EBF5
  • sideBar.dropBackground#E8EBF550
  • sideBar.foreground#5a6380
  • sideBarSectionHeader.background#F5F7FC
  • sideBarSectionHeader.border#E8EBF5
  • sideBarSectionHeader.foreground#2d3f6f
  • sideBarTitle.foreground#5a6380
  • statusBar.background#F5F7FC
  • statusBar.border#E8EBF5
  • statusBar.debuggingBackground#F5F7FC
  • statusBar.debuggingForeground#5a6380
  • statusBar.foreground#5a6380
  • statusBar.noFolderBackground#F5F7FC
  • statusBarItem.activeBackground#E8EBF5
  • statusBarItem.hoverBackground#E8EBF5
  • statusBarItem.prominentBackground#F5F7FC
  • statusBarItem.prominentHoverBackground#E8EBF5
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#FFFFFF
  • tab.activeBorderTop#3d59a1
  • tab.activeForeground#2d3f6f
  • tab.activeModifiedBorder#3d59a1
  • tab.border#E8EBF5
  • tab.inactiveBackground#F5F7FC
  • tab.inactiveForeground#5a6380
  • tab.inactiveModifiedBorder#586280
  • tab.lastPinnedBorder#E8EBF5
  • tab.unfocusedActiveBorder#FFFFFF
  • tab.unfocusedActiveForeground#2d3f6f
  • tab.unfocusedHoverForeground#2d3f6f
  • tab.unfocusedInactiveForeground#5a6380
  • terminal.ansiBlack#2d3f6f
  • terminal.ansiBlue#254888
  • terminal.ansiBrightBlack#5a6380
  • terminal.ansiBrightBlue#254888
  • terminal.ansiBrightCyan#135868
  • terminal.ansiBrightGreen#135868
  • terminal.ansiBrightMagenta#553088
  • terminal.ansiBrightRed#a52040
  • terminal.ansiBrightWhite#2d3f6f
  • terminal.ansiBrightYellow#6e5818
  • terminal.ansiCyan#135868
  • terminal.ansiGreen#135868
  • terminal.ansiMagenta#553088
  • terminal.ansiRed#a52040
  • terminal.ansiWhite#5a6380
  • terminal.ansiYellow#6e5818
  • terminal.background#FFFFFF
  • terminal.border#E8EBF5
  • terminal.findMatchBorder#3d59a1
  • terminal.findMatchHighlightBorder#3d59a1
  • terminal.foreground#2d3f6f
  • terminal.selectionBackground#3d59a130
  • terminal.tab.activeBorder#3d59a1
  • testing.coverCountBadgeBackground#3d59a1
  • testing.coverCountBadgeForeground#ffffff
  • testing.coveredBackground#41a6b515
  • testing.coveredBorder#41a6b544
  • testing.coveredGutterBackground#135868
  • testing.iconErrored#a52828
  • testing.iconFailed#a52040
  • testing.iconPassed#135868
  • testing.iconQueued#5a6380
  • testing.iconSkipped#586280
  • testing.iconUnset#5a6380
  • testing.message.error.lineBackground#db4b4b15
  • testing.message.info.lineBackground#2d869515
  • testing.peekBorder#3d59a1
  • testing.peekHeaderBackground#F5F7FC
  • testing.runAction#135868
  • testing.uncoveredBackground#db4b4b15
  • testing.uncoveredBorder#db4b4b44
  • testing.uncoveredBranchBackground#b08f4815
  • testing.uncoveredGutterBackground#a52828
  • textBlockQuote.background#F5F7FC
  • textCodeBlock.background#F5F7FC
  • textLink.activeForeground#135868
  • textLink.foreground#3d59a1
  • textPreformat.foreground#5a6380
  • textSeparator.foreground#6e7890
  • titleBar.activeBackground#F5F7FC
  • titleBar.activeForeground#5a6380
  • titleBar.border#E8EBF5
  • titleBar.inactiveBackground#F5F7FC
  • titleBar.inactiveForeground#586280
  • tree.indentGuidesStroke#6e7890
  • walkThrough.embeddedEditorBackground#F5F7FC
  • widget.border#3d59a180
  • widget.shadow#00000011
  • window.activeBorder#E8EBF5
  • window.inactiveBorder#E8EBF5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword.control.flow.block-scalar.literal
comment, comment.block.documentation, punctuation.definition.comment, comment.block.documentation punctuation#505a78
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#586280
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#455070
variable.other.constant, punctuation.definition.constant, constant.language, constant.numeric, support.constant, constant.language.null, constant.language.undefined, constant.language.go, constant.language.boolean, constant.language.json, constant.language.infinity, constant.language.nan#752535
string, constant.other.symbol, constant.other.key, meta.attribute-selector#25654a
constant.other.color, constant.other.color.rgb-value.hex punctuation.definition.constant#4a5678
invalid, invalid.illegal#c52040
invalid.deprecated#553088
storage.type#553088
meta.var.expr storage.type, storage.modifier#553088
punctuation.definition.template-expression, punctuation.section.embedded, meta.embedded.line.tag.smarty, support.constant.handlebars, punctuation.section.tag.twig#135868
keyword.control.smarty, keyword.control.twig, support.constant.handlebars keyword.control, keyword.operator.comparison.twig, keyword.blade, entity.name.function.blade#0e4a55
keyword.operator.spread, keyword.operator.rest#2d3f6f
keyword.operator, keyword.control.as, keyword.other, keyword.operator.bitwise.shift, punctuation, 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, 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#1a5e6e
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.default, keyword.control.flow, meta.import keyword.other#135868
keyword, keyword.control, keyword.other.important#553088
keyword.other.DML#135868
keyword.operator.logical, storage.type.function, keyword.operator.bitwise, keyword.operator.ternary, keyword.operator.comparison, keyword.operator.relational, keyword.operator.or.regexp#553088
entity.name.tag#6e5818
entity.name.tag, support.class.component, meta.tag#6e5818
punctuation.definition.tag#135868
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#2d3f6f
variable, support.variable, string constant.other.placeholder, variable.parameter.handlebars#2d3f6f
variable.other.object#2d3f6f
meta.array.literal variable#2d3f6f
meta.object-literal.key, 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#6e5818
variable.other.property, support.variable.property, support.variable.property.dom, variable.other.object.property, meta.function-call variable.other.object.property#254888
source.cpp meta.block variable.other#a52040
support.other.variable#2d3f6f
meta.class-method.js entity.name.function.js, entity.name.method.js, variable.function.constructor, keyword.other.special-method, storage.type.cs#254888
entity.name.function, meta.function-call, meta.function-call entity.name.function, variable.function, meta.definition.method entity.name.function, meta.object-literal entity.name.function#254888
variable.parameter.function.language.special, variable.parameter, meta.function.parameters punctuation.definition.variable, meta.function.parameter variable#a52040
keyword.other.type.php, storage.type.php, constant.character, constant.escape, keyword.other.unit#553088
meta.definition.variable variable.other.constant, meta.definition.variable variable.other.readwrite, variable.other.declaration#2d3f6f
entity.other.inherited-class#553088
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#0e4a55
entity.name, entity.name.type.alias#0e4a55
support.function#0e4a55
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#254888
support.constant.font-name, meta.definition.variable#3a6522
entity.other.attribute-name.class, meta.at-rule.mixin.scss entity.name.function.scss#6e5818
entity.other.attribute-name.id#553088
entity.name.tag.css#6e5818
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#6e5818
meta.property-list#5a6380
meta.property-list meta.at-rule.if, meta.at-rule.return variable.parameter.url, meta.property-list meta.at-rule.else#905015
entity.other.attribute-name.parent-selector-suffix punctuation.definition.entity.css#6e5818
meta.property-list meta.property-list#5a6380
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#553088
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#503580
meta.property-list meta.at-rule.include#2d3f6f
support.constant.property-value#25654a
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#6e5818
variable.language#a52040
variable.other punctuation.definition.variable#2d3f6f
source.js constant.other.object.key.js string.unquoted.label.js, variable.language.this punctuation.definition.variable, keyword.other.this#a52040
entity.other.attribute-name, text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#a52040
text.html constant.character.entity#0e4a55
entity.other.attribute-name.id.html, meta.directive.vue entity.other.attribute-name.html#553088
source.sass keyword.control#254888
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.placeholder, meta.property-list meta.property-value#553088
markup.inserted#135868
markup.deleted#a52040
markup.changed#3d59a1
string.regexp#147070
punctuation.definition.group#a52040
constant.other.character-class.regexp#553088
constant.other.character-class.set.regexp, punctuation.definition.character-class.regexp#6e5818
keyword.operator.quantifier.regexp#1a5e6e
constant.character.escape.backslash#2d3f6f
constant.character.escape#1a5e6e
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#254888
keyword.other.unit#a52040
source.json meta.structure.dictionary.json support.type.property-name.json#6e5818
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#254888
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#6e5818
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#254888
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#6e5818
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#254888
punctuation.definition.list_item.markdown#5a6380
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#5a6380
meta.jsx.children, meta.embedded.block#2d3f6f
text.html, text.log#4a5678
text.html.markdown markup.inline.raw.markdown#553088
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#586280
heading.1.markdown entity.name, heading.1.markdown punctuation.definition.heading.markdown#135868bold
heading.2.markdown entity.name, heading.2.markdown punctuation.definition.heading.markdown#1e6275bold
heading.3.markdown entity.name, heading.3.markdown punctuation.definition.heading.markdown#254888bold
heading.4.markdown entity.name, heading.4.markdown punctuation.definition.heading.markdown#3d59a1bold
heading.5.markdown entity.name, heading.5.markdown punctuation.definition.heading.markdown#4a5678bold
heading.6.markdown entity.name, heading.6.markdown punctuation.definition.heading.markdown#5a6380bold
markup.bold, markup.bold punctuation#2d3f6fbold
markup.bold markup.italic, markup.bold markup.italic punctuation#2d3f6fbold italic
markup.underline, markup.underline punctuationunderline
markup.quote punctuation.definition.blockquote.markdown#586280
markup.quote
string.other.link, markup.underline.link, constant.other.reference.link.markdown, string.other.link.description.title.markdown#6e5818
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.language.fenced.markdown#1a5e6e
meta.separator#6e7890bold
markup.table#2d3f6f
token.info-token#0e4a55
token.warn-token#6e5818
token.error-token#a52828
token.debug-token#503580
entity.tag.apacheconf#a52040
meta.preprocessor#6e5818
source.env#254888

Shiki preview

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

Loading...

Moonic by Yusoof Moh - VS Code Theme