Monokai Midnight

Name: Monokai Midnight
Author: Syahrizal

Publisher: SyahrizalThemes in package: 1

Clean and minimalist monokai-inspired dark theme for Visual Studio Code.

GitHub

VS Code preview

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

Monokai Midnight — Monokai Midnight

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#0e0e11
activityBar.activeBorder#656e81
activityBar.background#0e0e11
activityBar.border#00000000
activityBar.dropBorder#656e81
activityBar.foreground#e2e4e9
activityBar.inactiveForeground#707a8f
activityBarBadge.background#2c77e8
activityBarBadge.foreground#e2e4e9
activityBarTop.foreground#e2e4e9
activityBarTop.inactiveForeground#707a8f
badge.background#2c77e8
badge.foreground#c6cad2
banner.background#0e0e11
banner.foreground#e2e4e9
breadcrumb.activeSelectionForeground#c6cad2
breadcrumb.background#0e0e11
breadcrumb.focusForeground#c6cad2
breadcrumb.foreground#7e889a
breadcrumbPicker.background#121216
button.background#196be6
button.border#00000000
button.foreground#e2e4e9
button.hoverBackground#2c77e8
button.secondaryBackground#25252d
button.secondaryForeground#e2e4e9
button.secondaryHoverBackground#292932
button.separator#e2e4e9
charts.blue#5edfed
charts.foreground#c6cad2
charts.green#a6e06c
charts.lines#151519
charts.orange#fc9867
charts.purple#ad89f5
charts.red#fa478f
charts.yellow#e8da7d
chat.avatarBackground#272730
chat.avatarForeground#e2e4e9
chat.editedFileForeground#a9afbc
chat.requestBackground#151519
chat.requestBorder#00000000
chat.slashCommandBackground#121216
chat.slashCommandForeground#e2e4e9
checkbox.background#202027
checkbox.border#202027
checkbox.foreground#e2e4e9
checkbox.selectBackground#202027
checkbox.selectBorder#202027
debugConsole.errorForeground#fb517b
debugConsole.infoForeground#06bbe0
debugConsole.sourceForeground#707a8f
debugConsole.warningForeground#faa938
debugExceptionWidget.background#101014
debugExceptionWidget.border#c65353
debugIcon.breakpointDisabledForeground#434956
debugIcon.breakpointForeground#c65353
debugIcon.breakpointUnverifiedForeground#c65353
debugTokenExpression.error#fb517b
debugToolBar.background#101014
debugView.stateLabelBackground#151519
debugView.stateLabelForeground#707a8f
descriptionForeground#a9afbc
diffEditor.border#1c1c22
diffEditor.diagonalFill#121216
disabledForeground#707a8f
dropdown.background#202027
dropdown.border#202027
dropdown.foreground#e2e4e9
dropdown.listBackground#202027
editor.background#0e0e11
editor.findMatchBackground#7e889a55
editor.findMatchBorder#e0b16c
editor.findMatchHighlightBackground#7e889a45
editor.findRangeHighlightBackground#7e889a45
editor.foreground#e2e4e9
editor.hoverHighlightBackground#7e889a55
editor.lineHighlightBackground#22222a
editor.lineHighlightBorder#22222a
editor.placeholder.foreground#8d95a5
editor.rangeHighlightBackground#7e889a55
editor.rangeHighlightBorder#00000000
editor.selectionBackground#7e889a45
editor.selectionForeground#e3e8e8
editor.selectionHighlightBackground#7e889a45
editor.selectionHighlightBorder#00000000
editor.wordHighlightBackground#7e889a45
editor.wordHighlightBorder#00000000
editor.wordHighlightStrongBackground#7e889a60
editor.wordHighlightStrongBorder#00000000
editor.wordHighlightTextBackground#7e889a55
editor.wordHighlightTextBorder#00000000
editorBracketHighlight.foreground1#e6d870
editorBracketHighlight.foreground2#ab83fc
editorBracketHighlight.foreground3#fa9c29
editorBracketHighlight.foreground4#fa2976
editorBracketHighlight.foreground5#68d8ee
editorBracketMatch.background#00000000
editorBracketMatch.border#00000000
editorBracketPairGuide.background1#e6d870
editorBracketPairGuide.background2#ab83fc
editorBracketPairGuide.background3#fa9c29
editorBracketPairGuide.background4#fa2976
editorBracketPairGuide.background5#68d8ee
editorCodeLens.foreground#707a8f
editorCursor.foreground#c6cad2
editorError.background#fb517b20
editorError.border#00000000
editorError.foreground#fb517b
editorGhostText.foreground#707a8f
editorGroup.border#202027
editorGroup.dropBackground#7e889a40
editorGroup.emptyBackground#0e0e11
editorGroupHeader.border#00000000
editorGroupHeader.noTabsBackground#09090b
editorGroupHeader.tabsBackground#09090b
editorGroupHeader.tabsBorder#00000000
editorGutter.addedBackground#46aab9
editorGutter.background#0e0e11
editorGutter.deletedBackground#b94676
editorGutter.foldingControlForeground#a9afbc
editorGutter.modifiedBackground#d1a261
editorHint.border#00000000
editorHint.foreground#33cc73
editorHoverWidget.background#151519
editorHoverWidget.border#1e1e24
editorInfo.background#06bbe020
editorInfo.border#00000000
editorInfo.foreground#06bbe0
editorLightBulb.foreground#e0b16c
editorLightBulbAutoFix.foreground#e0b16c
editorLineNumber.activeForeground#c6cad2
editorLineNumber.foreground#4f5664
editorLink.activeForeground#68a0f3
editorMarkerNavigation.background#151519
editorOverviewRuler.addedForeground#46aab9
editorOverviewRuler.deletedForeground#b94676
editorOverviewRuler.errorForeground#fb517b
editorOverviewRuler.infoForeground#06bbe0
editorOverviewRuler.modifiedForeground#d1a261
editorOverviewRuler.warningForeground#faa938
editorPane.background#101014
editorSuggestWidget.background#121216
editorSuggestWidget.border#1e1e24
editorSuggestWidget.focusHighlightForeground#5a97f2
editorSuggestWidget.foreground#e2e4e9
editorSuggestWidget.highlightForeground#5a97f2
editorSuggestWidget.selectedBackground#272730
editorSuggestWidget.selectedForeground#e2e4e9
editorSuggestWidget.selectedIconForeground#e2e4e9
editorWarning.background#faa93820
editorWarning.border#00000000
editorWarning.foreground#faa938
editorWhitespace.foreground#434956
editorWidget.background#121216
editorWidget.border#1e1e24
editorWidget.foreground#e2e4e9
editorWidget.resizeBorder#1e1e24
errorForeground#fb517b
extensionBadge.remoteBackground#272730
extensionBadge.remoteForeground#e2e4e9
extensionButton.background#202027
extensionButton.foreground#e2e4e9
extensionButton.hoverBackground#272730
extensionButton.prominentBackground#272730
extensionButton.prominentForeground#e2e4e9
extensionButton.prominentHoverBackground#272730
extensionButton.separator#707a8f
extensionIcon.verifiedForeground#a9afbc
focusBorder#00000000
foreground#e2e4e9
gitDecoration.addedResourceForeground#46aab9
gitDecoration.conflictingResourceForeground#4d77b3
gitDecoration.deletedResourceForeground#b94676
gitDecoration.ignoredResourceForeground#7e889a
gitDecoration.modifiedResourceForeground#d1a261
gitDecoration.renamedResourceForeground#9575d7
gitDecoration.stageDeletedResourceForeground#b94676
gitDecoration.stageModifiedResourceForeground#d1a261
gitDecoration.untrackedResourceForeground#46aab9
icon.foreground#a9afbc
inlineChat.background#121216
inlineChat.border#202027
inlineChat.foreground#e2e4e9
inlineChatInput.background#202027
inlineChatInput.border#202027
inlineChatInput.focusBorder#202027
inlineChatInput.placeholderForeground#8d95a5
input.background#202027
input.border#202027
input.foreground#e2e4e9
input.placeholderForeground#8d95a5
inputOption.activeBackground#25252d
inputOption.activeBorder#202027
inputOption.activeForeground#e2e4e9
inputOption.hoverBackground#25252d
inputValidation.errorBackground#99335e
inputValidation.errorBorder#99335e
inputValidation.errorForeground#e2e4e9
inputValidation.infoBackground#335599
inputValidation.infoBorder#335599
inputValidation.infoForeground#e2e4e9
inputValidation.warningBackground#bfb040
inputValidation.warningBorder#bfb040
inputValidation.warningForeground#101014
list.activeSelectionBackground#25252d
list.activeSelectionForeground#e2e4e9
list.deemphasizedForeground#8d95a5
list.dropBackground#7e889a35
list.errorForeground#fb517b
list.focusBackground#202027
list.focusForeground#e2e4e9
list.highlightForeground#e2e4e9
list.hoverBackground#202027
list.hoverForeground#e2e4e9
list.inactiveSelectionBackground#202027
list.inactiveSelectionForeground#e2e4e9
list.invalidItemForeground#fb517b
list.warningForeground#faa938
menu.background#121216
menu.border#00000000
menu.foreground#e2e4e9
menu.selectionBackground#22222a
menu.selectionBorder#00000000
menu.selectionForeground#e2e4e9
menu.separatorBackground#202027
menubar.selectionBackground#22222a
menubar.selectionBorder#00000000
menubar.selectionForeground#e2e4e9
minimap.background#09090b
minimap.errorHighlight#fb517b
minimap.findMatchHighlight#4f566450
minimap.infoHighlight#06bbe0
minimap.selectionHighlight#4f566450
minimap.warningHighlight#faa938
minimapGutter.addedBackground#46aab9
minimapGutter.deletedBackground#b94676
minimapGutter.modifiedBackground#d1a261
minimapSlider.activeBackground#4f566460
minimapSlider.background#4f566460
minimapSlider.hoverBackground#4f566460
multiDiffEditor.background#121216
multiDiffEditor.border#1c1c22
multiDiffEditor.headerBackground#121216
notebook.cellBorderColor#202027
notebook.cellEditorBackground#151519
notebook.editorBackground#101014
notificationCenter.border#1c1c22
notificationCenterHeader.background#121216
notificationCenterHeader.foreground#e2e4e9
notificationLink.foreground#68a0f3
notifications.background#121216
notifications.border#1c1c22
notifications.foreground#e2e4e9
notificationsErrorIcon.foreground#fb517b
notificationsInfoIcon.foreground#06bbe0
notificationsWarningIcon.foreground#faa938
notificationToast.border#1c1c22
panel.background#101014
panel.border#202027
panelInput.border#202027
panelSection.border#202027
panelSectionHeader.background#101014
panelSectionHeader.border#202027
panelSectionHeader.foreground#e2e4e9
panelTitle.activeBorder#e2e4e9
panelTitle.activeForeground#e2e4e9
panelTitle.inactiveForeground#7e889a
peekView.border#1c1c22
peekViewEditor.background#121216
peekViewEditorGutter.background#121216
peekViewResult.background#121216
peekViewResult.selectionBackground#121216
peekViewResult.selectionForeground#c6cad2
peekViewTitle.background#151519
peekViewTitleDescription.foreground#a9afbc
peekViewTitleLabel.foreground#c6cad2
pickerGroup.border#1c1c22
pickerGroup.foreground#c6cad2
progressBar.background#2c77e8
sash.hoverBorder#1c1c22
scmGraph.foreground1#fa9c29
scmGraph.foreground2#e6d870
scmGraph.foreground3#fa2976
scmGraph.foreground4#a9e236
scmGraph.foreground5#ab83fc
scmGraph.historyItemBaseRefColor#8661d1
scmGraph.historyItemHoverAdditionsForeground#46aab9
scmGraph.historyItemHoverDefaultLabelBackground#434956
scmGraph.historyItemHoverDefaultLabelForeground#e2e4e9
scmGraph.historyItemHoverDeletionsForeground#b94676
scmGraph.historyItemHoverLabelForeground#e2e4e9
scmGraph.historyItemRefColor#5370c6
scmGraph.historyItemRemoteRefColor#46aab9
scrollbar.shadow#00000033
scrollbarSlider.activeBackground#4f566460
scrollbarSlider.background#4f566460
scrollbarSlider.hoverBackground#4f566460
settings.checkboxBackground#25252d
settings.checkboxBorder#202027
settings.checkboxForeground#e2e4e9
settings.dropdownBackground#25252d
settings.dropdownBorder#202027
settings.dropdownForeground#e2e4e9
settings.dropdownListBorder#202027
settings.focusedRowBorder#202027
settings.headerBorder#202027
settings.headerForeground#e2e4e9
settings.modifiedItemIndicator#2c77e8
settings.numberInputBackground#25252d
settings.numberInputBorder#202027
settings.numberInputForeground#e2e4e9
settings.sashBorder#202027
settings.textInputBackground#25252d
settings.textInputBorder#202027
settings.textInputForeground#e2e4e9
sideBar.background#09090b
sideBar.border#00000000
sideBar.dropBackground#7e889a35
sideBar.foreground#e2e4e9
sideBarSectionHeader.background#0e0e11
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#c6cad2
sideBarTitle.foreground#c6cad2
statusBar.background#09090b
statusBar.border#00000000
statusBar.debuggingBackground#09090b
statusBar.debuggingBorder#00000000
statusBar.debuggingForeground#c6cad2
statusBar.focusBorder#00000000
statusBar.foreground#c6cad2
statusBar.noFolderBackground#09090b
statusBar.noFolderBorder#00000000
statusBar.noFolderForeground#c6cad2
statusBarItem.activeBackground#202027
statusBarItem.errorBackground#e64c66
statusBarItem.focusBorder#00000000
statusBarItem.hoverBackground#202027
statusBarItem.hoverForeground#c6cad2
statusBarItem.prominentBackground#202027
statusBarItem.remoteBackground#09090b
statusBarItem.remoteForeground#e2e4e9
statusBarItem.warningBackground#d6a35c
tab.activeBackground#0e0e11
tab.activeBorder#2c77e8
tab.activeBorderTop#00000000
tab.activeForeground#e2e4e9
tab.activeModifiedBorder#202027
tab.border#00000000
tab.dragAndDropBorder#2c77e8
tab.hoverBackground#121216
tab.hoverForeground#e2e4e9
tab.inactiveBackground#0e0e11
tab.inactiveForeground#7e889a
tab.inactiveModifiedBorder#202027
tab.lastPinnedBorder#202027
tab.unfocusedActiveBorder#202027
tab.unfocusedActiveForeground#7e889a
tab.unfocusedInactiveForeground#7e889a
terminal.ansiBlack#282c33
terminal.ansiBlue#5e8eed
terminal.ansiBrightBlack#282c33
terminal.ansiBrightBlue#5e8eed
terminal.ansiBrightCyan#59b7c0
terminal.ansiBrightGreen#7bc059
terminal.ansiBrightMagenta#e96379
terminal.ansiBrightRed#e96379
terminal.ansiBrightWhite#e3e5e8
terminal.ansiBrightYellow#e0b16c
terminal.ansiCyan#59b7c0
terminal.ansiGreen#7bc059
terminal.ansiMagenta#e96379
terminal.ansiRed#e96379
terminal.ansiWhite#e3e5e8
terminal.ansiYellow#e0b16c
terminal.background#101014
terminal.foreground#e2e4e9
terminalCursor.background#101014
terminalCursor.foreground#e2e4e9
textBlockQuote.background#0e0e11
textCodeBlock.background#0e0e11
textLink.activeForeground#68a0f3
textLink.foreground#68a0f3
textPreformat.foreground#8d95a5
titleBar.activeBackground#0e0e11
titleBar.activeForeground#e2e4e9
titleBar.border#1c1c22
titleBar.inactiveBackground#0e0e11
titleBar.inactiveForeground#7e889a
walkThrough.embeddedEditorBackground#0e0e11
welcomePage.background#0e0e11
welcomePage.tileBackground#0e0e11
welcomePage.tileBorder#1c1c22
widget.border#1c1c22
widget.shadow#ffffff00
window.activeBorder#1c1c22
window.inactiveBorder#1c1c22

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
source, punctuation, variable, variable.language, variable.assignment, variable.interpolation, variable.import.parameter, variable.other.class, variable.other.object, variable.other.object.property, entity.name.type.instance, invalid, invalid.illegal, invalid.broken, invalid.deprecated, invalid.unimplemented, markup.changed.diff, support.constant.math, variable.other.constant, support.module.node, support.type.object.module, entity.name.type.module, variable.other, variable.other.property, variable.other.readwrite, variable.parameter.function, meta.tag, meta.parameters, meta.brace.square, meta.template.expression, meta.object-literal.key, support.variable.property, support.variable.object.process, support.variable.object.node, entity.name.module, entity.name.namespace, entity.name.type.namespace, entity.name.class, entity.name.class.identifier.namespace.type, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, entity.other.inherited-class, support.type.builtin, support.type.primitive, support.variable.dom, support.variable.property.dom, support.variable.property.process, support.constant.color, punctuation.separator.comma, punctuation.definition.dictionary, punctuation.separator.dictionary.pair, constant.language.import-export-all, text.variable, text.html.basic, text.jade, variable.function, text.html.derivative, function.parameter, function.brace, token.package, block.scope.end, block.scope.begin, markup.heading.setext, support.type.property-name, support.constant.property-value, punctuation.separator.key-value, punctuation.separator.delimiter, punctuation.separator.list.comma.css, punctuation.separator.list.comma.less, punctuation.separator.list.comma.scss, punctuation.separator.list.comma.sass, variable.argument.css, variable.argument.less, variable.argument.scss, variable.argument.sass, support.type.property-name.media.css, support.type.property-name.media.less, support.type.property-name.media.scss, support.type.property-name.media.sass, support.variable.semantic.hlsl, invalid.illegal.bad-ampersand.html, punctuation.definition.block.sequence.item.yaml, variable.graphql, support.type.primitive.ts, support.type.primitive.tsx, meta.structure.array.json, meta.structure.dictionary.json, meta.structure.dictionary.value.json, punctuation.definition.bracket.curly.begin.jsdoc, punctuation.definition.bracket.curly.end.jsdoc, entity.name.lifetime.rust, variable.language.rust, storage.modifier.lifetime.rust, keyword.operator.misc.rust, function.parameter.ruby, entity.name.package.go, keyword.operator.assignment.go, support.variable.magic.python, variable.parameter.function.language.python, variable.parameter.function.python, variable.parameter.function.language.special.self.python, punctuation.separator.period.python, punctuation.separator.element.python, punctuation.parenthesis.begin.python, punctuation.parenthesis.end.python, punctuation.definition.arguments.begin.python, punctuation.definition.arguments.end.python, punctuation.separator.arguments.python, punctuation.definition.list.begin.python, punctuation.definition.list.end.python, variable.other.php, variable.other.class.php, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, support.other.namespace.use.php, support.other.namespace.use-as.php, support.other.namespace.php, entity.other.alias.php, meta.interface.php, storage.type.php, meta.other.type.phpdoc.php, keyword.other.type.php, keyword.other.array.phpdoc.php, punctuation.section.array.begin.php, punctuation.section.array.end.php, punctuation.definition.parameters.begin.bracket.round.php, punctuation.definition.parameters.end.bracket.round.php, punctuation.separator.delimiter.php, punctuation.section.scope.begin.php, punctuation.section.scope.end.php, punctuation.terminator.expression.php, punctuation.definition.arguments.begin.bracket.round.php, punctuation.definition.arguments.end.bracket.round.php, punctuation.definition.storage-type.begin.bracket.round.php, punctuation.definition.storage-type.end.bracket.round.php, punctuation.definition.array.begin.bracket.round.php, punctuation.definition.array.end.bracket.round.php, punctuation.definition.begin.bracket.round.php, punctuation.definition.end.bracket.round.php, punctuation.definition.begin.bracket.curly.php, punctuation.definition.end.bracket.curly.php, punctuation.definition.section.switch-block.start.bracket.curly.php, punctuation.definition.section.switch-block.begin.bracket.curly.php, punctuation.definition.section.switch-block.end.bracket.curly.php, variable.css, variable.less, variable.scss, variable.sass, meta.at-rule.header.css, meta.at-rule.header.less, meta.at-rule.header.scss, meta.at-rule.header.sass, punctuation.definition.variable.css, punctuation.definition.variable.less, punctuation.definition.variable.scss, punctuation.definition.variable.sass, punctuation.section.property-list.begin.bracket.curly.css, punctuation.section.property-list.begin.bracket.curly.less, punctuation.section.property-list.begin.bracket.curly.scss, punctuation.section.property-list.begin.bracket.curly.sass, punctuation.section.property-list.end.bracket.curly.css, punctuation.section.property-list.end.bracket.curly.less, punctuation.section.property-list.end.bracket.curly.scss, punctuation.section.property-list.end.bracket.curly.sass, punctuation.section.function.begin.bracket.round.css, punctuation.section.function.begin.bracket.round.less, punctuation.section.function.begin.bracket.round.scss, punctuation.section.function.begin.bracket.round.sass, punctuation.section.function.end.bracket.round.css, punctuation.section.function.end.bracket.round.less, punctuation.section.function.end.bracket.round.scss, punctuation.section.function.end.bracket.round.sass, punctuation.section.media.begin.bracket.curly.css, punctuation.section.media.begin.bracket.curly.less, punctuation.section.media.begin.bracket.curly.scss, punctuation.section.media.begin.bracket.curly.sass, punctuation.section.media.end.bracket.curly.css, punctuation.section.media.end.bracket.curly.less, punctuation.section.media.end.bracket.curly.scss, punctuation.section.media.end.bracket.curly.sass, text.xml, storage.type.cs, function.parameter.cs, entity.name.variable.local.cs, text.html.markdown, meta.paragraph.markdown, meta.image.inline.markdown, punctuation.definition.metadata.markdown, string.other.link.description.title.markdown	#e4e5e7	—
text.bracketed, markup.heading, markup.deleted.diff, meta.property.object, support.type.object.console, constant.character.entity, constant.other.placeholder, punctuation.string, punctuation.section.embedded, punctuation.definition.delayed.unison, punctuation.definition.list.begin.unison, punctuation.definition.list.end.unison, punctuation.definition.ability.begin.unison, punctuation.definition.ability.end.unison, punctuation.operator.assignment.as.unison, punctuation.separator.pipe.unison, punctuation.separator.delimiter.unison, punctuation.definition.hash.unison, variable.language.this, keyword.other.this, variable.language.this punctuation.definition.variable, string.quoted.json, constant.other.character-class.regexp, markup.heading.markdown, entity.name.section.markdown, punctuation.definition.heading.markdown, punctuation.definition.list.begin.markdown, punctuation.definition.list.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, beginning.punctuation.definition.list.markdown, constant.language, variable.language.super, entity.name.tag, entity.name.tag.structure.any.html, entity.name.tag.inline.any.html, entity.name.tag.block.any.html, entity.name.tag.style.html, entity.name.tag.other.html, entity.name.tag.yaml, entity.name.tag.xml, entity.name.tag.localname.xml, constant.other.table-name.sql, constant.other.database-name.sql, entity.name.tag.jade, support.variable.property, support.class.component.html, constant.name.attribute.tag.jade, variable.language.special.self.python	#fa9c29	—
meta.diff.header.from-file, meta.diff.header.to-file, punctuation.definition.from-file.diff, punctuation.definition.to-file.diff, keyword.operator.expression.import, entity.name.function, support.function.console, meta.function-call, support.function.any-method, keyword.other.special-method, meta.require, entity.name.type, entity.name.method, markup.heading, punctuation.definition.heading, entity.name.section, entity.other.attribute-name, meta.function-call.php, meta.function-call.object.php, meta.function-call.static.php, entity.name.goto-label.php, support.other.php, meta.function.decorator.python, meta.function-call.generic.python, token.info-token, support.type.type.flowtype, string.other.link.title.markdown, string.other.link.description.markdown, markup.italic.markdown, punctuation.definition.italic.markdown, support.class, entity.name.type.class, entity.other.inherited-class, support.constant.json, entity.name.type.interface, entity.name.type.module, support.type.graphql, support.function.std.rust, meta.selector.css, meta.selector.less, meta.selector.scss, meta.selector.sass, entity.other.attribute-name.id.css punctuation, entity.other.attribute-name.id.less punctuation, entity.other.attribute-name.id.scss punctuation, entity.other.attribute-name.id.sass punctuation, entity.other.attribute-name.class.css punctuation, entity.other.attribute-name.class.less punctuation, entity.other.attribute-name.class.scss punctuation, entity.other.attribute-name.class.sass punctuation, entity.other.attribute-name.parent-selector-suffix.css punctuation, entity.other.attribute-name.parent-selector-suffix.less punctuation, entity.other.attribute-name.parent-selector-suffix.scss punctuation, entity.other.attribute-name.parent-selector-suffix.sass punctuation, markup.inline.raw.markdown, markup.inline.raw.string.markdown, markup.bold.markdown, punctuation.definition.bold.markdown	#a9e236	—
storage, token.storage, token.error-token, support.function, support.type.object.dom, constant.other.symbol, entity.name.tag, meta.tag.sgml, rgb-value, keyword.operator, keyword.control, keyword.other.unit, keyword.other.important, punctuation.definition.keyword, constant.character.escape, keyword.operator.logical, keyword.operator.bitwise, keyword.operator.channel, keyword.operator.assignment, keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.decrement, keyword.operator.increment, keyword.operator.relational, keyword.operator.assignment.compound, keyword.control.conditional, string.regexp, source.css, source.css.scss, source.css.sass, source.css.less, keyword.operator.css, keyword.operator.less, keyword.operator.scss, keyword.operator.sass, support.type.prelude.elm, storage.type, keyword.other.default, support.constant.color, support.constant.font-name, support.constant.property-value, punctuation.definition.directive, meta.tag.sgml.doctype.html, entity.name.tag.xml, entity.name.tag.localname.xml, storage.modifier, storage.modifier.async, storage.modifier.cs, keyword.other.class.cs, storage.type.php, keyword.other.new.php, keyword.operator.logical.php, keyword.operator.bitwise.php, keyword.operator.arithmetic.php, keyword.operator.comparison.php, invalid.illegal.non-null-typehinted.php, support.type.python, support.token.decorator.python, meta.function.decorator.identifier.python, punctuation.definition.string.begin.ruby, punctuation.definition.string.end.ruby, keyword.type.cs, keyword.package.go, keyword.import.go, keyword.function.go, keyword.var.go, keyword.const.go, storage.modifier.java, storage.modifier.perl, keyword.other.dml.sql, keyword.other.alias.sql, keyword.other.definition.ini, support.type.property-name.json, punctuation.definition.block.tag.jsdoc, punctuation.definition.storage.type.objc, keyword.type.graphql, markup.underline.link.markdown, markup.underline.link.image.markdown, markup.italic.markdown, punctuation.definition.italic.markdown	#fa2976	—
keyword, support.class, support.class.component, token.debug-token, token.package.keyword, meta.selector, meta.object-literal.key, todo.emphasis, keyword.operator.delete, keyword.operator.assignment.compound, keyword.operator.module, entity.name.type.class, entity.name.type.interface, keyword.operator.expression.delete, keyword.operator.expression.in, keyword.operator.expression.of, keyword.operator.expression.instanceof, keyword.operator.expression.typeof, keyword.operator.expression.void, punctuation.quasi.element, punctuation.section.embedded, punctuation.section.embedded.begin, punctuation.section.embedded.end, support.type.texture.hlsl, support.type.sampler.hlsl, support.type.object.hlsl, support.type.object.rw.hlsl, support.type.fx.hlsl, keyword.operator.sigil.rust, keyword.operator.logical.python, support.type.property-name.json, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json, keyword.operator.arithmetic.go, keyword.operator.address.go, meta.property-list.css, meta.property-list.less, meta.property-list.scss, meta.property-list.sass, meta.property-name.css, meta.property-name.less, meta.property-name.scss, meta.property-name.sass, meta.property-value.css, meta.property-value.less, meta.property-value.scss, meta.property-value.sass, support.constant.media.css, support.constant.media.less, support.constant.media.scss, support.constant.media.sass, support.type.vendored.property-name.css, support.type.vendored.property-name.less, support.type.vendored.property-name.scss, support.type.vendored.property-name.sass, support.type.property-name.css, support.type.property-name.less, support.type.property-name.scss, support.type.property-name.sass, support.constant.parity.css, support.constant.parity.less, support.constant.parity.scss, support.constant.parity.sass, markup.underline.link.markdown, markup.underline.link.image.markdown, variable.other.property.php, keyword.operator.type.php, keyword.operator.regexp.php, keyword.operator.heredoc.php, keyword.operator.nowdoc.php, keyword.operator.error-control.php, text.html.laravel-blade source.php.embedded.line.html, text.html.laravel-blade source.php.embedded.line.html, entity.name.tag.laravel-blade, support.constant.laravel-blade, entity.name.tag.yaml	#68d8ee	—
constant, constant.numeric, constant.other.color, control.elements, token.warn-token, variable.parameter.function, support.constant.font-name, support.constant.property.math, punctuation.definition.constant, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, keyword.operator.quantifier.regexp, support.constant.elm, support.constant.core.rust, punctuation.definition.constant.css, punctuation.definition.constant.less, punctuation.definition.constant.scss, punctuation.definition.constant.sass, support.constant.property-value.css, support.constant.property-value.less, support.constant.property-value.scss, support.constant.property-value.sass, support.constant.color.w3c-standard-color-name.css, support.constant.color.w3c-standard-color-name.less, support.constant.color.w3c-standard-color-name.scss, support.constant.color.w3c-standard-color-name.sass, support.constant.color.w3c-extended-color-name.css, support.constant.color.w3c-extended-color-name.less, support.constant.color.w3c-extended-color-name.scss, support.constant.color.w3c-extended-color-name.sass, constant.character.format.placeholder.other.python, support.constant.ext.php, support.constant.std.php, support.constant.core.php, support.constant.parser-token.php, support.function.magic.php, support.function.constructor.php, support.function.construct.output.php, markup.bold.markdown, punctuation.definition.bold.markdown	#ab83fc	—
string, string.quoted, string constant.character, markup.inserted.diff, keyword.other.template.begin, keyword.other.template.end, keyword.other.substitution.begin, keyword.other.substitution.end, punctuation.definition.string.begin, punctuation.definition.string.end, markup.inline.raw.markdown, markup.inline.raw.string.markdown, meta.object-literal.key, support.type.property-name, source.coffee.embedded.source, string.template, string.unquoted.plain.out.yaml, string.interpolated.jade, support.type.builtin.graphql, entity.name.section.markdown, punctuation.definition.markdown, punctuation.definition.heading.markdown, markup.fenced_code.block.markdown	#e6d870	—
comment, punctuation.definition.comment, markup.link, markup.quote.markdown, comment.block.documentation, comment.block.documentation variable, comment.block.documentation storage, comment.block.documentation keyword, comment.block.documentation support, comment.block.documentation markup, comment.block.documentation punctuation	#676f7e	—
comment, markup.link, punctuation.definition.comment, keyword.control.flow, keyword.control.return, markup.italic.markdown, markup.quote.markdown, punctuation.definition.italic.markdown, support.type.primitive.ts, string.quoted.docstring.multi	—	italic
markup.bold, markup.bold punctuation, markup.bold markup.italic, markup.bold markup.italic punctuation, markup.bold.markdown, markup.heading.markdown, punctuation.definition.bold.markdown, heading.1.markdown entity.name, heading.1.markdown punctuation.definition.heading.markdown, heading.2.markdown entity.name, heading.2.markdown punctuation.definition.heading.markdown, heading.3.markdown entity.name, heading.3.markdown punctuation.definition.heading.markdown, heading.4.markdown entity.name, heading.4.markdown punctuation.definition.heading.markdown, heading.5.markdown entity.name, heading.5.markdown punctuation.definition.heading.markdown, heading.6.markdown entity.name, heading.6.markdown punctuation.definition.heading.markdown	—	bold

Shiki preview

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

export interface User {
  id: string;
  name: string;
  role: "admin" | "member";
  tags: string[];
}

/**
 * Fetch user data by ID
 * @param id  
 * @returns User object or null if ID is invalid
 */
export async function fetchUser(id: string): Promise<User | null> {
  if (!id) {
    return null;
  }

  const response = await fetch(`/api/users/${id}`, {
    method: "GET",
    headers: { Accept: "application/json" },
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return (await response.json()) as User;
}

function greet(user: User): string {
  // Simple greeting function that uses the user's name
  return `Hello, ${user.name}!`;
}