Darkanian Theme

Name: Darkanian Theme
Author: Vahan Sahakyan

Publisher: Vahan SahakyanThemes in package: 20

[UI-Theme-Pack] w/ Monokai-Syntax

Open in VS Code GitHub

Color themes

VS Code preview

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

Darkanian Theme — Lightanian (Tokyo Night)

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment keyword, comment markup.underline.link, comment string, comment punctuation.definition, comment punctuation, comment text	#9d9b9d	italic
comment storage.type	#9d9b9d	—
comment entity.name.type	#919090	—
comment variable, comment variable.other	#919090	—
comment keyword.codetag.notation	#9347bf	bold
comment.git-status.header.remote	#df4168	bold
comment.git-status.header.local	#328c97	bold
comment.other.git-status.head	#747474	bold
string.quoted.docstring, string.quoted.docstring punctuation.definition	#9d9b9d	—
constant	#9347bf	bold
constant.other	#747474	bold
constant.other.caps	#9347bf	bold
constant.other.placeholder.c	#ca7a52	bold
constant.other.property	#9347bf	bold
constant.other.citation.latex	#9347bf	bold
constant.other.color	#9347bf	bold
constant.other.character-class.escape	#9347bf	bold
constant.other.key	#9347bf	bold
constant.other.symbol	#ca7a52	bold
constant.other.elm	#328c97	bold
constant.numeric	#9347bf	bold
constant.language	#9347bf	bold
constant.character.escape	#9347bf	bold
constant.numeric.line-number.find-in-files	#5b595c	—
constant.numeric.line-number.match.find-in-files	#998514	—
entity.name.section	#998514	—
entity.name.function, entity.name.function.templated	#088c31	bold
entity.name.function.member.static	#747474	bold
entity.name.type.class.templated, entity.name.type.class.generic, entity.name.type.namespace	#328c97	bold
entity.name.label	#9347bf	bold
entity.name.function.preprocessor	#328c97	bold
entity.name	#088c31	bold
entity.name.class	#328c97	bold
entity.name.constant	#9347bf	bold
entity.name.namespace	#747474	bold
entity.other.inherited-class	#328c97	bold
entity.name.function	#088c31	bold
entity.name.tag, entity.name.tag.js.jsx support.class.component.js.jsx, entity.name.tag support.class.component, source.vue support.class.component	#df4168	bold
entity.name.function.operator	#df4168	—
entity.name.type, entity.name.type.class.reference, entity.name.type.class.value	#328c97	bold
entity.other.attribute-name	#328c97	bold italic
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	#088c31	bold
entity.other.attribute-name.id.css	#ca7a52	bold
entity.other.attribute-name.pseudo-class.css, entity.other.pseudo-class.css, entity.other.pseudo-element.css	#328c97	bold
entity.name.function, support.function	#088c31	bold
entity.other.git-status.hex	#9347bf	bold
entity.other.jinja2.delimiter	#939293	—
entity.name.operator.custom-literal	#747474	bold
entity.name.operator.custom-literal.string	#998514	normal
entity.name.operator.custom-literal.number	#9347bf	bold
entity.name.type.rust	#328c97	bold
entity.name.lifetime.rust	#df4168	bold
invalid	—	italic
keyword	#df4168	bold
keyword.control	#df4168	bold
keyword.control.directive	#df4168	bold
keyword.operator, keyword.operator.member, keyword.operator.new	#df4168	bold
keyword.other.substitution	#939293	—
keyword.other.template.begin, keyword.other.template.end	#df4168	bold
keyword.operator.heading.restructuredtext, keyword.operator.table.row.restructuredtext keyword.operator.table.data.restructuredtext	#939293	—
keyword.other.parenthesis.elm	#939293	—
keyword.other.fn.rust, keyword.other.rust, keyword.other.unsafe.rust, keyword.other.where.rust	#328c97	bold
keyword.control.rust, keyword.operator.misc.rust	#df4168	bold
keyword.declaration.class.ruby, keyword.declaration.function.ruby, keyword.declaration.namespace.ruby	#df4168	bold
markup.italic	—	italic
markup.bold	—	bold
markup.heading	#998514	—
markup.raw	#ca7a52	bold
markup.underline	—	underline
markup.underline.link	#088c31	bold
markup.inserted, markup.inserted punctuation.definition.inserted	#088c31	bold
markup.deleted, markup.deleted punctuation.definition.deleted	#df4168	bold
markup.changed, markup.changed punctuation.definition.changed	#998514	—
markup.ignored, markup.ignored punctuation.definition.ignored	#939293	—
markup.untracked	#939293	—
markup.quote	—	italic
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	#939293	—
meta.function-call.generic.python, support.function.builtin.python	#088c31	bold
meta.function-call.python meta.function-call.arguments.python	#747474	bold
meta.instance.constructor	#088c31	bold
meta.attribute-with-value.class string, meta.attribute.class.html string	#088c31	bold
meta.attribute-with-value.id string, meta.attribute.id.html string	#ca7a52	bold
source.json meta.mapping.key string	#747474	bold
meta.object.member	#747474	bold
meta.property-list.css variable.other	#ca7a52	bold
entity.name.constant.preprocessor, meta.preprocessor	#9347bf	bold
meta.diff.git-diff.header	#998514	—
meta.type_params.rust	#747474	bold
meta.attribute.rust, meta.annotation.rust, variable.language.rust, variable.annotation.rust, meta.annotation.rust string, meta.annotation.rust keyword, meta.annotation.rust keyword.operator, meta.attribute.rust string	#919090	—
punctuation	#939293	—
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	#939293	—
punctuation.definition.group	#747474	bold
punctuation.definition.comment	#9d9b9d	—
punctuation.definition.variable, punctuation.definition.keyword.scss, punctuation.definition.entity.css	#919090	—
punctuation.section.embedded, punctuation.section.embedded entity.name.tag, punctuation.section.embedded constant.other, punctuation.section.embedded source, punctuation.section.embedded.begin	#ca7a52	bold
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	#df4168	bold
meta.paragraph.markdown meta.dummy.line-break, meta.paragraph.markdown meta.hard-line-break.markdown	—	bold
region.redish	#df4168	bold
region.orangish	#ca7a52	bold
region.yellowish	#998514	normal
region.greenish	#088c31	bold
region.bluish	#328c97	bold
region.purplish	#9347bf	bold
region.pinkish	#df4168	bold
region.whitish	#747474	—
source	#747474	bold
source.scss, source.sass	#939293	—
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	#ca7a52	bold
source.git-show.commit.sha	#9347bf	bold
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	#939293	—
source.git-show meta.diff.git-diff.header.extended.index.from-sha, source.git-show meta.diff.git-diff.header.extended.index.to-sha	#9347bf	bold
source.git-show meta.diff.range.unified	#ca7a52	bold
source.git-show meta.diff.header.from-file, source.git-show meta.diff.header.to-file	#939293	—
storage	#df4168	bold
storage.type	#328c97	bold italic
storage.type.extends	#df4168	bold
storage.type.function.arrow	#df4168	italic
storage.modifier, storage.type.modifier	#df4168	bold italic
storage.class.restructuredtext.ref	#9347bf	bold
storage.modifier.visibility.rust, storage.modifier.lifetime.rust	#df4168	bold
storage.modifier.const.rust, storage.modifier.dyn.rust, storage.modifier.mut.rust, storage.modifier.static.rust, storage.type.rust, storage.type.core.rust, storage.class.std.rust	#328c97	bold
storage.type.rust, storage.modifier.const.rust, storage.modifier.dyn.rust, storage.modifier.mut.rust, storage.modifier.static.rust, keyword.other.rust, keyword.other.where.rust	#df4168	bold
string	#998514	normal
string.unquoted.label	#747474	bold
string source	#747474	bold
string source punctuation.section.embedded, string punctuation.definition.string source	#939293	—
string.other.link.title, string.other.link.description	#df4168	bold
string.other.link.description.title	#328c97	bold
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end	#df4168	bold
string.other.ref, string.other.restructuredtext.ref	#088c31	bold
string.other.git-status.help.key	#919090	—
string.other.git-status.remote	#df4168	bold
support.constant	#328c97	bold
support.constant.handlebars	#939293	—
support.type.vendor-prefix.css	#919090	—
support.function	#088c31	bold
support.function.delimiter.elm	#939293	—
support.type, entity.name.type.object.console	#328c97	bold
support.variable	#328c97	bold
support.type.property-name	#747474	bold
support.class	#328c97	bold
support.constant.core.rust	#9347bf	bold
text	#747474	bold
text.find-in-files	#747474	bold
variable, variable.other	#747474	bold
variable.parameter, parameters variable.function	#ca7a52	bold italic
variable.language, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python	#919090	bold italic
variable.language.arguments	#9347bf	bold
variable.other.class	#328c97	bold
variable.other.constant	#9347bf	bold
variable.other.readwrite	#747474	bold
variable.other.member	#747474	bold
variable.other.enummember	#9347bf	bold
variable.other.property, variable.other.property.static, variable.other.event	#747474	bold
variable.function	#088c31	bold
variable.other.substitution	#ca7a52	bold
source.ruby variable.other.readwrite.instance.ruby, source.ruby variable.other.readwrite.class.ruby	#9347bf	bold
source.jinja2 variable.other.jinja2.block	#088c31	bold
source.jinja2 variable.other.jinja2	#ca7a52	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}!`;
}