Coldark

Name: Coldark
Author: Armand Philippot

Publisher: Armand PhilippotThemes in package: 2

A blue-grey theme with light & dark versions.

Open in VS Code GitHub

Color themes

VS Code preview

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

Coldark — Coldark - Cold

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#0b121b
activityBar.activeBorder#d0dae7
activityBar.activeFocusBorder#005a8e
activityBar.background#0b121b
activityBar.border#8da1b97a
activityBar.dropBorder#005a8e
activityBar.foreground#d0dae7
activityBar.inactiveForeground#d0dae7da
activityBarBadge.background#005a8e
activityBarBadge.foreground#e3eaf2
badge.background#005a8e
badge.foreground#e3eaf2
breadcrumb.activeSelectionForeground#111b27
breadcrumb.background#e3eaf24a
breadcrumb.focusForeground#111b27
breadcrumb.foreground#111b27ba
breadcrumbPicker.background#f0f4f8
button.background#005a8e
button.border#8da1b97a
button.foreground#e3eaf2
button.hoverBackground#005a8eca
button.secondaryBackground#8da1b9
button.secondaryForeground#111b27
checkbox.background#d0dae7da
checkbox.border#8da1b97a
checkbox.foreground#213043
contrastActiveBorder#8da1b900
contrastBorder#8da1b900
debugConsole.errorForeground#c22f2e
debugConsole.infoForeground#005a8e
debugConsole.sourceForeground#005a8e
debugConsole.warningForeground#a04900
debugConsoleInputIcon.foreground#006d6d
debugExceptionWidget.background#f0f4f8
debugExceptionWidget.border#8da1b97a
debugIcon.breakpointCurrentStackframeForeground#116b00
debugIcon.breakpointDisabledForeground#a04900
debugIcon.breakpointForeground#a04900
debugIcon.breakpointStackframeForeground#005a8e
debugIcon.breakpointUnverifiedForeground#7c00aa
debugIcon.continueForeground#005a8e
debugIcon.pauseForeground#005a8e
debugIcon.restartForeground#a04900
debugIcon.startForeground#116b00
debugIcon.stepBackForeground#755f00
debugIcon.stepIntoForeground#755f00
debugIcon.stepOutForeground#755f00
debugIcon.stepOverForeground#755f00
debugIcon.stopForeground#c22f2e
debugTokenExpression.boolean#755f00
debugTokenExpression.error#c22f2e
debugTokenExpression.name#005a8e
debugTokenExpression.number#755f00
debugTokenExpression.string#116b00
debugTokenExpression.value#af00af
debugToolBar.background#f0f4f8
debugToolBar.border#8da1b97a
debugView.stateLabelBackground#8da1b9ba
debugView.stateLabelForeground#0b121b
debugView.valueChangedHighlight#8da1b9
descriptionForeground#3c526d
diffEditor.border#8da1b97a
diffEditor.diagonalFill#8da1b97a
diffEditor.insertedLineBackground#116b001a
diffEditor.insertedTextBackground#116b001a
diffEditor.insertedTextBorder#116b001a
diffEditor.removedLineBackground#c22f2e1a
diffEditor.removedTextBackground#c22f2e1a
diffEditor.removedTextBorder#c22f2e1a
diffEditorGutter.insertedLineBackground#116b002a
diffEditorGutter.removedLineBackground#c22f2e2a
diffEditorOverview.insertedForeground#116b007a
diffEditorOverview.removedForeground#c22f2e7a
disabledForeground#3c526d
dropdown.background#d0dae7da
dropdown.border#8da1b97a
dropdown.foreground#213043
dropdown.listBackground#f0f4f8
editor.background#e3eaf2
editor.findMatchBackground#005a8e2a
editor.findMatchBorder#005a8e1a
editor.findMatchHighlightBackground#005a8e1a
editor.findMatchHighlightBorder#005a8e7a
editor.focusedStackFrameHighlightBackground#8da1b94a
editor.foldBackground#8da1b92a
editor.foreground#111b27
editor.hoverHighlightBackground#8da1b95a
editor.inactiveSelectionBackground#8da1b94a
editor.lineHighlightBackground#d0dae7da
editor.lineHighlightBorder#d0dae7
editor.linkedEditingBackground#d0dae7
editor.rangeHighlightBackground#d0dae7
editor.rangeHighlightBorder#d0dae7
editor.selectionBackground#8da1b98a
editor.selectionHighlightBackground#8da1b96a
editor.selectionHighlightBorder#8da1b96a
editor.snippetFinalTabstopHighlightBackground#8da1b93a
editor.snippetFinalTabstopHighlightBorder#8da1b9da
editor.snippetTabstopHighlightBackground#8da1b92a
editor.snippetTabstopHighlightBorder#8da1b9ba
editor.stackFrameHighlightBackground#8da1b94a
editor.symbolHighlightBackground#005a8e1a
editor.symbolHighlightBorder#005a8e7a
editor.wordHighlightBackground#8da1b94a
editor.wordHighlightBorder#8da1b97a
editor.wordHighlightStrongBackground#8da1b92a
editor.wordHighlightStrongBorder#8da1b9
editorBracketHighlight.foreground1#005a8e
editorBracketHighlight.foreground2#a04900
editorBracketHighlight.foreground3#af00af
editorBracketHighlight.foreground4#755f00
editorBracketHighlight.foreground5#006d6d
editorBracketHighlight.foreground6#7c00aa
editorBracketHighlight.unexpectedBracket.foreground#c22f2e
editorBracketMatch.background#005a8e1a
editorBracketMatch.border#005a8eda
editorCodeLens.foreground#3c526d
editorCursor.background#e3eaf2
editorCursor.foreground#111b27
editorError.background#c22f2e00
editorError.border#c22f2e00
editorError.foreground#c22f2e
editorGroup.border#8da1b97a
editorGroup.dropBackground#005a8e1a
editorGroup.emptyBackground#e3eaf2
editorGroup.focusedEmptyBorder#005a8e
editorGroupHeader.border#8da1b97a
editorGroupHeader.noTabsBackground#e3eaf2
editorGroupHeader.tabsBackground#d0dae77a
editorGroupHeader.tabsBorder#8da1b97a
editorGutter.addedBackground#116b00
editorGutter.background#d0dae77a
editorGutter.deletedBackground#c22f2e
editorGutter.foldingControlForeground#111b27
editorGutter.modifiedBackground#755f00
editorHint.border#755f0000
editorHint.foreground#755f00
editorHoverWidget.background#f0f4f8
editorHoverWidget.border#8da1b97a
editorHoverWidget.foreground#213043
editorHoverWidget.statusBarBackground#d0dae7da
editorIndentGuide.activeBackground#3c526d7a
editorIndentGuide.background#3c526d3a
editorInfo.background#005a8e00
editorInfo.border#005a8e00
editorInfo.foreground#005a8e
editorLightBulb.foreground#755f00
editorLightBulbAutoFix.foreground#755f00
editorLineNumber.activeForeground#3c526d
editorLineNumber.foreground#3c526dda
editorLink.activeForeground#005a8e
editorMarkerNavigation.background#f0f4f8
editorMarkerNavigationError.background#c22f2e
editorMarkerNavigationError.headerBackground#c22f2e2a
editorMarkerNavigationInfo.background#005a8e
editorMarkerNavigationInfo.headerBackground#005a8e2a
editorMarkerNavigationWarning.background#a04900
editorMarkerNavigationWarning.headerBackground#a049002a
editorOverviewRuler.addedForeground#116b00
editorOverviewRuler.background#e3eaf2
editorOverviewRuler.border#8da1b97a
editorOverviewRuler.bracketMatchForeground#005a8eda
editorOverviewRuler.commonContentForeground#005a8e
editorOverviewRuler.currentContentForeground#005a8eda
editorOverviewRuler.deletedForeground#c22f2e
editorOverviewRuler.errorForeground#c22f2e
editorOverviewRuler.findMatchForeground#005a8e7a
editorOverviewRuler.incomingContentForeground#006d6dda
editorOverviewRuler.infoForeground#005a8e
editorOverviewRuler.modifiedForeground#755f00
editorOverviewRuler.rangeHighlightForeground#d0dae7
editorOverviewRuler.selectionHighlightForeground#8da1b9
editorOverviewRuler.warningForeground#a04900
editorOverviewRuler.wordHighlightForeground#8da1b9
editorOverviewRuler.wordHighlightStrongForeground#3c526dda
editorPane.background#d0dae75a
editorRuler.foreground#3c526d3a
editorSuggestWidget.background#f0f4f8
editorSuggestWidget.border#8da1b97a
editorSuggestWidget.focusHighlightForeground#005a8e
editorSuggestWidget.foreground#213043
editorSuggestWidget.highlightForeground#005a8e
editorSuggestWidget.selectedBackground#d0dae7
editorSuggestWidget.selectedForeground#111b27
editorSuggestWidget.selectedIconForeground#111b27
editorUnnecessaryCode.border#3c526d2a
editorUnnecessaryCode.opacity#3c526dba
editorWarning.background#a0490000
editorWarning.border#a0490000
editorWarning.foreground#a04900
editorWhitespace.foreground#3c526d5a
editorWidget.background#f0f4f8
editorWidget.border#8da1b97a
editorWidget.foreground#213043
editorWidget.resizeBorder#8da1b9
errorForeground#c22f2e
extensionButton.prominentBackground#005a8e
extensionButton.prominentForeground#e3eaf2
extensionButton.prominentHoverBackground#005a8eca
extensionIcon.starForeground#a04900
focusBorder#005a8e
foreground#111b27
gitDecoration.addedResourceForeground#116b00
gitDecoration.conflictingResourceForeground#a04900
gitDecoration.deletedResourceForeground#c22f2e
gitDecoration.ignoredResourceForeground#3c526d
gitDecoration.modifiedResourceForeground#755f00
gitDecoration.stageDeletedResourceForeground#116b00
gitDecoration.stageModifiedResourceForeground#116b00
gitDecoration.submoduleResourceForeground#006d6d
gitDecoration.untrackedResourceForeground#af00af
gitlens.decorations.addedForegroundColor#116b00
gitlens.decorations.branchAheadForegroundColor#755f00
gitlens.decorations.branchMissingUpstreamForegroundColor#c22f2e
gitlens.decorations.branchUnpublishedForegroundColor#af00af
gitlens.decorations.branchUpToDateForegroundColor#116b00
gitlens.decorations.deletedForegroundColor#c22f2e
gitlens.decorations.modifiedForegroundColor#755f00
gitlens.decorations.renamedForegroundColor#005a8e
gitlens.decorations.untrackedForegroundColor#af00af
gitlens.gutterBackgroundColor#d0dae7
gitlens.gutterForegroundColor#213043
gitlens.gutterUncommittedForegroundColor#116b00
gitlens.lineHighlightBackgroundColor#d0dae77a
gitlens.lineHighlightOverviewRulerColor#8da1b9
gitlens.trailingLineBackgroundColor#8da1b95a
gitlens.trailingLineForegroundColor#213043ca
gitlens.unpublishedCommitIconColor#755f00
icon.foreground#111b27
input.background#d0dae7da
input.border#8da1b97a
input.foreground#213043
input.placeholderForeground#3c526d
inputOption.activeBackground#e3eaf27a
inputOption.activeBorder#005a8e
inputOption.activeForeground#005a8e
inputOption.hoverBackground#8da1b94a
inputValidation.errorBackground#f0f4f8
inputValidation.errorBorder#c22f2e
inputValidation.errorForeground#c22f2e
inputValidation.infoBackground#f0f4f8
inputValidation.infoBorder#005a8e
inputValidation.infoForeground#005a8e
inputValidation.warningBackground#f0f4f8
inputValidation.warningBorder#a04900
inputValidation.warningForeground#a04900
keybindingLabel.background#d0dae77a
keybindingLabel.border#8da1b97a
keybindingLabel.bottomBorder#8da1b9
keybindingLabel.foreground#111b27
list.activeSelectionBackground#8da1b95a
list.activeSelectionForeground#111b27
list.activeSelectionIconForeground#111b27
list.deemphasizedForeground#006d6d
list.dropBackground#005a8e1a
list.errorForeground#c22f2e
list.filterMatchBackground#005a8e2a
list.filterMatchBorder#005a8e7a
list.focusBackground#8da1b96a
list.focusForeground#111b27
list.focusHighlightForeground#005a8e
list.focusOutline#005a8e
list.highlightForeground#005a8e
list.hoverBackground#8da1b95a
list.hoverForeground#111b27
list.inactiveFocusBackground#8da1b94a
list.inactiveFocusOutline#8da1b97a
list.inactiveSelectionBackground#8da1b93a
list.inactiveSelectionForeground#111b27da
list.inactiveSelectionIconForeground#111b27da
list.invalidItemForeground#c22f2e
list.warningForeground#a04900
listFilterWidget.background#f0f4f8
listFilterWidget.noMatchesOutline#c22f2e
listFilterWidget.outline#8da1b9
menu.background#f0f4f8
menu.border#8da1b9
menu.foreground#213043
menu.selectionBackground#8da1b93a
menu.selectionBorder#8da1b97a
menu.selectionForeground#111b27
menu.separatorBackground#8da1b9
menubar.selectionBackground#8da1b95a
menubar.selectionBorder#8da1b900
menubar.selectionForeground#111b27
merge.border#8da1b97a
merge.currentContentBackground#005a8e2a
merge.currentHeaderBackground#005a8e5a
merge.incomingContentBackground#006d6d2a
merge.incomingHeaderBackground#006d6d5a
minimap.background#e3eaf2
minimap.errorHighlight#c22f2e
minimap.findMatchHighlight#005a8e
minimap.foregroundOpacity#111b27e0
minimap.selectionHighlight#8da1b9
minimap.selectionOccurrenceHighlight#005a8e5a
minimap.warningHighlight#a04900
minimapGutter.addedBackground#116b00
minimapGutter.deletedBackground#c22f2e
minimapGutter.modifiedBackground#755f00
minimapSlider.activeBackground#8da1b98a
minimapSlider.background#8da1b94a
minimapSlider.hoverBackground#8da1b97a
notificationCenter.border#8da1b97a
notificationCenterHeader.background#f0f4f8
notificationCenterHeader.foreground#213043
notificationLink.foreground#005a8e
notifications.background#f0f4f8
notifications.border#8da1b97a
notifications.foreground#213043
notificationsErrorIcon.foreground#c22f2e
notificationsInfoIcon.foreground#005a8e
notificationsWarningIcon.foreground#a04900
notificationToast.border#8da1b97a
panel.background#e3eaf2
panel.border#8da1b97a
panel.dropBorder#005a8e
panelTitle.activeBorder#111b27
panelTitle.activeForeground#111b27
panelTitle.inactiveForeground#111b27
peekView.border#8da1b97a
peekViewEditor.background#f0f4f87a
peekViewEditor.matchHighlightBackground#005a8e3a
peekViewEditor.matchHighlightBorder#005a8e00
peekViewEditorGutter.background#d0dae71a
peekViewResult.background#d0dae75a
peekViewResult.fileForeground#213043
peekViewResult.lineForeground#213043
peekViewResult.matchHighlightBackground#005a8e2a
peekViewResult.selectionBackground#8da1b95a
peekViewResult.selectionForeground#111b27
peekViewTitle.background#d0dae7
peekViewTitleDescription.foreground#213043
peekViewTitleLabel.foreground#0b121b
pickerGroup.border#005a8e
pickerGroup.foreground#005a8e
problemsErrorIcon.foreground#c22f2e
problemsInfoIcon.foreground#005a8e
problemsWarningIcon.foreground#a04900
progressBar.background#005a8e
quickInput.background#f0f4f8
quickInput.foreground#213043
quickInputList.focusBackground#8da1b96a
quickInputList.focusForeground#111b27
quickInputList.focusIconForeground#111b27
quickInputTitle.background#8da1b94a
sash.hoverBorder#8da1b95a
scrollbar.shadow#111b275a
scrollbarSlider.activeBackground#8da1b98a
scrollbarSlider.background#8da1b94a
scrollbarSlider.hoverBackground#8da1b97a
searchEditor.findMatchBackground#005a8e1a
searchEditor.findMatchBorder#005a8e7a
searchEditor.textInputBorder#8da1b97a
selection.background#005a8e5a
settings.checkboxBackground#d0dae7da
settings.checkboxBorder#8da1b97a
settings.checkboxForeground#213043
settings.dropdownBackground#d0dae7da
settings.dropdownBorder#8da1b97a
settings.dropdownForeground#213043
settings.dropdownListBorder#8da1b97a
settings.focusedRowBackground#d0dae78a
settings.focusedRowBorder#8da1b97a
settings.headerBorder#8da1b97a
settings.headerForeground#111b27
settings.modifiedItemIndicator#755f00
settings.numberInputBackground#d0dae7da
settings.numberInputBorder#8da1b97a
settings.numberInputForeground#213043
settings.rowHoverBackground#d0dae77a
settings.sashBorder#8da1b97a
settings.textInputBackground#d0dae7da
settings.textInputBorder#8da1b97a
settings.textInputForeground#213043
sideBar.background#e3eaf2
sideBar.border#8da1b97a
sideBar.dropBackground#005a8e1a
sideBar.foreground#111b27
sideBarSectionHeader.background#8da1b94a
sideBarSectionHeader.border#8da1b97a
sideBarSectionHeader.foreground#213043
sideBarTitle.foreground#111b27
sideBySideEditor.horizontalBorder#8da1b97a
sideBySideEditor.verticalBorder#8da1b97a
statusBar.background#005a8e
statusBar.border#8da1b97a
statusBar.debuggingBackground#a04900
statusBar.debuggingBorder#8da1b97a
statusBar.debuggingForeground#e3eaf2
statusBar.foreground#e3eaf2
statusBar.noFolderBackground#8da1b97a
statusBar.noFolderBorder#8da1b97a
statusBar.noFolderForeground#111b27
statusBarItem.activeBackground#8da1b97a
statusBarItem.hoverBackground#8da1b95a
statusBarItem.prominentBackground#8da1b9ba
statusBarItem.prominentForeground#111b27
statusBarItem.prominentHoverBackground#e3eaf27a
symbolIcon.arrayForeground#3c526d
symbolIcon.booleanForeground#3c526d
symbolIcon.classForeground#3c526d
symbolIcon.colorForeground#3c526d
symbolIcon.constantForeground#3c526d
symbolIcon.constructorForeground#3c526d
symbolIcon.enumeratorForeground#3c526d
symbolIcon.enumeratorMemberForeground#3c526d
symbolIcon.eventForeground#3c526d
symbolIcon.fieldForeground#3c526d
symbolIcon.fileForeground#3c526d
symbolIcon.folderForeground#3c526d
symbolIcon.functionForeground#3c526d
symbolIcon.interfaceForeground#3c526d
symbolIcon.keyForeground#3c526d
symbolIcon.keywordForeground#3c526d
symbolIcon.methodForeground#3c526d
symbolIcon.moduleForeground#3c526d
symbolIcon.namespaceForeground#3c526d
symbolIcon.nullForeground#3c526d
symbolIcon.numberForeground#3c526d
symbolIcon.objectForeground#3c526d
symbolIcon.operatorForeground#3c526d
symbolIcon.packageForeground#3c526d
symbolIcon.propertyForeground#3c526d
symbolIcon.referenceForeground#3c526d
symbolIcon.snippetForeground#3c526d
symbolIcon.stringForeground#3c526d
symbolIcon.structForeground#3c526d
symbolIcon.textForeground#3c526d
symbolIcon.typeParameterForeground#3c526d
symbolIcon.unitForeground#3c526d
symbolIcon.variableForeground#3c526d
tab.activeBackground#f0f4f8
tab.activeBorder#005a8e
tab.activeBorderTop#005a8e
tab.activeForeground#213043da
tab.activeModifiedBorder#755f00
tab.border#8da1b97a
tab.hoverBackground#f0f4f8
tab.hoverBorder#8da1b97a
tab.hoverForeground#213043
tab.inactiveBackground#e3eaf2
tab.inactiveForeground#111b27ba
tab.inactiveModifiedBorder#755f00
tab.lastPinnedBorder#8da1b9
tab.unfocusedActiveBackground#f0f4f8ba
tab.unfocusedActiveBorder#005a8e
tab.unfocusedActiveBorderTop#005a8e
tab.unfocusedActiveForeground#213043ba
tab.unfocusedActiveModifiedBorder#755f00
tab.unfocusedHoverBackground#f0f4f8
tab.unfocusedHoverBorder#8da1b97a
tab.unfocusedHoverForeground#213043
tab.unfocusedInactiveBackground#e3eaf2ba
tab.unfocusedInactiveForeground#111b279a
tab.unfocusedInactiveModifiedBorder#755f00
terminal.ansiBlack#e3eaf2
terminal.ansiBlue#005a8e
terminal.ansiBrightBlack#3c526d
terminal.ansiBrightBlue#005a8e
terminal.ansiBrightCyan#006d6d
terminal.ansiBrightGreen#116b00
terminal.ansiBrightMagenta#af00af
terminal.ansiBrightRed#c22f2e
terminal.ansiBrightWhite#0b121b
terminal.ansiBrightYellow#755f00
terminal.ansiCyan#006d6d
terminal.ansiGreen#116b00
terminal.ansiMagenta#af00af
terminal.ansiRed#c22f2e
terminal.ansiWhite#111b27
terminal.ansiYellow#755f00
terminal.background#e3eaf2
terminal.border#8da1b97a
terminal.dropBackground#005a8e1a
terminal.findMatchBackground#005a8e1a
terminal.findMatchBorder#005a8e1a
terminal.findMatchHighlightBackground#005a8e1a
terminal.findMatchHighlightBorder#005a8e7a
terminal.foreground#111b27
terminal.selectionBackground#8da1b9
terminal.tab.activeBorder#005a8e
terminalCursor.background#e3eaf2
terminalCursor.foreground#111b27
terminalOverviewRuler.cursorForeground#8da1b9
terminalOverviewRuler.findMatchForeground#005a8e7a
textBlockQuote.background#f0f4f8
textBlockQuote.border#005a8e
textCodeBlock.background#8da1b95a
textLink.activeForeground#005a8eba
textLink.foreground#005a8e
textPreformat.foreground#a04900
titleBar.activeBackground#d0dae7
titleBar.activeForeground#213043
titleBar.border#8da1b97a
titleBar.inactiveBackground#d0dae7ba
titleBar.inactiveForeground#213043ba
toolbar.activeBackground#005a8e3a
toolbar.hoverBackground#8da1b94a
toolbar.hoverOutline#8da1b97a
tree.indentGuidesStroke#3c526d5a
walkThrough.embeddedEditorBackground#f0f4f8
welcomePage.background#e3eaf2
welcomePage.progress.background#d0dae7
welcomePage.progress.foreground#8da1b97a
welcomePage.tileBackground#f0f4f8
welcomePage.tileHoverBackground#8da1b95a
widget.shadow#111b275a
window.activeBorder#8da1b97a
window.inactiveBorder#8da1b9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
strong, markup.bold	—	bold
emphasis, markup.italic	—	italic
comment	#3c526d	—
constant.character	#af00af	—
constant.character.escape	#af00af	—
constant.language	#755f00	—
constant.numeric	#755f00	—
constant.other	#005a8e	—
constant.other.color	#116b00	—
constant.other.color punctuation.definition	#116b00	—
constant.regexp	#af00af	—
entity.name.function	#7c00aa	—
entity.name.namespace	#005a8e	—
entity.name.section.group-title	#005a8e	—
entity.name.tag	#006d6d	—
entity.name.type	#005a8e	—
entity.name.type.class	#005a8e	—
entity.name.type.instance	#af00af	—
entity.name.type.namespace	#005a8e	—
entity.name.variable.parameter	#006d6d	—
entity.other.attribute-name.pseudo-class	#a04900	—
entity.other.attribute-name.pseudo-element	#a04900	—
entity.other.attribute-name	#755f00	—
entity.other.inherited-class	#005a8e	bold
invalid	#c22f2e	—
keyword	#a04900	—
keyword.other.doctype	#006d6d	—
keyword.other.type	#af00af	—
markup.changed	#755f00	—
markup.deleted	#c22f2e	—
markup.fenced_code.block fenced_code.block.language	#7c00aa	—
markup.fenced_code.block punctuation.definition	#006d6d	—
markup.heading	#005a8e	bold
markup.inline.raw	#006d6d	—
markup.inserted	#116b00	—
markup.italic markup.bold, markup.bold markup.italic	—	italic bold
markup.list punctuation.definition.list	#af00af	—
markup.quote	—	italic
markup.quote punctuation.definition.quote	#af00af	—
markup.underline.link	#755f00	—
meta.diff.header	#005a8e	—
meta.diff.header punctuation.definition.from-file	#c22f2e	—
meta.diff.header punctuation.definition.to-file	#116b00	—
meta.diff.index	#3c526d	—
meta.diff.range	#7c00aa	—
meta.diff.range punctuation.definition.range	#7c00aa	—
meta.function-call	#7c00aa	—
meta.function-call.arguments	#006d6d	—
meta.function support.function.magic	#7c00aa	—
meta.object-literal.key	#006d6d	—
meta.property-name support.type.property-name	#005a8e	—
meta.scope.prerequisites	#a04900	—
meta.scope.recipe	#006d6d	—
meta.tag.sgml.doctype	#006d6d	—
punctuation	#111b27	—
punctuation.definition.comment	#3c526d	—
punctuation.definition.heading	#005a8e	—
punctuation.definition.keyword	#a04900	—
punctuation.definition.tag	#006d6d	—
punctuation.definition.variable	#005a8e	—
punctuation.section.embedded	#006d6d	—
punctuation.section.tag	#006d6d	—
storage.modifier	#af00af	—
storage.type	#a04900	—
storage.type punctuation.definition	#a04900	—
storage.type.modifier	#af00af	—
string	#116b00	—
string.quoted punctuation.definition.string	#116b00	—
string.regexp	#af00af	—
support.constant	#006d6d	—
support.constant.font-name	#116b00	—
support.class	#af00af	—
support.function	#af00af	—
support.type	#af00af	—
support.type.property-name	#005a8e	—
support.type.vendored.property-name	#005a8eca	—
support.variable	#005a8e	—
support.variable.property	#af00af	—
variable.language	#005a8e	bold
variable.object	#006d6d	—
variable.other	#005a8e	—
variable.parameter	#006d6d	—
source.css entity.other.attribute-name.class, source.css entity.other.attribute-name.class punctuation	#7c00aa	—
source.css entity.other.attribute-name.id, source.css entity.other.attribute-name.id punctuation	#7c00aa	—
source.css meta.attribute-selector	#116b00	—
source.css meta.property-name	#005a8e	—
source.css support.constant.property-value	#af00af	—
source.css variable	#006d6d	—
meta.separator.markdown	#005a8e	—
source.rust meta.attribute	#006d6d	—
source.shell comment.line.number-sign.shebang	#006d6d	—
source.shell meta.scope.case-pattern	#755f00	—
source.shell punctuation.definition.comment.shebang	#006d6d	—
source.shell punctuation.terminator.case-clause	#a04900	—
source.yaml entity.name.tag	#005a8e	—

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