Adam

Name: Adam
Author: Ricardo Brito

Publisher: Ricardo BritoThemes in package: 2

Adam is a minimalist and elegant theme with a built-in icon pack.

Open in VS Code GitHub

Color themes

VS Code preview

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

Adam — Eve

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#FCFCFD
activityBar.activeBorder#9393A8
activityBar.activeFocusBorder#9393A8
activityBar.background#FCFCFD
activityBar.border#F3F3F4
activityBar.dropBorder#FCFCFD
activityBar.foreground#9393A8
activityBar.inactiveForeground#AFAEC3
activityBarBadge.background#9393A8
activityBarBadge.foreground#FCFCFD
activityBarItem.profilesBackground#F7F7F8
activityBarItem.profilesForeground#9393A8
activityBarItem.profilesHoverForeground#787892
badge.background#9393A8
badge.foreground#FCFCFD
banner.background#FCFCFD
banner.foreground#F7F7F8
banner.iconForeground#9393A8
breadcrumb.activeSelectionForeground#787892
breadcrumb.background#FCFCFD
breadcrumb.focusForeground#787892
breadcrumb.foreground#AFAEC3
breadcrumbPicker.background#FCFCFD
button.background#B1B2FF20
button.border#B1B2FF60
button.foreground#B1B2FF
button.hoverBackground#B1B2FF50
button.separator#B1B2FF30
charts.blue#8DDDFF
charts.foreground#9393A8
charts.green#79F391
charts.lines#FCFCFD
charts.orange#FFAF8D
charts.purple#B1B2FF
charts.red#f7768e
charts.yellow#FFDB89
checkbox.background#F7F7F8
checkbox.border#F7F7F8
checkbox.foreground#9393A8
checkbox.selectBackground#79F39120
checkbox.selectBorder#79F39160
commandCenter.activeBackground#F7F7F8
commandCenter.activeBorder#F3F3F4
commandCenter.activeForeground#9393A8
commandCenter.background#F7F7F8
commandCenter.border#F3F3F4
commandCenter.foreground#AFAEC3
commandCenter.inactiveBorder#F3F3F4
commandCenter.inactiveForeground#AFAEC3
contrastActiveBorder#FCFCFD10
contrastBorder#FCFCFD10
debugConsole.errorForeground#f7768e
debugConsole.infoForeground#8DDDFF
debugConsole.sourceForeground#79F391
debugConsole.warningForeground#FFAF8D
debugConsoleInputIcon.foreground#9393A8
debugExceptionWidget.background#f7768e
debugIcon.breakpointCurrentStackframeForeground#f7768e
debugIcon.breakpointDisabledForeground#f7768e40
debugIcon.breakpointForeground#f7768e
debugIcon.breakpointStackframeForeground#f7768e
debugIcon.breakpointUnverifiedForeground#f7768e70
debugIcon.continueForeground#9393A8
debugIcon.disconnectForeground#AFAEC3
debugIcon.pauseForeground#9393A8
debugIcon.restartForeground#79F391
debugIcon.startForeground#9393A8
debugIcon.stepBackForeground#9393A8
debugIcon.stepIntoForeground#9393A8
debugIcon.stepOutForeground#9393A8
debugIcon.stepOverForeground#9393A8
debugIcon.stopForeground#f7768e
debugToolBar.background#FCFCFD
debugToolBar.border#F3F3F4
descriptionForeground#AFAEC3
diffEditor.border#F3F3F4
diffEditor.diagonalFill#FCFCFD
diffEditor.insertedLineBackground#79F39130
diffEditor.insertedTextBackground#79F39130
diffEditor.removedLineBackground#f7768e30
diffEditor.removedTextBackground#f7768e30
diffEditorGutter.insertedLineBackground#79F39130
diffEditorGutter.removedLineBackground#f7768e30
diffEditorOverview.insertedForeground#79F39130
diffEditorOverview.removedForeground#f7768e30
disabledForeground#AFAEC3
dropdown.background#F7F7F8
dropdown.border#F0F0F2
dropdown.foreground#9393A8
dropdown.listBackground#F7F7F8
editor.background#FCFCFD
editor.findMatchBackground#F7F7F870
editor.findMatchBorder#F7F7F890
editor.findMatchHighlightBackground#F7F7F870
editor.findMatchHighlightBorder#F7F7F890
editor.foldBackground#F7F7F890
editor.hoverHighlightBackground#F7F7F890
editor.inactiveSelectionBackground#F7F7F880
editor.lineHighlightBackground#9393A820
editor.lineHighlightBorder#9393A880
editor.rangeHighlightBackground#F7F7F890
editor.selectionBackground#F7F7F8
editor.selectionForeground#787892
editor.selectionHighlightBackground#F7F7F860
editor.selectionHighlightBorder#F7F7F890
editor.snippetFinalTabstopHighlightBackground#F7F7F8
editor.snippetFinalTabstopHighlightBorder#F3F3F4
editor.snippetTabstopHighlightBackground#F7F7F8
editor.snippetTabstopHighlightBorder#F3F3F4
editor.wordHighlightBackground#F7F7F890
editor.wordHighlightBorder#F7F7F890
editor.wordHighlightStrongBackground#F7F7F890
editor.wordHighlightStrongBorder#F7F7F890
editorBracketHighlight.foreground1#9393A8
editorBracketHighlight.foreground2#9393A8
editorBracketHighlight.foreground3#9393A8
editorBracketHighlight.foreground4#9393A8
editorBracketHighlight.foreground5#9393A8
editorBracketHighlight.foreground6#9393A8
editorBracketHighlight.unexpectedBracket.foreground#9393A8
editorBracketMatch.background#F7F7F8
editorBracketMatch.border#FCFCFD
editorCodeLens.foreground#9393A8
editorCursor.background#f7768e
editorCursor.foreground#9393A8
editorError.background#FCFCFD
editorError.border#FCFCFD
editorError.foreground#f7768e
editorGhostText.background#FCFCFD
editorGhostText.foreground#AFAEC3
editorGroup.border#F3F3F4
editorGroup.dropBackground#F7F7F8
editorGroup.dropIntoPromptBackground#F7F7F8
editorGroup.dropIntoPromptBorder#F3F3F4
editorGroup.dropIntoPromptForeground#9393A8
editorGroup.emptyBackground#FCFCFD
editorGroup.focusedEmptyBorder#FCFCFD
editorGroupHeader.border#F3F3F4
editorGroupHeader.noTabsBackground#F7F7F8
editorGroupHeader.tabsBackground#FCFCFD
editorGroupHeader.tabsBorder#F3F3F4
editorGutter.addedBackground#79F391
editorGutter.background#FCFCFD
editorGutter.commentRangeForeground#9393A830
editorGutter.deletedBackground#f7768e
editorGutter.foldingControlForeground#AFAEC3
editorGutter.modifiedBackground#9393A830
editorHint.foreground#AFAEC3
editorHoverWidget.background#FCFCFD
editorHoverWidget.border#F3F3F4
editorHoverWidget.foreground#9393A8
editorIndentGuide.activeBackground#F3F3F4
editorIndentGuide.background#AFAEC3
editorInfo.background#FCFCFD
editorInfo.border#FCFCFD
editorInfo.foreground#8DDDFF
editorInlayHint.background#F7F7F8
editorInlayHint.foreground#B1B2FF
editorInlayHint.parameterBackground#F7F7F8
editorInlayHint.parameterForeground#B1B2FF
editorInlayHint.typeBackground#F7F7F8
editorInlayHint.typeForeground#B1B2FF
editorLightBulb.foreground#9393A8
editorLightBulbAutoFix.foreground#9393A8
editorLineNumber.activeForeground#787892
editorLineNumber.foreground#AFAEC3
editorLink.activeForeground#B1B2FF
editorMarkerNavigation.background#FCFCFD
editorMarkerNavigationError.background#f7768e
editorMarkerNavigationError.headerBackground#FCFCFD
editorMarkerNavigationInfo.background#8DDDFF
editorMarkerNavigationInfo.headerBackground#FCFCFD
editorMarkerNavigationWarning.background#FFAF8D
editorMarkerNavigationWarning.headerBackground#FCFCFD
editorOverviewRuler.addedForeground#79F391
editorOverviewRuler.background#FCFCFD
editorOverviewRuler.border#F3F3F4
editorOverviewRuler.bracketMatchForeground#F7F7F8
editorOverviewRuler.deletedForeground#f7768e
editorOverviewRuler.errorForeground#f7768e
editorOverviewRuler.findMatchForeground#9393A8
editorOverviewRuler.infoForeground#8DDDFF
editorOverviewRuler.modifiedForeground#9393A8
editorOverviewRuler.selectionHighlightForeground#F7F7F8
editorOverviewRuler.warningForeground#FFAF8D
editorPane.background#FCFCFD
editorRuler.foreground#F3F3F4
editorStickyScroll.background#FCFCFD
editorStickyScrollHover.background#FCFCFD
editorSuggestWidget.background#FCFCFD
editorSuggestWidget.border#F3F3F4
editorSuggestWidget.focusHighlightForeground#9393A8
editorSuggestWidget.foreground#AFAEC3
editorSuggestWidget.highlightForeground#9393A8
editorSuggestWidget.selectedBackground#F7F7F8
editorSuggestWidget.selectedForeground#9393A8
editorSuggestWidget.selectedIconForeground#9393A8
editorUnnecessaryCode.border#FFAF8D
editorUnnecessaryCode.opacity#9393A860
editorWarning.background#FCFCFD
editorWarning.border#FCFCFD
editorWarning.foreground#FFAF8D
editorWhitespace.foreground#AFAEC3
editorWidget.background#FCFCFD
editorWidget.foreground#AFAEC3
editorWidget.resizeBorder#9393A890
errorForeground#f7768e
extensionBadge.remoteBackground#9393A8
extensionBadge.remoteForeground#FCFCFD
extensionButton.background#F7F7F8
extensionButton.foreground#787892
extensionButton.hoverBackground#9393A818
extensionButton.prominentBackground#F7F7F8
extensionButton.prominentForeground#787892
extensionButton.prominentHoverBackground#9393A818
extensionButton.separator#F0F0F2
extensionIcon.preReleaseForeground#79F391
extensionIcon.sponsorForeground#FF80BF
extensionIcon.starForeground#FFDB89
extensionIcon.verifiedForeground#8DDDFF
focusBorder#FCFCFD
foreground#787892
gitDecoration.addedResourceForeground#79F391
gitDecoration.conflictingResourceForeground#B1B2FF
gitDecoration.deletedResourceForeground#f7768e
gitDecoration.ignoredResourceForeground#AFAEC3
gitDecoration.modifiedResourceForeground#9393A8
gitDecoration.renamedResourceForeground#9393A8
gitDecoration.stageDeletedResourceForeground#f7768e
gitDecoration.stageModifiedResourceForeground#9393A8
gitDecoration.submoduleResourceForeground#9393A8
gitDecoration.untrackedResourceForeground#9393A8
icon.foreground#AFAEC3
input.background#F7F7F8
input.border#9393A818
input.foreground#9393A8
input.placeholderForeground#AFAEC3
inputOption.activeBackground#9393A818
inputOption.activeBorder#F0F0F2
inputOption.activeForeground#9393A8
inputOption.hoverBackground#9393A818
inputValidation.errorBackground#f7768e50
inputValidation.errorBorder#f7768e90
inputValidation.errorForeground#f7768e
inputValidation.infoBackground#8DDDFF50
inputValidation.infoBorder#8DDDFF90
inputValidation.infoForeground#8DDDFF
inputValidation.warningBackground#FFAF8D50
inputValidation.warningBorder#FFAF8D90
inputValidation.warningForeground#FFAF8D
keybindingLabel.background#F7F7F8
keybindingLabel.border#F7F7F8
keybindingLabel.bottomBorder#F7F7F8
keybindingLabel.foreground#9393A8
keybindingTable.headerBackground#F7F7F8
keybindingTable.rowsBackground#F7F7F8
list.activeSelectionBackground#F7F7F8
list.activeSelectionForeground#787892
list.activeSelectionIconForeground#787892
list.deemphasizedForeground#9393A8
list.dropBackground#F7F7F8
list.errorForeground#f7768e
list.filterMatchBackground#F7F7F8
list.filterMatchBorder#F7F7F8
list.focusAndSelectionOutline#F7F7F8
list.focusBackground#F7F7F8
list.focusForeground#9393A8
list.focusHighlightForeground#9393A8
list.focusOutline#F7F7F8
list.highlightForeground#79F391
list.hoverBackground#F7F7F8
list.hoverForeground#787892
list.inactiveFocusBackground#FCFCFD
list.inactiveFocusOutline#FCFCFD
list.inactiveSelectionBackground#FCFCFD
list.inactiveSelectionForeground#9393A8
list.inactiveSelectionIconForeground#9393A8
list.invalidItemForeground#FFDB89
list.warningForeground#FFAF8D
listFilterWidget.background#FCFCFD
listFilterWidget.noMatchesOutline#f7768e
listFilterWidget.outline#F3F3F4
listFilterWidget.shadow#F0F0F2
menu.separatorBackground#F3F3F4
minimap.background#FCFCFD
minimap.errorHighlight#f7768e
minimap.findMatchHighlight#9393A830
minimap.foregroundOpacity#9393A870
minimap.selectionHighlight#9393A850
minimap.selectionOccurrenceHighlight#9393A830
minimap.warningHighlight#FFAF8D
minimapGutter.addedBackground#79F391
minimapGutter.deletedBackground#f7768e
minimapGutter.modifiedBackground#9393A8
minimapSlider.activeBackground#9393A810
minimapSlider.background#9393A810
minimapSlider.hoverBackground#9393A810
notificationCenter.border#F3F3F4
notificationCenterHeader.background#F7F7F8
notificationCenterHeader.foreground#787892
notificationLink.foreground#AFAEC3
notifications.background#FCFCFD
notifications.border#F3F3F4
notifications.foreground#787892
notificationsErrorIcon.foreground#f7768e
notificationsInfoIcon.foreground#8DDDFF
notificationsWarningIcon.foreground#FFAF8D
notificationToast.border#F3F3F4
panel.background#FCFCFD
panel.border#F3F3F4
panel.dropBorder#F7F7F8
panelInput.border#F0F0F2
panelSection.border#F3F3F4
panelTitle.activeBorder#9393A890
panelTitle.activeForeground#9393A8
panelTitle.inactiveForeground#AFAEC3
peekView.border#F3F3F4
peekViewEditor.background#F7F7F8
peekViewEditor.matchHighlightBackground#F7F7F8
peekViewEditor.matchHighlightBorder#F7F7F8
peekViewEditorGutter.background#9393A860
peekViewResult.background#F7F7F8
peekViewResult.fileForeground#787892
peekViewResult.lineForeground#787892
peekViewResult.matchHighlightBackground#F3F3F4
peekViewResult.selectionBackground#F3F3F4
peekViewResult.selectionForeground#787892
peekViewTitle.background#F7F7F8
peekViewTitleDescription.foreground#787892
peekViewTitleLabel.foreground#9393A8
pickerGroup.border#F3F3F4
pickerGroup.foreground#9393A8
problemsErrorIcon.foreground#f7768e
problemsInfoIcon.foreground#8DDDFF
problemsWarningIcon.foreground#FFAF8D
profileBadge.background#9393A8
profileBadge.foreground#FCFCFD
progressBar.background#9393A8
sash.hoverBorder#F7F7F8
scm.providerBorder#F3F3F4
scrollbar.shadow#FCFCFD
scrollbarSlider.activeBackground#F7F7F8
scrollbarSlider.background#F7F7F8
scrollbarSlider.hoverBackground#F7F7F8
searchEditor.findMatchBackground#F7F7F8
searchEditor.findMatchBorder#F7F7F8
searchEditor.textInputBorder#8DDDFF
selection.background#F7F7F8
settings.checkboxBackground#F7F7F8
settings.checkboxBorder#F3F3F4
settings.checkboxForeground#AFAEC3
settings.dropdownBackground#F7F7F8
settings.dropdownBorder#F3F3F4
settings.dropdownForeground#787892
settings.dropdownListBorder#F3F3F4
settings.focusedRowBackground#F7F7F8
settings.focusedRowBorder#F3F3F4
settings.headerBorder#F3F3F4
settings.headerForeground#787892
settings.modifiedItemIndicator#9393A850
settings.numberInputBackground#F7F7F8
settings.numberInputBorder#F3F3F4
settings.numberInputForeground#787892
settings.rowHoverBackground#F7F7F8
settings.sashBorder#F3F3F4
settings.textInputBackground#F7F7F8
settings.textInputBorder#F3F3F4
settings.textInputForeground#787892
sideBar.background#FCFCFD
sideBar.border#F3F3F4
sideBar.dropBackground#FCFCFD
sideBar.foreground#9393A8
sideBarSectionHeader.background#F7F7F8
sideBarSectionHeader.border#F7F7F8
sideBarSectionHeader.foreground#9393A8
sideBarTitle.foreground#9393A8
sideBySideEditor.horizontalBorder#F3F3F4
sideBySideEditor.verticalBorder#F3F3F4
statusBar.background#FCFCFD
statusBar.border#F3F3F4
statusBar.debuggingBackground#FCFCFD
statusBar.debuggingBorder#F3F3F4
statusBar.debuggingForeground#9393A8
statusBar.foreground#9393A8
statusBar.noFolderBackground#FCFCFD
statusBar.noFolderBorder#F3F3F4
statusBar.noFolderForeground#AFAEC3
statusBarItem.activeBackground#FCFCFD
statusBarItem.errorBackground#FCFCFD
statusBarItem.errorForeground#f7768e
statusBarItem.hoverBackground#F7F7F8
statusBarItem.prominentBackground#FCFCFD
statusBarItem.prominentForeground#B1B2FF
statusBarItem.prominentHoverBackground#F7F7F8
statusBarItem.remoteBackground#FCFCFD
statusBarItem.remoteForeground#B1B2FF
statusBarItem.warningBackground#FCFCFD
statusBarItem.warningForeground#FFAF8D
symbolIcon.arrayForeground#9393A8
symbolIcon.booleanForeground#B1B2FF
symbolIcon.classForeground#FF80BF
symbolIcon.colorForeground#9393A8
symbolIcon.constantForeground#FF80BF
symbolIcon.constructorForeground#FF80BF
symbolIcon.enumeratorForeground#B1B2FF
symbolIcon.enumeratorMemberForeground#9393A8
symbolIcon.eventForeground#79F391
symbolIcon.fieldForeground#9393A8
symbolIcon.fileForeground#9393A8
symbolIcon.folderForeground#9393A8
symbolIcon.functionForeground#79F391
symbolIcon.interfaceForeground#FF80BF
symbolIcon.keyForeground#79F391
symbolIcon.keywordForeground#FF80BF
symbolIcon.methodForeground#79F391
symbolIcon.moduleForeground#79F391
symbolIcon.namespaceForeground#B1B2FF
symbolIcon.nullForeground#B1B2FF
symbolIcon.numberForeground#8DDDFF
symbolIcon.objectForeground#9393A8
symbolIcon.operatorForeground#9393A8
symbolIcon.packageForeground#79F391
symbolIcon.propertyForeground#FFAF8D
symbolIcon.referenceForeground#FF80BF
symbolIcon.snippetForeground#9393A8
symbolIcon.stringForeground#FFDB89
symbolIcon.structForeground#FF80BF
symbolIcon.textForeground#9393A8
symbolIcon.typeParameterForeground#FFAF8D
symbolIcon.unitForeground#8DDDFF
symbolIcon.variableForeground#FF80BF
tab.activeBackground#F7F7F8
tab.activeBorder#9393A860
tab.activeBorderTop#F7F7F8
tab.activeForeground#9393A8
tab.border#FCFCFD
tab.hoverBackground#9393A810
tab.hoverBorder#9393A890
tab.hoverForeground#787892
tab.inactiveBackground#FCFCFD
tab.inactiveForeground#AFAEC3
tab.lastPinnedBorder#F7F7F8
tab.unfocusedActiveBackground#FCFCFD
tab.unfocusedActiveBorder#9393A870
tab.unfocusedActiveBorderTop#FCFCFD
tab.unfocusedActiveForeground#AFAEC3
tab.unfocusedHoverBackground#F7F7F8
tab.unfocusedHoverBorder#9393A890
tab.unfocusedHoverForeground#787892
tab.unfocusedInactiveBackground#FCFCFD
tab.unfocusedInactiveForeground#AFAEC3
terminal.ansiBlack#787892
terminal.ansiBlue#8DDDFF
terminal.ansiBrightBlack#9393A8
terminal.ansiBrightBlue#8DDDFF
terminal.ansiBrightCyan#8DDDFF
terminal.ansiBrightGreen#79F391
terminal.ansiBrightMagenta#B1B2FF
terminal.ansiBrightRed#f7768e
terminal.ansiBrightWhite#F7F7F8
terminal.ansiBrightYellow#FFDB89
terminal.ansiCyan#8DDDFF
terminal.ansiGreen#79F391
terminal.ansiMagenta#B1B2FF
terminal.ansiRed#f7768e
terminal.ansiWhite#FCFCFD
terminal.ansiYellow#FFDB89
terminal.background#FCFCFD
terminal.border#F3F3F4
terminal.foreground#9393A8
terminal.selectionBackground#F7F7F8
terminal.selectionForeground#9393A8
terminalCommandDecoration.defaultBackground#B1B2FF
terminalCommandDecoration.errorBackground#f7768e
terminalCommandDecoration.successBackground#79F391
terminalCursor.background#F7F7F8
terminalCursor.foreground#9393A8
testing.iconErrored#f7768e
testing.iconFailed#FFAF8D
testing.iconPassed#79F391
testing.iconQueued#9393A8
testing.iconSkipped#FFAF8D
testing.iconUnset#9393A8
testing.message.error.decorationForeground#f7768e
testing.message.error.lineBackground#f7768e50
testing.message.info.decorationForeground#8DDDFF
testing.message.info.lineBackground#8DDDFF50
testing.peekBorder#F3F3F4
testing.peekHeaderBackground#FCFCFD
testing.runAction#FFDB89
textBlockQuote.background#FCFCFD
textBlockQuote.border#FFAF8D
textCodeBlock.background#F7F7F8
textLink.activeForeground#AFAEC3
textLink.foreground#AFAEC3
textPreformat.foreground#79F391
textSeparator.foreground#F3F3F4
titleBar.activeBackground#FCFCFD
titleBar.activeForeground#AFAEC3
titleBar.border#F3F3F4
titleBar.inactiveBackground#FCFCFD
titleBar.inactiveForeground#AFAEC3
toolbar.activeBackground#9393A820
toolbar.hoverBackground#9393A820
toolbar.hoverOutline#9393A820
tree.indentGuidesStroke#F3F3F4
tree.tableColumnsBorder#F3F3F4
tree.tableOddRowsBackground#F7F7F8
walkThrough.embeddedEditorBackground#F7F7F8
walkthrough.stepTitle.foreground#9393A8
welcomePage.background#FCFCFD
welcomePage.progress.background#F7F7F8
welcomePage.progress.foreground#9393A870
welcomePage.tileBackground#FCFCFD
welcomePage.tileBorder#9393A850
welcomePage.tileHoverBackground#F7F7F850
widget.shadow#F0F0F2
window.activeBorder#FCFCFD
window.inactiveBorder#FCFCFD

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
source, keyword.other.unit, constant.numeric.css, variable.other.object, variable.other.readwrite, variable.other.constant, support.type.property-name.css, meta.field.declaration, meta.object.member, meta.definition.method, punctuation.separator.comma, punctuation.terminator.statement, punctuation.definition.section.case-statement, source.yaml, meta.paragraph.markdown, string.other.link.title, text.html.markdown, support.class.promise, support.type.object.module, string.quoted.double.json, variable.parameter, entity.name.function, punctuation.accessor, punctuation.separator.parameter, entity.name.type, entity.name.type.alias, entity.name.type.interface, meta.jsx.children.js.jsx, meta.jsx.children.tsx, entity.other.inherited-class.ts, variable.language.this.ts	#787892	italic bold
comment, comment.line.double-slash.js, punctuation.definition.tag, string.quoted, string.template, entity.other.attribute-name.js.jsx, entity.other.attribute-name.tsx, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.pseudo-element.css, variable.other.enummember.ts, text.html.derivative, support.type.property-name.css, constant.other.color.rgb-value.hex.css	#9393A8	italic bold
comment, comment.line.double-slash.js	#8F8FAD	italic bold
constant.language.boolean, constant.numeric, constant.numeric.json.comments, markup.underline.link, punctuation.definition.bold, variable.other.constant.property, constant.numeric.css, keyword.other.unit	#8DDDFF	italic bold
storage, keyword, entity.name.tag, punctuation.separator.key-value.html, support.type.property-name.json	#FF80BF	italic bold
support.type.primitive, string.quoted.double.css, string.quoted.single.css, string.quoted.double, string.quoted.single, markup.quote.markdown, support.type.swift	#FFAF8D	italic bold
variable.argument.css, support.constant.property-value.css, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, entity.name.type.ts, string.quoted.double, string.quoted.single	#AFAEC3	italic bold
constant.language.boolean, entity.name.function, markup.list.unnumbered, meta.attribute-selector.scss, variable.language.super.ts, support.function.misc.css, support.function.calc.css, entity.other.attribute-name, markup.inline.raw.string.markdown	#79F391	italic bold
support.type, constant.numeric.json.comments, entity.other.attribute-name.id, meta.property-name, constant.language.json.comments, punctuation.definition.heading, entity.name.section, punctuation.definition.italic, support.class.component.js.jsx, support.class.component.tsx, variable.other.property, support.function.kernel.ruby	#B1B2FF	italic 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}!`;
}