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#1A1A1A
  • activityBar.border#30363D
  • activityBar.foreground#FFFFFF
  • activityBar.inactiveForeground#6272A4
  • activityBarBadge.background#FF9AA2
  • activityBarBadge.foreground#1a1a1a
  • badge.background#FF9AA2
  • badge.foreground#1a1a1a
  • breadcrumb.activeSelectionForeground#FF9AA2
  • breadcrumb.background#1A1A1A
  • breadcrumb.focusForeground#B8E6A0
  • breadcrumb.foreground#FFFFFF
  • breadcrumbPicker.background#1A1A1A
  • button.background#B8E6A0
  • button.foreground#000000
  • button.hoverBackground#a0d889
  • button.secondaryBackground#30363D
  • button.secondaryForeground#FFFFFF
  • button.secondaryHoverBackground#6272A4
  • charts.blue#6272A4
  • charts.foreground#FFFFFF
  • charts.green#B8E6A0
  • charts.lines#30363D
  • charts.orange#FF9AA2
  • charts.purple#BD93F9
  • charts.red#FF5555
  • charts.yellow#FFE4A3
  • debugExceptionWidget.background#1A1A1A
  • debugExceptionWidget.border#30363D
  • debugIcon.breakpointCurrentStackframeForeground#FFE4A3
  • debugIcon.breakpointDisabledForeground#6272A4
  • debugIcon.breakpointForeground#FF5555
  • debugIcon.breakpointStackframeForeground#FFFFFF
  • debugIcon.breakpointUnverifiedForeground#FF9AA2
  • debugIcon.continueForeground#FFFFFF
  • debugIcon.disconnectForeground#FFFFFF
  • debugIcon.pauseForeground#FFFFFF
  • debugIcon.restartForeground#B8E6A0
  • debugIcon.startForeground#B8E6A0
  • debugIcon.stepBackForeground#FFFFFF
  • debugIcon.stepIntoForeground#FFFFFF
  • debugIcon.stepOutForeground#FFFFFF
  • debugIcon.stepOverForeground#FFFFFF
  • debugIcon.stopForeground#FF5555
  • debugToolBar.background#1A1A1A
  • debugToolBar.border#1A1A1A
  • descriptionForeground#6272A4
  • diffEditor.insertedTextBackground#B8E6A019
  • diffEditor.removedTextBackground#FF555519
  • dropdown.background#1A1A1A
  • dropdown.border#30363D
  • dropdown.foreground#FFFFFF
  • dropdown.listBackground#30363D
  • editor.background#1A1A1A
  • editor.findMatchBackground#FFE4A326
  • editor.findMatchBorder#FFE4A3
  • editor.findMatchHighlightBackground#FFE4A326
  • editor.findMatchHighlightBorder#00000000
  • editor.findRangeHighlightBackground#37373D50
  • editor.findRangeHighlightBorder#00000000
  • editor.foreground#FFFFFF
  • editor.hoverHighlightBackground#1A1A1A0c
  • editor.inactiveSelectionBackground#8BE9FD20
  • editor.lineHighlightBackground#1A1A1A50
  • editor.lineHighlightBorder#30363D
  • editor.rangeHighlightBackground#BD93F950
  • editor.rangeHighlightBorder#30363D
  • editor.selectionBackground#8BE9FD40
  • editor.selectionHighlightBackground#8BE9FD26
  • editor.selectionHighlightBorder#00000000
  • editor.wordHighlightBackground#FFE4A330
  • editor.wordHighlightBorder#00000000
  • editor.wordHighlightStrongBackground#B8E6A030
  • editor.wordHighlightStrongBorder#00000000
  • editorBracketHighlight.foreground1#FF5555
  • editorBracketHighlight.foreground2#FF9AA2
  • editorBracketHighlight.foreground3#FFE4A3
  • editorBracketHighlight.foreground4#B8E6A0
  • editorBracketHighlight.foreground5#8BE9FD
  • editorBracketHighlight.foreground6#BD93F9
  • editorBracketMatch.background#30363D
  • editorBracketMatch.border#6272A4
  • editorCodeLens.foreground#6272A4
  • editorCursor.background#1A1A1A
  • editorCursor.foreground#FFFFFF
  • editorError.background#00000000
  • editorError.border#00000000
  • editorError.foreground#FF5555
  • editorGroup.border#30363D
  • editorGroup.dropBackground#30363Dbf
  • editorGroup.emptyBackground#1A1A1A
  • editorGroup.focusedEmptyBorder#30363D
  • editorGroupHeader.noTabsBackground#1A1A1A
  • editorGroupHeader.tabsBackground#1A1A1A
  • editorGroupHeader.tabsBorder#30363D
  • editorGutter.addedBackground#B8E6A0
  • editorGutter.background#1A1A1A
  • editorGutter.deletedBackground#FF5555
  • editorGutter.modifiedBackground#FF9AA2
  • editorHint.border#30363D
  • editorHint.foreground#BD93F9
  • editorHoverWidget.background#1A1A1A
  • editorHoverWidget.border#1A1A1A
  • editorHoverWidget.foreground#FFFFFF
  • editorIndentGuide.background#30363D
  • editorInfo.background#00000000
  • editorInfo.border#30363D
  • editorInfo.foreground#8BE9FD
  • editorLightBulb.foreground#FFE4A3
  • editorLightBulbAutoFix.foreground#B8E6A0
  • editorLineNumber.activeForeground#FFFFFF
  • editorLineNumber.foreground#8f9bd4
  • editorLink.activeForeground#8BE9FD
  • editorMarkerNavigation.background#30363D
  • editorMarkerNavigationError.background#FF5555
  • editorMarkerNavigationInfo.background#8BE9FD
  • editorMarkerNavigationWarning.background#FF9AA2
  • editorOverviewRuler.addedForeground#B8E6A0
  • editorOverviewRuler.border#30363D
  • editorOverviewRuler.currentContentForeground#30363D
  • editorOverviewRuler.deletedForeground#FF5555
  • editorOverviewRuler.errorForeground#FF5555
  • editorOverviewRuler.findMatchForeground#FFE4A326
  • editorOverviewRuler.incomingContentForeground#30363D
  • editorOverviewRuler.infoForeground#8BE9FD
  • editorOverviewRuler.modifiedForeground#FF9AA2
  • editorOverviewRuler.rangeHighlightForeground#FFE4A326
  • editorOverviewRuler.selectionHighlightForeground#FFE4A326
  • editorOverviewRuler.warningForeground#FF9AA2
  • editorOverviewRuler.wordHighlightForeground#FFE4A326
  • editorOverviewRuler.wordHighlightStrongForeground#FFE4A326
  • editorPane.background#30363D
  • editorRuler.foreground#6272A4
  • editorSuggestWidget.background#1A1A1A
  • editorSuggestWidget.border#30363D
  • editorSuggestWidget.foreground#FFFFFF
  • editorSuggestWidget.highlightForeground#FFFFFF
  • editorSuggestWidget.selectedBackground#1A1A1A
  • editorWarning.background#00000000
  • editorWarning.border#00000000
  • editorWarning.foreground#FF9AA2
  • editorWhitespace.foreground#6272A4
  • editorWidget.background#1A1A1A
  • editorWidget.border#30363D
  • editorWidget.foreground#FFFFFF
  • errorForeground#FF5555
  • extensionButton.background#B8E6A0
  • extensionButton.foreground#000000
  • extensionButton.hoverBackground#a0d889
  • extensionButton.prominentBackground#B8E6A0
  • extensionButton.prominentForeground#000000
  • extensionButton.prominentHoverBackground#a0d889
  • extensionButton.separator#000000
  • focusBorder#6272A4
  • foreground#FFFFFF
  • gitDecoration.addedResourceForeground#B8E6A0
  • gitDecoration.conflictingResourceForeground#FF9AA2
  • gitDecoration.deletedResourceForeground#FF5555
  • gitDecoration.ignoredResourceForeground#6272A4
  • gitDecoration.modifiedResourceForeground#FFE4A3
  • gitDecoration.stageDeletedResourceForeground#FF5555
  • gitDecoration.stageModifiedResourceForeground#FFE4A3
  • gitDecoration.untrackedResourceForeground#FF9AA2
  • input.background#1A1A1A
  • input.border#30363D
  • input.foreground#FFFFFF
  • input.placeholderForeground#6272A4
  • inputOption.activeBackground#61AFEF
  • inputOption.activeForeground#FFFFFF
  • inputValidation.errorBackground#FF5555
  • inputValidation.errorBorder#FF5555
  • inputValidation.errorForeground#FFFFFF
  • inputValidation.infoBackground#8BE9FD
  • inputValidation.infoBorder#8BE9FD
  • inputValidation.infoForeground#000000
  • inputValidation.warningBackground#FFE4A3
  • inputValidation.warningBorder#FFE4A3
  • inputValidation.warningForeground#000000
  • list.activeSelectionBackground#1A1A1A
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#30363Dbf
  • list.errorForeground#FF5555
  • list.focusBackground#1A1A1A
  • list.highlightForeground#FFFFFF
  • list.hoverBackground#1A1A1A
  • list.hoverForeground#FFFFFF
  • list.inactiveFocusBackground#30363D
  • list.inactiveSelectionBackground#1A1A1A
  • list.inactiveSelectionForeground#FFFFFF
  • list.invalidItemForeground#FF5555
  • list.warningForeground#FF9AA2
  • listFilterWidget.background#30363D
  • listFilterWidget.noMatchesOutline#FF5555
  • listFilterWidget.outline#30363D
  • menu.background#1A1A1A
  • menu.foreground#FFFFFF
  • menu.selectionBackground#1A1A1A
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#6272A4
  • menubar.selectionBackground#1A1A1A
  • menubar.selectionForeground#FFFFFF
  • merge.border#30363D
  • merge.commonContentBackground#FFFFFF19
  • merge.commonHeaderBackground#FFFFFF26
  • merge.currentContentBackground#FF555519
  • merge.currentHeaderBackground#FF555526
  • merge.incomingContentBackground#B8E6A019
  • merge.incomingHeaderBackground#B8E6A026
  • minimap.errorHighlight#FF5555
  • minimap.warningHighlight#FF9AA2
  • minimapGutter.addedBackground#B8E6A0
  • minimapGutter.deletedBackground#FF5555
  • minimapGutter.modifiedBackground#FFE4A3
  • notificationCenter.border#1A1A1A
  • notificationCenterHeader.background#1A1A1A
  • notificationCenterHeader.foreground#FFFFFF
  • notificationLink.foreground#FFE4A3
  • notifications.background#1A1A1A
  • notifications.border#1A1A1A
  • notifications.foreground#FFFFFF
  • notificationsErrorIcon.foreground#FF5555
  • notificationsInfoIcon.foreground#8BE9FD
  • notificationsWarningIcon.foreground#FF9AA2
  • notificationToast.border#30363D
  • panel.background#1A1A1A
  • panel.border#30363D
  • panelTitle.activeBorder#FF9AA2
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#8f9bd4
  • peekView.border#30363D
  • peekViewEditor.background#30363D
  • peekViewEditor.matchHighlightBackground#6272A4
  • peekViewEditorGutter.background#30363D
  • peekViewResult.background#30363D
  • peekViewResult.fileForeground#6272A4
  • peekViewResult.lineForeground#6272A4
  • peekViewResult.matchHighlightBackground#6272A4
  • peekViewResult.selectionBackground#30363D
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#30363D
  • peekViewTitleDescription.foreground#6272A4
  • peekViewTitleLabel.foreground#FFFFFF
  • pickerGroup.border#30363D
  • pickerGroup.foreground#6272A4
  • problemsErrorIcon.foreground#FF5555
  • problemsInfoIcon.foreground#8BE9FD
  • problemsWarningIcon.foreground#FF9AA2
  • progressBar.background#B8E6A0
  • quickInput.background#1A1A1A
  • sash.hoverBorder#6272A4
  • scrollbar.shadow#30363D
  • scrollbarSlider.activeBackground#FFFFFF12
  • scrollbarSlider.background#FFFFFF12
  • scrollbarSlider.hoverBackground#FFFFFF12
  • selection.background#8BE9FD40
  • settings.checkboxBackground#30363D
  • settings.checkboxBorder#30363D
  • settings.checkboxForeground#FFFFFF
  • settings.dropdownBackground#30363D
  • settings.dropdownBorder#30363D
  • settings.dropdownForeground#FFFFFF
  • settings.dropdownListBorder#6272A4
  • settings.headerForeground#FFE4A3
  • settings.modifiedItemIndicator#FFE4A3
  • settings.numberInputBackground#30363D
  • settings.numberInputBorder#30363D
  • settings.numberInputForeground#FFFFFF
  • settings.textInputBackground#30363D
  • settings.textInputBorder#30363D
  • settings.textInputForeground#FFFFFF
  • sideBar.background#1A1A1A
  • sideBar.border#30363D
  • sideBar.dropBackground#30363Dbf
  • sideBar.foreground#FFFFFF
  • sideBarSectionHeader.background#1A1A1A
  • sideBarSectionHeader.foreground#FFFFFF
  • sideBarTitle.foreground#B8E6A0
  • statusBar.background#1A1A1A
  • statusBar.border#30363D
  • statusBar.debuggingBackground#FF5555
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#B8E6A0
  • statusBar.noFolderForeground#1E1E1E
  • statusBarItem.activeBackground#1A1A1A
  • statusBarItem.errorBackground#30363D
  • statusBarItem.errorForeground#FF5555
  • statusBarItem.hoverBackground#1A1A1A
  • statusBarItem.prominentBackground#FF9AA2
  • statusBarItem.prominentHoverBackground#BD93F9
  • statusBarItem.remoteBackground#30363D
  • statusBarItem.remoteForeground#B8E6A0
  • symbolIcon.arrayForeground#FF5555
  • symbolIcon.booleanForeground#FF5555
  • symbolIcon.classForeground#8BE9FD
  • symbolIcon.colorForeground#BD93F9
  • symbolIcon.constantForeground#BD93F9
  • symbolIcon.constructorForeground#B8E6A0
  • symbolIcon.enumeratorForeground#FF9AA2
  • symbolIcon.enumeratorMemberForeground#FF9AA2
  • symbolIcon.eventForeground#FF9AA2
  • symbolIcon.fieldForeground#FF9AA2
  • symbolIcon.fileForeground#FFFFFF
  • symbolIcon.folderForeground#FFFFFF
  • symbolIcon.functionForeground#B8E6A0
  • symbolIcon.interfaceForeground#8BE9FD
  • symbolIcon.keyForeground#FF9AA2
  • symbolIcon.keywordForeground#FF5555
  • symbolIcon.methodForeground#B8E6A0
  • symbolIcon.moduleForeground#8BE9FD
  • symbolIcon.namespaceForeground#8BE9FD
  • symbolIcon.nullForeground#BD93F9
  • symbolIcon.numberForeground#BD93F9
  • symbolIcon.objectForeground#8BE9FD
  • symbolIcon.operatorForeground#FF5555
  • symbolIcon.packageForeground#BD93F9
  • symbolIcon.propertyForeground#FF9AA2
  • symbolIcon.referenceForeground#BD93F9
  • symbolIcon.snippetForeground#B8E6A0
  • symbolIcon.stringForeground#FFE4A3
  • symbolIcon.structForeground#FF5555
  • symbolIcon.textForeground#FFE4A3
  • symbolIcon.typeParameterForeground#FF9AA2
  • symbolIcon.unitForeground#BD93F9
  • symbolIcon.variableForeground#8BE9FD
  • tab.activeBackground#1A1A1A
  • tab.activeBorder#BD93F9
  • tab.activeForeground#FFFFFF
  • tab.activeModifiedBorder#6272A4
  • tab.border#1A1A1A
  • tab.hoverBackground#1A1A1A50
  • tab.hoverForeground#FFFFFF
  • tab.inactiveBackground#1A1A1A
  • tab.inactiveForeground#6272A4
  • tab.inactiveModifiedBorder#6272A4
  • tab.lastPinnedBorder#6272A4
  • tab.unfocusedActiveBorder#6272A4
  • tab.unfocusedActiveForeground#FFFFFF
  • tab.unfocusedActiveModifiedBorder#30363D
  • tab.unfocusedHoverBackground#30363D
  • tab.unfocusedHoverBorder#30363D
  • tab.unfocusedInactiveForeground#6272A4
  • tab.unfocusedInactiveModifiedBorder#30363D
  • terminal.ansiBlack#1A1A1A
  • terminal.ansiBlue#BD93F9
  • terminal.ansiBrightBlack#6272A4
  • terminal.ansiBrightBlue#D6ACFF
  • terminal.ansiBrightCyan#A4FFFF
  • terminal.ansiBrightGreen#B8E6A0
  • terminal.ansiBrightMagenta#FF9AA2
  • terminal.ansiBrightRed#FF6E6E
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFE4A3
  • terminal.ansiCyan#8BE9FD
  • terminal.ansiGreen#B8E6A0
  • terminal.ansiMagenta#FF9AA2
  • terminal.ansiRed#FF5555
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#FFE4A3
  • terminal.background#1A1A1A
  • terminal.foreground#FFFFFF
  • terminalCursor.background#1A1A1A
  • terminalCursor.foreground#FFFFFF
  • textBlockQuote.background#30363D
  • textBlockQuote.border#30363D
  • textCodeBlock.background#30363D
  • textLink.activeForeground#FFFFFF
  • textLink.foreground#FFE4A3
  • textPreformat.foreground#FFFFFF
  • textSeparator.foreground#6272A4
  • titleBar.activeBackground#1A1A1A
  • titleBar.activeForeground#FFFFFF
  • titleBar.border#30363D
  • titleBar.inactiveBackground#1A1A1A
  • titleBar.inactiveForeground#6272A4
  • walkThrough.embeddedEditorBackground#30363D
  • welcomePage.tileBackground#30363D
  • widget.shadow#1A1A1A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6272A4italic
variable, string constant.other.placeholder#FFFFFF
keyword, storage.type, storage.modifier#FF9AA2
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#FF9AA2
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#B8E6A0
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#B8E6A0
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#FFE4A3
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#8BE9FD
support.type.property-name#B8E6A0
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FFFFFF
variable.language#BD93F9italic
entity.name.method.js#B8E6A0italic
entity.other.attribute-name#FFE4A3
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#B8E6A0italic
entity.other.attribute-name.class#8BE9FD
source.sass keyword.control#FF9AA2
markup.inserted#FFE4A3
markup.deleted#FF5555
markup.changed#FFE4A3
string.regexp#FFE4A3
constant.character.escape#FF9AA2
*url*, *link*, *uri*#8BE9FDunderline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#BD93F9italic
source.js constant.other.object.key.js string.unquoted.label.js#FFE4A3italic
source.json meta.structure.dictionary.json support.type.property-name.json#B8E6A0
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#B8E6A0
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#efc263
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#e8eb8e
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#6ce6e4
text.html.markdown, punctuation.definition.list_item.markdown#B8E6A0
text.html.markdown markup.inline.raw.markdown#f17cb3
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#6ce6e4
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#FF9AA2
markup.italic#efc263italic
markup.bold, markup.bold string#f17cb3bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#6ce6e4bold italic
markup.underline#e8eb8eunderline
markup.strike#FF9AA2strikethrough
markup.quote punctuation.definition.blockquote.markdown#6ce6e4
string.other.link.title.markdown#f17cb3
string.other.link.description.title.markdown#efc263
constant.other.reference.link.markdown#e8eb8e
markup.raw.block#6ce6e4
markup.raw.block.fenced.markdown#FF9AA2
punctuation.definition.fenced.markdown#f17cb3
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#efc263
variable.language.markdown#e8eb8e
meta.separator#FF9AA2bold
markup.table#FF9AA2
storage.type, storage.modifier#FF9AA2
storage.type.function#BD93F9
invalid#FF5555italic
invalid.deprecated#FF5555italic
constant.other.symbol#FFE4A3
constant.other.elm#8BE9FD
constant.numeric#BD93F9italic
constant.language#BD93F9italic
constant.character.escape#BD93F9
entity.name.section#FFE4A3
entity.name.function, entity.name.function.templated#B8E6A0
entity.name.function.member.static#FFFFFF
entity.name.type.class.templated, entity.name.type.class.generic, entity.name.type.namespace#8BE9FD
entity.name.label#BD93F9
entity.name.function.preprocessor#8BE9FD
entity.name.class#8BE9FD
entity.name.constant#BD93F9italic
entity.name.namespace#FFFFFF
entity.other.inherited-class#8BE9FDitalic
entity.name.tag, entity.name.tag.js.jsx support.class.component.js.jsx, entity.name.tag support.class.component, source.vue support.class.component#FF9AA2
entity.name.function.operator#FF9AA2
entity.name.type, entity.name.type.class.reference, entity.name.type.class.value#8BE9FD
entity.other.attribute-name.class.css, entity.other.attribute-name.parent-selector-suffix.css, entity.other.attribute-name.parent-selector-suffix.css punctuation.definition.entity.css, entity.other.attribute-name.css, entity.other.animation-name.css#B8E6A0
entity.other.attribute-name.id.css#FFE4A3
entity.other.attribute-name.pseudo-class.css, entity.other.pseudo-class.css, entity.other.pseudo-element.css#8BE9FDitalic
entity.other.git-status.hex#BD93F9
entity.other.jinja2.delimiter#6272A4
entity.name.operator.custom-literal#FFFFFF
entity.name.operator.custom-literal.string#FFE4A3
entity.name.operator.custom-literal.number#BD93F9
entity.name.type#8BE9FDitalic
entity.name.lifetime.rust#FF9AA2
keyword.control#FF9AA2
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.default#FF9AA2italic
keyword.control.async, keyword.control.await, storage.type.async#FF9AA2italic
keyword.control.directive#FF9AA2
keyword.operator, keyword.operator.member, keyword.operator.new#FF9AA2
keyword.other.substitution#6272A4
keyword.other.template.begin, keyword.other.template.end#FF9AA2
keyword.operator.heading.restructuredtext, keyword.operator.table.row.restructuredtext keyword.operator.table.data.restructuredtext#6272A4
keyword.other.parenthesis.elm#6272A4
keyword.other.fn.rust, keyword.other.rust, keyword.other.unsafe.rust, keyword.other.where.rust#8BE9FD
keyword.control.rust, keyword.operator.misc.rust#FF9AA2
keyword.declaration.class.ruby, keyword.declaration.function.ruby, keyword.declaration.namespace.ruby#FF9AA2
markup.underline.link#B8E6A0italic
markup.quoteitalic
meta.brace.round, meta.brace.square, meta.brace.curly, meta.delimiter.comma.js, meta.function-call.without-arguments.js, meta.function-call.method.without-arguments.js#6272A4
meta.function-call.generic.python, support.function.builtin.python#B8E6A0
meta.function-call.python meta.function-call.arguments.python#FFFFFF
meta.instance.constructor#B8E6A0
meta.attribute-with-value.class string, meta.attribute.class.html string#B8E6A0
meta.attribute-with-value.id string, meta.attribute.id.html string#FFE4A3
source.json meta.mapping.key string#FFFFFFitalic
meta.object.member#FFFFFF
meta.property-list.css variable.other#B8E6A0
entity.name.constant.preprocessor, meta.preprocessor#BD93F9
meta.diff.git-diff.header#FFE4A3
meta.type_params.rust#FFFFFF
meta.decorator, meta.annotation, punctuation.decorator#BD93F9italic
punctuation#6272A4
punctuation.definition.tag, punctuation.definition.tag source, punctuation.definition.group.begin.ruby, punctuation.definition.group.end.ruby, punctuation.definition.group.begin.css, punctuation.definition.group.end.css, punctuation.definition.string.end.html source.css#6272A4
punctuation.definition.group#FFFFFF
punctuation.definition.comment#6272A4
punctuation.definition.variable, punctuation.definition.keyword.scss, punctuation.definition.entity.css#FFFFFF
punctuation.section.embedded, punctuation.section.embedded entity.name.tag, punctuation.section.embedded constant.other, punctuation.section.embedded source, punctuation.section.embedded.begin#FFE4A3
punctuation.template-string.element.begin, punctuation.template-string.element.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end, string.quoted.template punctuation.definition.string.begin, string.quoted.template punctuation.definition.string.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#FF9AA2
meta.paragraph.markdown meta.dummy.line-break, meta.paragraph.markdown meta.hard-line-break.markdown
region.redish#FF9AA2
region.orangish#FFE4A3
region.yellowish#FFE4A3
region.greenish#B8E6A0
region.bluish#8BE9FD
region.purplish#BD93F9
region.pinkish#FF9AA2
region.whitish#FFFFFF
source#FFFFFF
source.scss, source.sass#6272A4
source.sass variable.other, source.sass variable.sass, source.scss variable.other, source.scss variable.scss, source.scss variable.sass, source.css variable.other, source.css variable.scss, source.less variable.other, source.less variable.other.less, source.less variable.declaration.less#A8E6A0italic
source.git-show.commit.sha#BD93F9
source.git-show.author, source.git-show.date, source.git-diff.command, source.git-diff.command meta.diff.git-diff.header.from-file, source.git-diff.command meta.diff.git-diff.header.to-file#6272A4
source.git-show meta.diff.git-diff.header.extended.index.from-sha, source.git-show meta.diff.git-diff.header.extended.index.to-sha#BD93F9
source.git-show meta.diff.range.unified#FFE4A3
source.git-show meta.diff.header.from-file, source.git-show meta.diff.header.to-file#8BE9FD

Shiki preview

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

Loading...