Eva Darker

Name: Eva Darker
Author: aleknev

Publisher: aleknevThemes in package: 3

A few darker variations of Eva theme.

Open in VS Code GitHub

Color themes

VS Code preview

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

Eva Darker — Eva Darker (Least)

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project

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#26262e
activityBar.activeBorder#26262e
activityBar.activeFocusBorder#4480F4
activityBar.background#26262e
activityBar.border#26262e00
activityBar.dropBorder#4480F4
activityBar.foreground#96A4CD
activityBar.inactiveForeground#5C617D
activityBarBadge.background#545467
activityBarBadge.foreground#fff
badge.background#676f97E5
badge.foreground#CED5E1
banner.background#545467
banner.foreground#fff
banner.iconForeground#fff
breadcrumb.activeSelectionForeground#d7dae0
breadcrumb.background#26262e
breadcrumb.focusForeground#d7dae0
breadcrumb.foreground#8E99B1
breadcrumbPicker.background#252830
button.background#676f9799
button.border#676f9700
button.foreground#DCDFE5
button.hoverBackground#545467
button.secondaryBackground#676f9799
button.secondaryForeground#DCDFE5
button.secondaryHoverBackground#545467
charts.blue#6495EE
charts.foreground#B0B7C3
charts.green#98C379
charts.lines#454963
charts.orange#FF9070
charts.purple#A78CFA
charts.red#f14c4c
charts.yellow#E4BF7F
checkbox.background#2a2a33
checkbox.border#181a1f
checkbox.foreground#B0B7C3
commandCenter.activeBackground#54546772
commandCenter.activeBorder#54546700
commandCenter.activeForeground#E1E4EA
commandCenter.background#26262e
commandCenter.border#26262e
commandCenter.foreground#9DA5B3
commandCenter.inactiveBorder#26262e
commandCenter.inactiveForeground#676f97
debugConsole.errorForeground#dc4352
debugConsole.infoForeground#545467
debugConsole.warningForeground#f98b50
debugExceptionWidget.background#a3151533
debugExceptionWidget.border#a31515
debugToolBar.background#2a2a33
debugToolBar.border#2a2a33
descriptionForeground#B0B7C3BF
diffEditor.diagonalFill#5F668B
diffEditor.insertedTextBackground#45B7464F
diffEditor.removedTextBackground#f14c4c54
dropdown.background#545467
dropdown.border#181A1F
dropdown.foreground#9DA5B3
dropdown.listBackground#545467
editor.background#26262e
editor.findMatchBackground#F8F900
editor.findMatchBorder#F8F90000
editor.findMatchHighlightBackground#324464
editor.findMatchHighlightBorder#32446400
editor.findRangeHighlightBackground#F8F9004C
editor.foldBackground#32446469
editor.foreground#9DA5B3
editor.hoverHighlightBackground#32446499
editor.lineHighlightBackground#2F323C
editor.lineHighlightBorder#2F323C00
editor.rangeHighlightBackground#2F323C
editor.selectionBackground#54546759
editor.selectionHighlightBackground#0080997F
editor.selectionHighlightBorder#00809900
editor.snippetFinalTabstopHighlightBackground#32446499
editor.snippetFinalTabstopHighlightBorder#5F668B
editor.snippetTabstopHighlightBackground#32446499
editor.snippetTabstopHighlightBorder#32446400
editor.wordHighlightBackground#0080997F
editor.wordHighlightBorder#00809900
editor.wordHighlightStrongBackground#A78CFA72
editor.wordHighlightStrongBorder#A78CFA00
editorBracketHighlight.foreground1#E4BF7F
editorBracketHighlight.foreground2#CF68E1
editorBracketHighlight.foreground3#6495EE
editorBracketHighlight.foreground4#E4BF7F
editorBracketHighlight.foreground5#CF68E1
editorBracketHighlight.foreground6#6495EE
editorBracketHighlight.unexpectedBracket.foreground#838FA7
editorBracketMatch.background#FF90707F
editorBracketMatch.border#FF907000
editorBracketPairGuide.activeBackground1#E4BF7Fcc
editorBracketPairGuide.activeBackground2#CF68E1cc
editorBracketPairGuide.activeBackground3#6495EEcc
editorBracketPairGuide.activeBackground4#E4BF7Fcc
editorBracketPairGuide.activeBackground5#CF68E1cc
editorBracketPairGuide.activeBackground6#6495EEcc
editorCodeLens.foreground#50567C
editorCursor.background#FFFFFF
editorCursor.foreground#FF9070
editorError.foreground#dc4352
editorGroup.border#181A1F
editorGroup.dropBackground#545467
editorGroup.emptyBackground#26262e00
editorGroup.focusedEmptyBorder#5889EA
editorGroupHeader.border#26262e00
editorGroupHeader.noTabsBackground#2a2a33
editorGroupHeader.tabsBackground#2a2a33
editorGroupHeader.tabsBorder#26262e00
editorGutter.addedBackground#40AD41
editorGutter.background#26262e
editorGutter.deletedBackground#F14C4C
editorGutter.foldingControlForeground#FFF
editorGutter.modifiedBackground#A78CFA
editorHoverWidget.background#545467
editorHoverWidget.border#181A1F
editorHoverWidget.foreground#B0B7C3
editorHoverWidget.statusBarBackground#545467
editorIndentGuide.activeBackground1#FF9070BF
editorIndentGuide.background1#454963
editorInfo.foreground#4480F4
editorInlayHint.foreground#8A97C3
editorLineNumber.activeForeground#9DA5B3
editorLineNumber.foreground#535773
editorLink.activeForeground#D365E5
editorMarkerNavigation.background#2F323B
editorMarkerNavigationError.background#dc4352
editorMarkerNavigationInfo.background#545467
editorMarkerNavigationWarning.background#f98b50
editorOverviewRuler.addedForeground#40AD41
editorOverviewRuler.background#26262e
editorOverviewRuler.border#5F668B00
editorOverviewRuler.bracketMatchForeground#FF90707F
editorOverviewRuler.currentContentForeground#54546759
editorOverviewRuler.deletedForeground#F14C4C
editorOverviewRuler.errorForeground#dc4352
editorOverviewRuler.findMatchForeground#EEF3FF7F
editorOverviewRuler.incomingContentForeground#45B7463F
editorOverviewRuler.infoForeground#4480F4
editorOverviewRuler.modifiedForeground#A78CFA
editorOverviewRuler.rangeHighlightForeground#2D3039
editorOverviewRuler.selectionHighlightForeground#008099BF
editorOverviewRuler.warningForeground#f98b50
editorOverviewRuler.wordHighlightForeground#008099BF
editorOverviewRuler.wordHighlightStrongForeground#A78CFABF
editorPane.background#26262e
editorRuler.foreground#676f97
editorSuggestWidget.background#2a2a33
editorSuggestWidget.border#181A1F
editorSuggestWidget.foreground#8E99B1
editorSuggestWidget.highlightForeground#4480F4
editorSuggestWidget.selectedBackground#54546764
editorUnnecessaryCode.border#676f97
editorUnnecessaryCode.opacity#676f97FF
editorWarning.foreground#f98b50
editorWhitespace.foreground#60678E
editorWidget.background#2a2a33
editorWidget.border#2a2a33
editorWidget.foreground#b0b7c3
errorForeground#dc4352
extensionBadge.remoteBackground#56B7C3
extensionBadge.remoteForeground#ffffff
extensionButton.background#4b516a
extensionButton.foreground#DCDFE5
extensionButton.prominentBackground#499149
extensionButton.prominentForeground#fff
extensionButton.prominentHoverBackground#545467
extensionButton.separator#DCDFE5
extensionIcon.preReleaseForeground#7BBE54
extensionIcon.sponsorForeground#F02B77
extensionIcon.starForeground#f98b50
focusBorder#4480F4
foreground#B0B7C3
gitDecoration.addedResourceForeground#98C379
gitDecoration.conflictingResourceForeground#dc4352
gitDecoration.deletedResourceForeground#F14C4C
gitDecoration.ignoredResourceForeground#676f97
gitDecoration.modifiedResourceForeground#A78CFA
gitDecoration.renamedResourceForeground#E4BF7F
gitDecoration.stageDeletedResourceForeground#E06C75
gitDecoration.stageModifiedResourceForeground#D365E5
gitDecoration.submoduleResourceForeground#FF6AB3
gitDecoration.untrackedResourceForeground#3EC141
gitlens.trailingLineBackgroundColor#2F323B00
gitlens.trailingLineForegroundColor#585D68
icon.foreground#c5c5c5
input.background#26262e
input.border#2a2a33
input.foreground#9DA5B3
input.placeholderForeground#5E658B
inputOption.activeBackground#545467
inputOption.activeBorder#54546700
inputOption.activeForeground#fff
inputValidation.errorBackground#2a2a33
inputValidation.errorBorder#dc4352
inputValidation.errorForeground#dc4352
inputValidation.infoBackground#2a2a33
inputValidation.infoBorder#4480F4
inputValidation.infoForeground#4480F4
inputValidation.warningBackground#2a2a33
inputValidation.warningBorder#f98b50
inputValidation.warningForeground#f98b50
list.activeSelectionBackground#54546766
list.activeSelectionForeground#d7dae0
list.activeSelectionIconForeground#D2D5DB
list.dropBackground#545467
list.errorForeground#dc4352
list.filterMatchBackground#FFF
list.focusBackground#54546766
list.focusForeground#d7dae0
list.focusHighlightForeground#4480F4
list.focusOutline#54546700
list.highlightForeground#5889EA
list.hoverBackground#54546766
list.hoverForeground#d7dae0
list.inactiveFocusBackground#5454673F
list.inactiveFocusOutline#54546700
list.inactiveSelectionBackground#30333D
list.inactiveSelectionForeground#d7dae0
list.inactiveSelectionIconForeground#d7dae0
list.invalidItemForeground#676f97
list.warningForeground#f98b50
listFilterWidget.background#2a2a33
listFilterWidget.noMatchesOutline#ff0000
listFilterWidget.outline#fff
menu.background#2a2a33
menu.foreground#8E99B1
menu.selectionBackground#545467B3
menu.selectionBorder#54546700
menu.selectionForeground#E1E4EA
menu.separatorBackground#454963
menubar.selectionBackground#545467B3
menubar.selectionBorder#54546700
menubar.selectionForeground#E1E4EA
merge.border#181A1F
merge.currentContentBackground#54546759
merge.currentHeaderBackground#54546759
merge.incomingContentBackground#45B7463F
merge.incomingHeaderBackground#45B7463F
mergeEditor.change.background#45B7461A
mergeEditor.change.word.background#45B7464D
mergeEditor.conflict.handled.minimapOverViewRuler#dc4352
mergeEditor.conflict.handledFocused.border#dc4352
mergeEditor.conflict.handledUnfocused.border#dc4352
mergeEditor.conflict.unhandled.minimapOverViewRuler#dc4352
mergeEditor.conflict.unhandledFocused.border#dc4352
mergeEditor.conflict.unhandledUnfocused.border#dc4352
minimap.background#26262e
minimap.errorHighlight#dc43527F
minimap.findMatchHighlight#D0D5E17F
minimap.selectionHighlight#5F97FFF2
minimap.warningHighlight#f98b507F
minimapGutter.addedBackground#40AD41
minimapGutter.deletedBackground#F14C4C
minimapGutter.modifiedBackground#A78CFA
minimapSlider.activeBackground#A2ABE533
minimapSlider.background#A2ABE519
minimapSlider.hoverBackground#A2ABE533
notificationCenter.border#181A1F
notificationCenterHeader.background#2a2a33
notificationCenterHeader.foreground#B0B7C3
notificationLink.foreground#545467
notifications.background#2a2a33
notifications.border#181A1F
notifications.foreground#B0B7C3
notificationToast.border#181A1F
panel.background#26262e
panel.border#2a2a33
panel.dropBorder#545467
panelSection.border#2a2a33
panelSection.dropBackground#545467
panelSectionHeader.background#2a2a33
panelSectionHeader.foreground#B0B7C3
panelTitle.activeBorder#B0B7C3
panelTitle.activeForeground#B0B7C3
panelTitle.inactiveForeground#676f97
peekView.border#535773
peekViewEditor.background#2D3039
peekViewEditor.matchHighlightBackground#54546733
peekViewEditor.matchHighlightBorder#54546700
peekViewEditorGutter.background#2D3039
peekViewResult.background#26262e
peekViewResult.fileForeground#9DA5B3
peekViewResult.lineForeground#8E99B1
peekViewResult.matchHighlightBackground#26262e00
peekViewResult.selectionBackground#545467A5
peekViewResult.selectionForeground#d7dae0
peekViewTitle.background#26262e
peekViewTitleDescription.foreground#8E99B1
peekViewTitleLabel.foreground#9DA5B3
pickerGroup.border#4480F4
pickerGroup.foreground#4480F4
problemsErrorIcon.foreground#dc4352
problemsInfoIcon.foreground#4480F4
problemsWarningIcon.foreground#f98b50
profileBadge.background#676f97E5
profileBadge.foreground#CED5E1
progressBar.background#4283F5
quickInput.background#2a2a33
quickInput.foreground#B0B7C3
quickInputList.focusBackground#5454673F
quickInputTitle.background#2a2a33
sash.hoverBorder#545467
scrollbar.shadow#000
scrollbarSlider.activeBackground#A2ABE54C
scrollbarSlider.background#A2ABE533
scrollbarSlider.hoverBackground#A2ABE54C
selection.background#54546759
settings.checkboxBackground#545467
settings.checkboxBorder#181A1F
settings.checkboxForeground#9DA5B3
settings.dropdownBackground#545467
settings.dropdownBorder#181A1F
settings.dropdownForeground#9DA5B3
settings.dropdownListBorder#181A1F
settings.focusedRowBackground#54546766
settings.focusedRowBorder#54546700
settings.headerForeground#d7dae0
settings.modifiedItemIndicator#A78CFA
settings.numberInputBackground#545467
settings.numberInputBorder#181A1F
settings.numberInputForeground#9DA5B3
settings.rowHoverBackground#5454673F
settings.textInputBackground#545467
settings.textInputBorder#181A1F
settings.textInputForeground#9DA5B3
sideBar.background#2a2a33
sideBar.dropBackground#545467
sideBar.foreground#8E99B1
sideBarSectionHeader.background#26262e
sideBarSectionHeader.foreground#9DA5B3
sideBarTitle.foreground#9DA5B3
statusBar.background#2a2a33
statusBar.border#2a2a3300
statusBar.debuggingBackground#6c2022
statusBar.debuggingForeground#DDE0E6
statusBar.focusBorder#4480F4
statusBar.foreground#9DA5B3
statusBar.noFolderBackground#2a2a33
statusBar.noFolderForeground#9DA5B3
statusBarItem.activeBackground#000
statusBarItem.compactHoverBackground#545467B3
statusBarItem.errorBackground#2a2a33
statusBarItem.errorForeground#dc4352
statusBarItem.hoverBackground#54546766
statusBarItem.prominentBackground#2a2a33
statusBarItem.prominentHoverBackground#54546766
statusBarItem.remoteBackground#56B7C3
statusBarItem.remoteForeground#ffffff
statusBarItem.warningBackground#2a2a33
statusBarItem.warningForeground#f98b50
symbolIcon.arrayForeground#B0B7C3
symbolIcon.booleanForeground#CF68E1
symbolIcon.classForeground#56B7C3
symbolIcon.constantForeground#FF9070
symbolIcon.constructorForeground#6495EE
symbolIcon.enumeratorMemberForeground#FF9070
symbolIcon.eventForeground#6495EE
symbolIcon.fieldForeground#E06C75
symbolIcon.fileForeground#8E99B1
symbolIcon.folderForeground#9DA5B3
symbolIcon.functionForeground#6495EE
symbolIcon.interfaceForeground#56B7C3
symbolIcon.keyForeground#B0B7C3
symbolIcon.keywordForeground#A78CFA
symbolIcon.methodForeground#6495EE
symbolIcon.moduleForeground#E06C75
symbolIcon.namespaceForeground#E06C75
symbolIcon.nullForeground#CF68E1
symbolIcon.numberForeground#FF9070
symbolIcon.objectForeground#B0B7C3
symbolIcon.operatorForeground#56B7C3
symbolIcon.packageForeground#E06C75
symbolIcon.propertyForeground#8A97C3
symbolIcon.snippetForeground#A78CFA
symbolIcon.stringForeground#98c379
symbolIcon.structForeground#56B7C3
symbolIcon.textForeground#676f97
symbolIcon.typeParameterForeground#FF6AB3
symbolIcon.unitForeground#FF9070
symbolIcon.variableForeground#B0B7C3
tab.activeBackground#26262e
tab.activeBorder#26262e00
tab.activeBorderTop#26262e00
tab.activeForeground#d7dae0
tab.activeModifiedBorder#A78CFA
tab.border#181A1F
tab.hoverBackground#54546766
tab.hoverBorder#54546700
tab.hoverForeground#d7dae0
tab.inactiveBackground#2a2a33
tab.inactiveForeground#676f97
tab.inactiveModifiedBorder#A78CFA
tab.unfocusedActiveBackground#26262e
tab.unfocusedActiveBorder#26262e00
tab.unfocusedActiveBorderTop#26262e00
tab.unfocusedActiveForeground#d7dae0BF
tab.unfocusedActiveModifiedBorder#A78CFA
tab.unfocusedHoverBackground#54546766
tab.unfocusedHoverBorder#54546700
tab.unfocusedHoverForeground#d7dae0
tab.unfocusedInactiveForeground#676f97
tab.unfocusedInactiveModifiedBorder#A78CFA
terminal.ansiBlack#000
terminal.ansiBlue#4283F5
terminal.ansiBrightBlack#676f97
terminal.ansiBrightBlue#6495EE
terminal.ansiBrightCyan#56B7C3
terminal.ansiBrightGreen#3EC141
terminal.ansiBrightMagenta#FF6AB3
terminal.ansiBrightRed#f14c4c
terminal.ansiBrightWhite#8A97C3
terminal.ansiBrightYellow#f98b50
terminal.ansiCyan#56B7C3
terminal.ansiGreen#77BE4E
terminal.ansiMagenta#CF68E1
terminal.ansiRed#dc4352
terminal.ansiWhite#fff
terminal.ansiYellow#E4BF7F
terminal.background#26262e
terminal.border#2a2a33
terminal.foreground#B0B7C3
terminal.selectionBackground#54546759
terminal.tab.activeBorder#d7dae0
terminalCommandDecoration.defaultBackground#B0B7C300
terminalCommandDecoration.errorBackground#dc4352
terminalCommandDecoration.successBackground#3FB93F
terminalCursor.background#FFF
terminalCursor.foreground#FF9070
textBlockQuote.background#31353c
textBlockQuote.border#4283F5
textCodeBlock.background#181A1F
textLink.activeForeground#D365E5
textLink.foreground#4283F5
textPreformat.foreground#FF9070
titleBar.activeBackground#26262e
titleBar.activeForeground#8E99B1
titleBar.border#26262e00
titleBar.inactiveBackground#26262e
titleBar.inactiveForeground#676f97
toolbar.activeBackground#4283F58F
toolbar.hoverBackground#4283F58F
toolbar.hoverOutline#4283F500
tree.indentGuidesStroke#454963
walkThrough.embeddedEditorBackground#2a2a33
welcomePage.background#26262e
welcomePage.progress.background#26262e
welcomePage.progress.foreground#4283F5
welcomePage.tileBackground#2a2a33
welcomePage.tileHoverBackground#54546764
widget.shadow#000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
keyword.operator.new,keyword.other.new,storage.modifier.c,keyword.control.directive.define,keyword.control.def,keyword.control.class,keyword.control.module,keyword.control.new,keyword.preprocessor.define,meta.preprocessor.cs punctuation.separator.hash.cs,keyword.control.directive.undef,keyword.other.fn,storage.type.rust,storage.modifier.extern,storage.modifier.const,storage.modifier.extends,storage.modifier.ts,keyword.control.at-rule,keyword.other.let,keyword.other.instance,keyword.other.newtype,keyword.other.data,keyword.other.module,keyword.other,keyword.other.preprocessor,keyword.cs,entity.other.keyframe-offset,keyword.control.import,keyword.other.import,keyword.import,keyword.control.from,keyword.control.directive.include,keyword.other.package,keyword.other.class,keyword.other.namespace,keyword.other.enum,keyword.other.operator-decl,keyword.other.interface,keyword.preprocessor,keyword.other.delegate,storage.type.cpp,storage.type.namespace,storage.type.language.primitive.cpp,storage.type.struct,storage.type.template,support.type.built-in.posix-reserved.pthread,keyword.other.typedef,storage.modifier.dart,meta.class.identifier.java storage.modifier.java,meta.enum.java storage.modifier.java,storage.type.modifier,storage.modifier,keyword.control.as,keyword.other.phpdoc,keyword.other.var,storage.modifier.java,meta.var.expr,storage.type.function,keyword.function,keyword.var,keyword.const,keyword.channel,keyword.struct,keyword.other.struct,keyword.map,keyword.reserved,storage.type.class,storage.type.php,storage.type.interface,storage.type.object,keyword.declaration,storage.type.enum,storage.type.type,storage.type.const,storage.modifier.specifier,storage.type.class.jsdoc,support.module.node.js,support.type.object.module.js,support.type.object.module.ts,support.module.node.ts,keyword.control.preamble.latex,keyword.control.cite.latex,keyword.control.label.latex,keyword.storage.modifier,	#A78CFA
keyword.operator.arrow.skinny,keyword.operator.interpolation,keyword.operator.borrow,	#A78CFA
punctuation.definition.block.tag.jsdoc,keyword.control.directive.include punctuation.definition.directive,keyword.control.directive.undef punctuation.definition.directive,keyword.control.directive.define punctuation.definition.directive,punctuation.definition.directive,punctuation.definition.keyword.latex,keyword.control punctuation.definition.function.latex,keyword.control punctuation.definition.keyword.latex,	#A78CFA
meta.function-call,support.function.construct.output,invalid.deprecated.gradient.function.css,invalid.deprecated.function.css,support.function.builtin.python,support.function.go,entity.name.function.macro,meta.attribute.rust,new.expr meta.function-call support.class.builtin,new.expr meta.function-call support.class,keyword.operator.function,support.function.dom,support.function.console,support.function.any-method.builtin.url,support.function.any-method.builtin,support.function.url,support.function.misc,support.function.transform,support.function.calc,support.function.var,support.function.string,support.function.basic_functions,support.function.array,support.function.construct,support.function.datetime,support.function.file,support.function.network,support.function.session,support.function.mail,support.function.filter,support.function.errorfunc,support.function.mysql,support.function.php_odbc,support.function.xml,support.function.math,entity.name.type.lifetime.rust,entity.name.class,meta.method.declaration,keyword.control.trycatch,keyword.control.catch-exception,keyword.operator.cast,keyword.operator.big-arrow,entity.name.function,support.type.pthread,meta.block.class.cpp meta.body.class.cpp meta.block.class.cpp entity.name.function.definition.special.constructor.cpp,support.function,keyword.operator.sizeof,meta.function-call.python support.type.python,meta.function-call keyword.operator.expression.import,entity.name.type.js,new.expr.ts,entity.other.attribute-name.class.mixin,support.function.be.latex,keyword.other.special-method,	#6495EE
string.other.link.title.markdown,string.other.link.description.markdown,	#6495EE
storage.type.function.arrow,keyword.operator.arrow,keyword.operator.closure,	#6495EE
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end,punctuation.definition.generic.begin.html,punctuation.definition.generic.end.html,punctuation.definition.interpolation.begin.bracket,punctuation.definition.interpolation.end.bracket,support.constant.handlebars.wxml,constant.character.format.placeholder.other.python,punctuation.definition.interpolation.begin.html,punctuation.definition.interpolation.end.html,punctuation.definition.interpolation,punctuation.definition.lifetime.rust,beginning.punctuation.definition.quote.markdown,beginning.punctuation.definition.list.markdown,punctuation.definition.string.begin.markdown,punctuation.definition.string.end.markdown,punctuation.definition.function.latex,punctuation.definition.function.tex,punctuation.definition.link.description.begin.markdown,punctuation.definition.link.description.end.markdown,punctuation.section.embedded.begin.ruby,punctuation.section.embedded.end.ruby source.ruby,	#6495EE
entity.other.attribute-name,invalid.deprecated.entity.other.attribute-name,entity.name.tag.custom.scss,storage.type.java,entity.other.attribute-name.pseudo-class.css,support.type.property-name.media.css,support.constant.media.css,source.css.less entity.name.tag.custom.css,keyword.operator.gradient.css,entity.name.type,keyword.operator.expression,entity.other.inherited-class,entity.name.type.class,support.class,entity.name.type.interface,support.class.dart,entity.name.scope-resolution,	#56B7C3
keyword.operator,keyword.operator.arithmetic,keyword.operator.decrement,keyword.operator.increment,keyword.operator.assignment.compound,keyword.operator.less,meta.property-list.css,keyword.operator.sass,keyword.operator.increment-decrement,keyword.operator.css,entity.name.tag.wildcard.scss,keyword.operator.string,keyword.operator.bitwise,keyword.operator.assignment.augmented,storage.type.variable.ruby,keyword.operator.assignment.arithmetic,punctuation.definition.list.begin.markdown,variable.language.import-all,constant.language.import-export-all,storage.modifier.reference,storage.modifier.pointer,keyword.operator.assignment.rust,meta.directive.vue,punctuation.definition.quote.begin.markdown,meta.format.brace constant,meta.selector invalid.deprecated.combinator,meta.selector,storage.type.operator,entity.name.function.infix.haskell,constant.other.operator.infix.haskell,punctuation.separator.annotation.result.python,keyword.operator.string.php,entity.name.type.struct,keyword.interface,entity.name.type.delegate,storage.type.cs,support.class.builtin,support.type.graphql,punctuation.separator.namespace,keyword.operator.namespace,entity.other.attribute-name.pseudo-element.css punctuation.definition.entity.css,entity.other.attribute-name.pseudo-class.css punctuation.definition.entity.css,punctuation.attribute-shorthand.event.html,punctuation.attribute-shorthand.bind.html,punctuation.math.operator.latex,support.constant.mathematical-symbols.scss,meta.attribute.directive.vue,keyword.operator.relation.types.julia,keyword.operator.borrow.and.rust,punctuation.separator.key-value.css,	#56B7C3
variable.language.self,variable.language.this,variable.language.super,variable.language.special.self.python,variable.language.dart,keyword.operator.delete,keyword.operator.expression.delete,keyword.other.important,	#F02B77
support.type,keyword.operator.expression.typeof,keyword.other.typeof,support.type.primitive,support.type.builtin,entity.name.type.instance,storage.type.string,storage.type.numeric,storage.type.boolean,storage.type.primitive,meta.method.identifier,entity.other.inherited-classentity.name.type.interface,meta.return.type,meta.type.parameters,keyword.interface,storage.type.generic,keyword.type,entity.name.type.type-parameter,storage.type.object.array,entity.name.type.delegate,storage.type.c,meta.declaration.dart,meta.type.declaration,meta.block.ts,meta.class-struct-block.cpp entity.name.type.cpp,meta.function.definition.parameters.cpp storage.type.language.primitive.cpp,meta.function.definition.parameters.cpp storage.type.struct.cpp,meta.function.constructor.cpp storage.type.language.primitive.cpp,storage.type.template.argument,entity.name.type.numeric.rust,storage.modifier.mut,entity.name.type.primitive,storage.type.built-in,support.type.built-in.posix-reserved,keyword.other.type,storage.type.haskell,meta.method.identifier.java storage.type.java,support.type.python,fenced_code.block.language,	#FF6AB3
constant.numeric,entity.other.keyframe-offset.percentage.css,keyword.other.unit,support.constant.dom,support.constant.property.math,support.constant.ext,support.constant.core,entity.name.function.preprocessor.c,constant.other.js,meta.at-rule.keyframes.scss entity.other.attribute-name.scss,constant,variable.other.enummember,constant.other.enum,entity.name.variable.enum-member,constant.language.infinity,text.log constant.language,meta.attribute.id.html entity.other.attribute-name.html,entity.other.attribute-name.id,entity.name.variable.preprocessor.symbol,variable.other.constant.object,	#FF9070
constant.other.character-class.regexp,constant.other.character-class.range.regexp,constant.other.character-class.set.regexp,support.constant,support.constant.math,support.constant.json,entity.other.attribute-name.id.css punctuation.definition.entity.css,	#FF9070
variable.parameter,token.variable.parameter,variable.other.jsdoc,variable.language.arguments,function.parameter,entity.name.variable.parameter,meta.function.c,punctuation.vararg-ellipses,variable.other.block.ruby,meta.arguments,entity.name.type.template,meta.type.parameters entity.name.type,meta.parameters,meta.function.parameter variable.other,variable.other.less,variable.other.sass,variable.scss,source.sass variable.other,variable.argument.css,variable.parameter.function.latex,variable.parameter.definition.label.latex,markup.bold.markdown,meta.function.definition variable.other,	#E4BF7F
keyword.operator.negetion.regexp,keyword.control.anchor.regexp,punctuation.definition.group.capture.regexp,keyword.operator.quantifier.regexp,punctuation.definition.bold.markdown,	#E4BF7F
variable.parameter.url,string,markup.inline.raw.string,text.html.vue-html meta.object-literal.key,meta.preprocessor.cs,text.html.vue-html meta.object-literal.key string.quoted,entity.other.attribute-name.class.css,selector.sass,entity.other.attribute-name.parent-selector.css,meta.at-rule.extend.scss,string.other.math.tex,support.constant.font-name,markup.inline.raw.markdown,markup.underline.link.markdown,markup.underline.link.image.markdown,	#98C379
punctuation.definition.metadata.markdown,string.regexp,source.jsonmeta.structure.dictionary.json>value.json>string.quoted.json,source.jsonmeta.structure.array.json>value.json>string.quoted.json,source.jsonmeta.structure.dictionary.json>value.json>string.quoted.json>punctuation,source.jsonmeta.structure.array.json>value.json>string.quoted.json>punctuation,string.quoted source,punctuation.definition.entity.css,meta.attribute-selector.scss,string invalid.illegal,string.other.math.tex,punctuation.definition.string.begin.tex,punctuation.definition.string.end.tex,punctuation.definition.string,text.html.vue-html meta.object-literal.key punctuation.definition.string,string punctuation.attribute-shorthand.bind.html,string punctuation.attribute-shorthand.event.html,punctuation.definition.string.template.begin,punctuation.definition.string.template.end,	#98C379
entity.name.type.module,entity.name.package,variable.other.property,variable.other.object.property,variable.other.constant.property,entity.name.type.option,entity.name.label,variable.other.object.property.cs,entity.name.variable.tuple-element.cs,meta.object-literal.key,meta.object-literal.key string.quoted,variable.object.property,support.type.map.key,meta.at-rule.each.scss,meta.attribute.python,support.variable.dom,support.variable.property,support.variable.property.dom,storage.modifier.import,constant.other.php,entity.name.type.namespace,variable.other.member.c,meta.using-namespace-declaration.cpp entity.name.type.cpp,meta.class-struct-block.cpp meta.namespace-block.cpp entity.name.type.cpp,variable.other.source.dart,entity.name.namespace,entity.name.module,entity.name.type.result.rust,entity.name.scope-resolution.namespace,support.class.console,meta.use.rust,keyword.other.preprocessor.extension,entity.other.attribute-name.pseudo-element.css,entity.name.section.markdown,markup.heading,source.json meta.structure.dictionary.json > string.quoted.json,support.type.property-name.json,support.function.section.latex,support.function.general.tex,meta.object-literal.key punctuation.definition.string,variable.other.constant.object.property,	#E06C75
entity.name.tag,entity.other.attribute-name.parent-selector.css punctuation.definition.entity.css,punctuation.definition.heading.markdown,support.function.general.tex punctuation.definition.function.tex,support.function.section.latex punctuation.definition.function.latex,punctuation.support.type.property-name.begin.json.comments,punctuation.support.type.property-name.end.json.comments,support.class.component,keyword.operator.optional,punctuation.section.embedded.begin.php,punctuation.section.embedded.end.php,punctuation.section.embedded.end.php source.php,string.regexp keyword.other,entity.name.tag.custom.css,	#E06C75
keyword.operator.expression.instanceof,keyword.operator.instanceof,keyword.operator.expression.in,keyword.operator.expression.of,keyword.control,keyword.other.using,keyword.preprocessor.elif,keyword.preprocessor.if,keyword.preprocessor.else,keyword.preprocessor.endif,keyword.control.directive,punctuation.separator.hash,keyword.package,keyword.control.flow,keyword.input,keyword.type.graphql,keyword.cmake,keyword.control.rust,keyword.other.rust,keyword.control.default,keyword.control.export,keyword.other.where,keyword.other.forall,keyword.other.deriving,keyword.other.qualified,keyword.other.hiding,keyword.other.in,constant.language,constant.language.boolean,keyword.operator.expression.void,keyword.control.loop,keyword.control.ref.latex,keyword.other.item.latex,keyword.operator.relation.in,storage.type.primitive.dart,	#CF68E1
keyword.operator.boolean,keyword.operator.relation,keyword.operator.ternary,keyword.control.ternary,keyword.operator.logical,keyword.operator.comparison,keyword.operator.relational,keyword.operator.or.regexp,keyword.operator.class,keyword.operator.type,keyword.operator.other.ruby,keyword.operator.conditional,punctuation.separator.question-mark,keyword.operator.null-coalescing,punctuation.tilde,punctuation.separator.pointer-access,keyword.operator.dart,keyword.operator.nulltype,keyword.operator.arrow.haskell,keyword.operator.arrow.left.haskell,keyword.control.directive punctuation.definition.directive,keyword.control.equation.align.latex,keyword.operator.bitwise.dart,	#CF68E1
keyword.control.equation.newline.latex,keyword.control.newline.tex,keyword.other.item.latex punctuation.definition.keyword.latex,token.debug-token	#CF68E1
support.constant.property-value.scss,support.constant.property-value.css,support.constant.vendored.property-value.css,source.css keyword.other.default,	#C57BDB
markup.italic	#C57BDB	italic
punctuation.definition.italic,	#C57BDB
variable.other,support.variable,meta.definition.variable,variable.other.object,variable.other.readwrite,entity.name.type.enum,meta.method.body,entity.name.variable,meta.block.c,meta.class-struct-block,meta.item-access.python,meta.function-call.arguments.python,meta.item-access.arguments.python,variable.parameter.keyframe-list.css,meta.property-value.css,meta.property-value.scss,entity.name.tag.custom,entity.name.function.scss,variable,meta.function-call.c,entity.name.function.preprocessor,meta.parens,support.constant.color.w3c-standard-color-name,support.constant.color.w3c-extended-color-name,constant.other.color.rgb-value.hex,constant.other.rgb-value,support.constant.color.w3c-extended-color-name.css,text.tex.latex constant.other.math.tex,constant.other.general.math.tex,constant.other.general.math.tex,constant.character.math.tex,constant.other.reference.citation.latex,code-runner.output,	#B0B7C3
punctuation.definition.constant.math.tex,constant.other.math.tex punctuation.definition.function.tex,support.class.math.block.environment.latex punctuation.definition.function.tex,source,source.c,source.cpp,source.ruby,source.go,source.dart,source.python,source.css.less,source.js,punctuation.definition.link.title.begin.markdown,punctuation.definition.link.title.end.markdown,	#B0B7C3
text.html.basic,text.html.markdown,meta.paragraph.markdown,text.html.php,text.html.derivative,text.html.wxml,text.xml,text.html,source.ignore,source.nginx,text,text.tex.latex,entity.name.section.latex,	#B0B7C3
keyword.operator.dots,punctuation.accessor,punctuation.separator.period,punctuation.separator.dot-access,punctuation.separator.method,punctuation.other.period,punctuation.dot,meta.delimiter.property.period,keyword.operator.access.dot,keyword.operator.period	#838FA7	bold
keyword.operator.update,meta.bracket,meta.parameters.js,keyword.operator.assignment,keyword.operator.assignment.equal,keyword.operator.eq,punctuation.section.block.begin.bracket,punctuation.section.block.end.bracket,punctuation.definition.block,punctuation.section.embedded.begin,punctuation.section.embedded.end,meta.brace,punctuation.bracket,punctuation.definition.parameters.ruby,punctuation.definition.parameters.begin,punctuation.definition.parameters.end,punctuation.section.function.begin.bracket,punctuation.section.function.end.bracket,punctuation.definition.typeparameters.begin,punctuation.definition.typeparameters.end,punctuation.section.array.end,punctuation.section.array.begin,punctuation.definition.array.end,punctuation.definition.array.begin,punctuation.section.scope.end,punctuation.section.scope.begin,meta.parameter.object-binding-pattern,punctuation.definition.binding-pattern.object,punctuation.definition.arguments.end,punctuation.definition.arguments.begin,punctuation.definition.begin.bracket,punctuation.definition.end.bracket,punctuation.curlybrace.open,punctuation.curlybrace.close,punctuation.parenthesis.open,punctuation.parenthesis.close,punctuation.squarebracket.open,,punctuation.squarebracket.close,punctuation.section.method.begin,punctuation.section.method.end,punctuation.section.class.begin,punctuation.section.class.end,punctuation.section.enum.begin,punctuation.section.enum.end,punctuation.section.parameters.begin.bracket,punctuation.section.parameters.end.bracket,punctuation.section.parens.begin.bracket,punctuation.section.parens.end.bracket,punctuation.section.arguments.begin.bracket,punctuation.section.arguments.end.bracket,punctuation.separator.arguments,punctuation.section.function.ruby,punctuation.definition.dictionary.begin,punctuation.definition.dictionary.end,punctuation.separator.dictionary.pair,punctuation.separator.array,punctuation.definition.map.begin.bracket,punctuation.definition.map.end.bracket,punctuation.section.function,punctuation.definition.parameters.end.bracket,punctuation.definition.parameters.begin.bracket,punctuation.section.property-list.begin.bracket,punctuation.section.property-list.end.bracket,punctuation.definition.list.begin,punctuation.definition.list.end,punctuation.definition.binding-pattern.array,punctuation.section.embedded.begin.ruby source.ruby,source.cs,punctuation.definition.function.body.begin.bracket,punctuation.definition.function.body.end.bracket,punctuation.definition.modules.begin,punctuation.definition.modules.end,constant.character.brace,punctuation.operation.graphql,punctuation.definition.optional.arguments.begin,punctuation.definition.optional.arguments.end,punctuation.definition.brackets,punctuation.math.begin.bracket,punctuation.math.end.bracket,punctuation.section.angle-brackets,keyword.operator.delete.array.bracket,punctuation.brackets.round,punctuation.brackets.curly,punctuation.brackets.square,punctuation.brackets.attribute,punctuation.definition.attribute,punctuation.brackets,punctuation.definition.bracket,punctuation.definition.character-class.regexp,meta.preprocessor.haskell,punctuation.paren,punctuation.brace,punctuation.parenthesis.begin,punctuation.parenthesis.end,punctuation.section.group.tex,punctuation.definition.arguments.begin.latex,punctuation.definition.arguments.end.latex,punctuation.definition.arguments.latex,meta.group.braces.tex,punctuation.math.begin.bracket.curly,punctuation.math.end.bracket.curly,punctuation.definition.begin.entity,punctuation.definition.end.entity,punctuation.separator.operator,	#838FA7
support.type.property-name.css,support.type.vendored.property-name.css,meta.at-rule.each.scss support.constant.property-value.css,source.css.scss,meta.text.normal.tex,meta.function.environment.frame.latex,meta.tag meta.attribute entity.name.label,	#8A97C3
constant.character.escape,constant.character.entity	#8A97C3
meta.brace.round.css,punctuation.section.property-list.begin.bracket.curly.css,punctuation.section.property-list.end.bracket.curly.css,punctuation.section.function.begin.bracket.round.css,punctuation.section.function.end.bracket.round.css,punctuation.section.media.begin.bracket.curly.css,punctuation.section.media.end.bracket.curly.css,punctuation.definition.parameters.begin.bracket.round.css,punctuation.definition.parameters.end.bracket.round.css,punctuation.section.keyframes.begin.bracket.curly.css,punctuation.section.keyframes.end.bracket.curly.css,punctuation.definition.entity.end.bracket.square.css,punctuation.definition.entity.begin.bracket.square.css,punctuation.section.property-list.begin.bracket.curly.scss,punctuation.section.property-list.end.bracket.curly.scss,punctuation.section.function.scss,punctuation.definition.attribute-selector.begin.bracket.square.scss,punctuation.definition.attribute-selector.end.bracket.square.scss,punctuation.definition.pseudo-class.begin.bracket.round.css,punctuation.definition.pseudo-class.end.bracket.round.css,punctuation.definition.begin.entity.css,punctuation.definition.end.entity.css,	#838FA7CC
variable.parameter.url.scss,	#8E99B1
keyword.operator.range,punctuation.separator.key-value,keyword.operator.type.annotation,punctuation.definition.section.case-statement,punctuation.separator.colon,punctuation.separator.other,punctuation.definition.parameters,punctuation.definition.constant.ruby,punctuation.separator.dictionary.key-value,punctuation.section.function.begin.python,meta.property-list.css.sass,sass-script-maps,punctuation.colon,punctuation.separator.initializers,keyword.operator.key-value,punctuation.separator.label,keyword.operator.colon,punctuation.separator.annotation.python,source.ts.embedded.html meta.block.ts,keyword.operator.key.php,keyword.operator.arrow.julia,keyword.operator.ternary.dart,meta.property-list.css punctuation.separator.key-value.css,source.css.embedded.html punctuation.separator.key-value.css,	#8E99B1
invalid.illegal,invalid.illegal.expected-dictionary-separator.json,invalid.broken,invalid.deprecated,	#8E99B1
meta.jsx.children,	#8792AA
punctuation.definition.tag,meta.tag.inline.any,meta.tag.block.any,meta.tag.any ,meta.tag.structure.any,meta.tag.metadata.script,punctuation.definition.tag.begin,punctuation.definition.tag.end,meta.tag.preprocessor.xml,punctuation.separator.key-value.html,meta.tag.metadata.style.html,meta.tag.attributes.js keyword.operator.assignment,meta.tag.other.html,meta.tag.inline.any.html source.directive.vue meta.brace,punctuation.definition.tag.begin source.js,punctuation.definition.tag.end source.js,punctuation.definition.tag source,source.vue,meta.attribute-selector.scss keyword.operator.scss,punctuation.separator.equals,meta.tag.svg,text.xml.svg meta.tag.style,punctuation.definition.markdown,meta.tag keyword.operator.assignment,meta.tag.xml,punctuation.separator.operator.css,	#8792AA
punctuation.separator.comma,punctuation.separator.delimiter,punctuation.separator.list.comma,punctuation.separator.parameter,meta.array.php,punctuation.separator.parameters,punctuation.separator.arguments.python,punctuation.separator.object,meta.function.method.with-arguments.ruby,punctuation.comma,punctuation.separator.element.python,comment.punctuation.comma.sass,meta.at-rule.keyframes.body.css,meta.delimiter.object.comma,punctuation.other.comma,meta.math.block.latex support.function.general.tex,	#79859D
comment,comment markup.link,punctuation.definition.comment,markup.quote.markdown	#676f97	italic
punctuation.terminator,punctuation.terminator.statement,punctuation.terminator.rule,punctuation.terminator.expression,punctuation.separator.statement,meta.using-namespace-declaration.cpp,invalid.deprecated.semicolon,constant.character.end,punctuation.semi,punctuation.definition.comment,meta.property-name.css,	#676f97
invalid,invalid.unimplemented,	#676f97	underline
log.info,token.info-token,	#4480F4
token.warn-token,log.warning	#f98b50
token.error-token,log.error,	#dc4352
keyword.other.debugger	#dc4352
meta.diff.range.unified,meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff	#A78CFA	—
markup.inserted.diff	#77BE4E	—
markup.deleted.diff	#F14C4C	—

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}!`;
}