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

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
strong, markup.bold	—	bold
emphasis, markup.italic	—	italic
comment	#8da1b9	—
constant.character	#f4adf4	—
constant.character.escape	#f4adf4	—
constant.language	#e6d37a	—
constant.numeric	#e6d37a	—
constant.other	#6cb8e6	—
constant.other.color	#91d076	—
constant.other.color punctuation.definition	#91d076	—
constant.regexp	#f4adf4	—
entity.name.function	#c699e3	—
entity.name.namespace	#6cb8e6	—
entity.name.section.group-title	#6cb8e6	—
entity.name.tag	#66cccc	—
entity.name.type	#6cb8e6	—
entity.name.type.class	#6cb8e6	—
entity.name.type.instance	#f4adf4	—
entity.name.type.namespace	#6cb8e6	—
entity.name.variable.parameter	#66cccc	—
entity.other.attribute-name.pseudo-class	#e9ae7e	—
entity.other.attribute-name.pseudo-element	#e9ae7e	—
entity.other.attribute-name	#e6d37a	—
entity.other.inherited-class	#6cb8e6	bold
invalid	#cd6660	—
keyword	#e9ae7e	—
keyword.other.doctype	#66cccc	—
keyword.other.type	#f4adf4	—
markup.changed	#e6d37a	—
markup.deleted	#cd6660	—
markup.fenced_code.block fenced_code.block.language	#c699e3	—
markup.fenced_code.block punctuation.definition	#66cccc	—
markup.heading	#6cb8e6	bold
markup.inline.raw	#66cccc	—
markup.inserted	#91d076	—
markup.italic markup.bold, markup.bold markup.italic	—	italic bold
markup.list punctuation.definition.list	#f4adf4	—
markup.quote	—	italic
markup.quote punctuation.definition.quote	#f4adf4	—
markup.underline.link	#e6d37a	—
meta.diff.header	#6cb8e6	—
meta.diff.header punctuation.definition.from-file	#cd6660	—
meta.diff.header punctuation.definition.to-file	#91d076	—
meta.diff.index	#8da1b9	—
meta.diff.range	#c699e3	—
meta.diff.range punctuation.definition.range	#c699e3	—
meta.function-call	#c699e3	—
meta.function-call.arguments	#66cccc	—
meta.function support.function.magic	#c699e3	—
meta.object-literal.key	#66cccc	—
meta.property-name support.type.property-name	#6cb8e6	—
meta.scope.prerequisites	#e9ae7e	—
meta.scope.recipe	#66cccc	—
meta.tag.sgml.doctype	#66cccc	—
punctuation	#e3eaf2	—
punctuation.definition.comment	#8da1b9	—
punctuation.definition.heading	#6cb8e6	—
punctuation.definition.keyword	#e9ae7e	—
punctuation.definition.tag	#66cccc	—
punctuation.definition.variable	#6cb8e6	—
punctuation.section.embedded	#66cccc	—
punctuation.section.tag	#66cccc	—
storage.modifier	#f4adf4	—
storage.type	#e9ae7e	—
storage.type punctuation.definition	#e9ae7e	—
storage.type.modifier	#f4adf4	—
string	#91d076	—
string.quoted punctuation.definition.string	#91d076	—
string.regexp	#f4adf4	—
support.constant	#66cccc	—
support.constant.font-name	#91d076	—
support.class	#f4adf4	—
support.function	#f4adf4	—
support.type	#f4adf4	—
support.type.property-name	#6cb8e6	—
support.type.vendored.property-name	#6cb8e6ca	—
support.variable	#6cb8e6	—
support.variable.property	#f4adf4	—
variable.language	#6cb8e6	bold
variable.object	#66cccc	—
variable.other	#6cb8e6	—
variable.parameter	#66cccc	—
source.css entity.other.attribute-name.class, source.css entity.other.attribute-name.class punctuation	#c699e3	—
source.css entity.other.attribute-name.id, source.css entity.other.attribute-name.id punctuation	#c699e3	—
source.css meta.attribute-selector	#91d076	—
source.css meta.property-name	#6cb8e6	—
source.css support.constant.property-value	#f4adf4	—
source.css variable	#66cccc	—
meta.separator.markdown	#6cb8e6	—
source.rust meta.attribute	#66cccc	—
source.shell comment.line.number-sign.shebang	#66cccc	—
source.shell meta.scope.case-pattern	#e6d37a	—
source.shell punctuation.definition.comment.shebang	#66cccc	—
source.shell punctuation.terminator.case-clause	#e9ae7e	—
source.yaml entity.name.tag	#6cb8e6	—

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