oXocarbonix

Name: oXocarbonix
Author: Ronit Gandhi

Publisher: Ronit GandhiThemes in package: 4

🎨 oXocarbonix - A refined dark theme suite for Visual Studio Code, inspired by the popular Neovim colorscheme.

GitHub

Color themes

VS Code preview

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

oXocarbonix — oXocarbonix-eclipse

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

Problems1

Output

Debug Console

Terminal

Ports

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

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#D8E0F0
activityBar.background#121827
activityBar.dropBorder#26C6DA20
activityBar.foreground#D8E0F0
activityBar.inactiveForeground#D8E0F066
activityBarBadge.background#252A3D
activityBarBadge.foreground#D8E0F0
activityBarTop.dropBorder#26C6DA20
badge.background#252A3D
badge.foreground#D8E0F0
breadcrumb.activeSelectionForeground#D8E0F0
breadcrumb.background#00000000
breadcrumb.focusForeground#D8E0F0
breadcrumb.foreground#4A5A70cc
breadcrumbPicker.background#121827
button.background#FF6BAA
button.border#00000000
button.foreground#0D1019
button.hoverBackground#FF6BAA90
button.secondaryBackground#262C3F
button.secondaryForeground#D8E0F0
button.secondaryHoverBackground#252A3D
charts.blue#F0F5FF
charts.foreground#D8E0F0
charts.green#C78FFF
charts.lines#D8E0F080
charts.orange#5B92EE
charts.purple#DA78FF
charts.red#FF6BAA
charts.yellow#FFA726
checkbox.background#121827
checkbox.border#F0F5FF10
checkbox.foreground#D8E0F0
commandCenter.activeBackground#252A3D
commandCenter.activeBorder#00000000
commandCenter.activeForeground#D8E0F0
commandCenter.background#121827
commandCenter.border#00000000
commandCenter.debuggingBackground#26C6DA
commandCenter.debuggingBorder#00000000
commandCenter.debuggingForeground#0D1019
commandCenter.foreground#D8E0F0
commandCenter.inactiveBackground#121827
commandCenter.inactiveBorder#00000000
commandCenter.inactiveForeground#4A5A70
debugConsole.errorForeground#FF6BAA
debugConsole.infoForeground#F0F5FF
debugConsole.sourceForeground#D8E0F0
debugConsole.warningForeground#FFA726
debugConsoleInputIcon.foreground#D8E0F0
debugExceptionWidget.background#FF6BAA
debugExceptionWidget.border#FF6BAA
debugIcon.breakpointCurrentStackframeForeground#FFA726
debugIcon.breakpointDisabledForeground#4c566a
debugIcon.breakpointForeground#FF6BAA
debugIcon.breakpointStackframeForeground#20CED0
debugIcon.breakpointUnverifiedForeground#4c566a
debugIcon.continueForeground#26C6DA
debugIcon.disconnectForeground#FF6BAA
debugIcon.pauseForeground#FFA726
debugIcon.restartForeground#26C6DA
debugIcon.startForeground#26C6DA
debugIcon.stepBackForeground#5B92EE
debugIcon.stepIntoForeground#5B92EE
debugIcon.stepOutForeground#5B92EE
debugIcon.stepOverForeground#5B92EE
debugIcon.stopForeground#FF6BAA
debugTokenExpression.boolean#5B92EE
debugTokenExpression.error#FF6BAA
debugTokenExpression.name#D8E0F0
debugTokenExpression.number#20CED0
debugTokenExpression.string#5B92EE
debugTokenExpression.value#D8E0F099
debugToolBar.background#262C3F
debugView.exceptionLabelBackground#FF6BAA
debugView.exceptionLabelForeground#D8E0F0
debugView.stateLabelBackground#252A3D
debugView.stateLabelForeground#D8E0F0
debugView.valueChangedHighlight#5B92EE
descriptionForeground#D8E0F0b3
diffEditor.diagonalFill#D8E0F033
diffEditor.insertedLineBackground#20CED020
diffEditor.insertedTextBackground#20CED010
diffEditor.removedLineBackground#FF6BAA20
diffEditor.removedTextBackground#FF6BAA20
dropdown.background#121827
dropdown.border#F0F5FF10
dropdown.foreground#D8E0F0
editor.background#121827
editor.findMatchBackground#F0F5FF40
editor.findMatchBorder#F0F5FF
editor.findMatchHighlightBackground#F0F5FF40
editor.findRangeHighlightBackground#F0F5FF40
editor.focusedStackFrameHighlightBackground#7abd7a4d
editor.foldBackground#717cb40b
editor.foreground#D8E0F0
editor.hoverHighlightBackground#264f7840
editor.inactiveSelectionBackground#5B92EE30
editor.lineHighlightBackground#00000000
editor.lineHighlightBorder#00000000
editor.linkedEditingBackground#FF6BAA4d
editor.rangeHighlightBackground#F0F5FF0b
editor.selectionBackground#5B92EE30
editor.selectionHighlightBackground#00000000
editor.selectionHighlightBorder#F0F5FF80
editor.snippetFinalTabstopHighlightBorder#525252
editor.snippetTabstopHighlightBackground#7c7c7c4d
editor.stackFrameHighlightBackground#ffff0033
editor.symbolHighlightBackground#5B92EE60
editor.wordHighlightBackground#F0F5FF20
editor.wordHighlightStrongBackground#F0F5FF40
editorBracketMatch.background#00000000
editorBracketMatch.border#D8E0F040
editorCodeLens.foreground#D8E0F0
editorCursor.foreground#D8E0F0
editorError.foreground#FF6BAA
editorGroup.border#0D101930
editorGroup.dropBackground#26C6DA20
editorGroup.dropIntoPromptBackground#26C6DA33
editorGroupHeader.noTabsBackground#121827
editorGroupHeader.tabsBackground#121827
editorGutter.addedBackground#20CED040
editorGutter.background#121827
editorGutter.commentRangeForeground#D8E0F0
editorGutter.deletedBackground#FF6BAA40
editorGutter.foldingControlForeground#D8E0F0
editorGutter.modifiedBackground#F0F5FF20
editorHint.foreground#4c566ab3
editorHoverWidget.background#121827
editorHoverWidget.border#F0F5FF10
editorHoverWidget.foreground#D8E0F0
editorHoverWidget.statusBarBackground#202430
editorIndentGuide.activeBackground#e3e4e229
editorIndentGuide.background1#252A3D
editorInfo.foreground#F0F5FF
editorInlineHint.background#D8E0F0
editorInlineHint.foreground#121827
editorLightBulb.foreground#FFA726
editorLightBulbAutoFix.foreground#F0F5FF
editorLineNumber.activeForeground#D8E0F0
editorLineNumber.foreground#4A5A7050
editorLink.activeForeground#F0F5FF
editorMarkerNavigation.background#2d2d30
editorMarkerNavigationError.background#FF6BAA
editorMarkerNavigationInfo.background#F0F5FF
editorMarkerNavigationWarning.background#FFA726
editorOverviewRuler.addedForeground#20CED099
editorOverviewRuler.border#00000000
editorOverviewRuler.bracketMatchForeground#a0a0a0
editorOverviewRuler.commonContentForeground#D8E0F066
editorOverviewRuler.currentContentForeground#20CED080
editorOverviewRuler.deletedForeground#FF6BAA99
editorOverviewRuler.errorForeground#FF6BAAb3
editorOverviewRuler.findMatchForeground#D8E0F020
editorOverviewRuler.incomingContentForeground#5B92EE80
editorOverviewRuler.infoForeground#F0F5FF
editorOverviewRuler.modifiedForeground#5B92EE99
editorOverviewRuler.rangeHighlightForeground#5B92EE99
editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
editorOverviewRuler.warningForeground#FFA726
editorOverviewRuler.wordHighlightForeground#a0a0a0cc
editorOverviewRuler.wordHighlightStrongForeground#5B92EEcc
editorPane.background#121827
editorRuler.foreground#D8E0F010
editorSuggestWidget.background#121827
editorSuggestWidget.border#F0F5FF10
editorSuggestWidget.foreground#D8E0F0
editorSuggestWidget.highlightForeground#C78FFF
editorSuggestWidget.selectedBackground#0D101950
editorUnnecessaryCode.opacity#0D1019aa
editorWarning.foreground#FFA726
editorWhitespace.foreground#252A3D
editorWidget.background#121827
editorWidget.border#D8E0F0
editorWidget.foreground#D8E0F0
errorForeground#FF6BAA
extensionBadge.remoteBackground#252A3D
extensionBadge.remoteForeground#D8E0F0
extensionButton.prominentBackground#252A3D90
extensionButton.prominentForeground#F0F5FF
extensionButton.prominentHoverBackground#252A3D
extensionIcon.starForeground#FFA726
focusBorder#00000000
foreground#D8E0F0
gitDecoration.addedResourceForeground#20CED0
gitDecoration.conflictingResourceForeground#FF6BAA
gitDecoration.deletedResourceForeground#FF6BAA
gitDecoration.ignoredResourceForeground#4A5A7070
gitDecoration.modifiedResourceForeground#5B92EE
gitDecoration.renamedResourceForeground#F0F5FF
gitDecoration.stageDeletedResourceForeground#FF6BAA
gitDecoration.stageModifiedResourceForeground#5B92EE
gitDecoration.submoduleResourceForeground#5B92EE
gitDecoration.untrackedResourceForeground#26C6DA
icon.foreground#D8E0F0
imagePreview.border#252A3D
input.background#F0F5FF05
input.border#F0F5FF10
input.foreground#D8E0F0
input.placeholderForeground#D8E0F060
inputOption.activeBackground#00000000
inputOption.activeBorder#00000000
inputOption.activeForeground#F0F5FF
inputValidation.errorBackground#121827
inputValidation.errorBorder#FF6BAA
inputValidation.errorForeground#FF6BAA
inputValidation.infoBackground#262C3F
inputValidation.infoBorder#5B92EE
inputValidation.warningBackground#262C3F
inputValidation.warningBorder#FFA726
list.activeSelectionBackground#252A3D80
list.activeSelectionForeground#D8E0F0
list.deemphasizedForeground#4A5A70
list.dropBackground#26C6DA20
list.dropBetweenBackground#26C6DA20
list.errorForeground#FF6BAA
list.filterMatchBackground#5B92EE60
list.focusBackground#252A3D80
list.focusForeground#D8E0F0
list.focusOutline#00000000
list.highlightForeground#20CED0
list.hoverBackground#252A3D80
list.hoverForeground#D8E0F0
list.inactiveSelectionBackground#252A3D80
list.inactiveSelectionForeground#D8E0F0
list.invalidItemForeground#FFA726
list.warningForeground#FFA726
listFilterWidget.background#252A3D
listFilterWidget.noMatchesOutline#FF6BAA
listFilterWidget.outline#00000000
menu.background#121827
menu.foreground#D8E0F0
menu.selectionBackground#252A3D
menu.selectionForeground#4c566a
menu.separatorBackground#4A5A70
menubar.selectionBackground#5B92EE30
menubar.selectionForeground#D8E0F0
merge.commonContentBackground#D8E0F029
merge.commonHeaderBackground#D8E0F066
merge.currentContentBackground#20CED033
merge.currentHeaderBackground#20CED080
merge.incomingContentBackground#5B92EE33
merge.incomingHeaderBackground#5B92EE80
minimap.errorHighlight#FF6BAA
minimap.findMatchHighlight#F0F5FF
minimap.selectionHighlight#D8E0F040
minimap.warningHighlight#FFA726
minimapGutter.addedBackground#20CED080
minimapGutter.deletedBackground#FF6BAA80
minimapGutter.modifiedBackground#F0F5FF80
minimapSlider.activeBackground#D8E0F030
minimapSlider.background#D8E0F020
minimapSlider.hoverBackground#D8E0F030
notebook.cellEditorBackground#0D1019
notebook.cellHoverBackground#5B92EE30
notebook.cellInsertionIndicator#121827
notebook.focusedCellBackground#5B92EE30
notebook.focusedCellBorder#26C6DA
notebook.inactiveFocusedCellBorder#121827
notebook.outputContainerBackgroundColor#252A3D
notebook.selectedCellBackground#252A3D
notebook.selectedCellBorder#F0F5FF
notebookStatusErrorIcon.foreground#FF6BAA
notebookStatusRunningIcon.foreground#D8E0F0
notebookStatusSuccessIcon.foreground#20CED0
notificationCenterHeader.background#252A3D
notificationLink.foreground#F0F5FF
notifications.background#121827
notifications.border#252A3D
notifications.foreground#D8E0F0
notificationsErrorIcon.foreground#FF6BAA
notificationsInfoIcon.foreground#F0F5FF
notificationsWarningIcon.foreground#FFA726
panel.background#121827
panel.border#0D101930
panel.dropBackground#26C6DA20
panel.dropBorder#D8E0F0
panelSection.border#121827
panelSection.dropBackground#26C6DA20
panelSectionHeader.background#0D1019
panelSectionHeader.border#00000000
panelSectionHeader.foreground#D8E0F0
panelTitle.activeBorder#D8E0F0
panelTitle.activeForeground#F0F5FF
panelTitle.inactiveForeground#D8E0F099
peekView.border#0D101930
peekViewEditor.background#D8E0F005
peekViewEditor.matchHighlightBackground#252A3D
peekViewEditorGutter.background#D8E0F005
peekViewResult.background#D8E0F005
peekViewResult.fileForeground#F0F5FF
peekViewResult.lineForeground#D8E0F0
peekViewResult.matchHighlightBackground#252A3D
peekViewResult.selectionBackground#5B92EE30
peekViewResult.selectionForeground#F0F5FF
peekViewTitle.background#D8E0F005
peekViewTitleDescription.foreground#D8E0F060
peekViewTitleLabel.foreground#F0F5FF
pickerGroup.border#D8E0F0
pickerGroup.foreground#5B92EE
problemsErrorIcon.foreground#FF6BAA
problemsInfoIcon.foreground#F0F5FF
problemsWarningIcon.foreground#FFA726
progressBar.background#5B92EE
quickInput.background#121827
quickInput.foreground#D8E0F0
quickInputList.focusBackground#D8E0F010
quickInputTitle.background#F0F5FF1b
sash.hoverBorder#00000000
scm.providerBorder#D8E0F010
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#FF6BAA40
scrollbarSlider.background#4A5A7080
scrollbarSlider.hoverBackground#8D99B825
searchEditor.findMatchBackground#F0F5FF50
searchEditor.textInputBorder#F0F5FF10
selection.background#252A3D
settings.checkboxBackground#121827
settings.checkboxBorder#F0F5FF10
settings.checkboxForeground#D8E0F0
settings.dropdownBackground#121827
settings.dropdownBorder#F0F5FF10
settings.dropdownForeground#D8E0F0
settings.dropdownListBorder#D8E0F010
settings.focusedRowBackground#00000000
settings.headerForeground#D8E0F0
settings.modifiedItemIndicator#F0F5FF
settings.numberInputBackground#F0F5FF05
settings.numberInputBorder#F0F5FF10
settings.numberInputForeground#D8E0F0
settings.textInputBackground#F0F5FF05
settings.textInputBorder#F0F5FF10
settings.textInputForeground#D8E0F0
sideBar.background#121827
sideBar.dropBackground#26C6DA20
sideBar.foreground#4A5A70
sideBarSectionHeader.background#121827
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#D8E0F0
sideBarTitle.background#121827
sideBarTitle.border#00000000
sideBarTitle.foreground#D8E0F0
statusBar.background#121827
statusBar.debuggingBackground#252A3D
statusBar.debuggingForeground#F0F5FF
statusBar.foreground#D8E0F0
statusBar.noFolderBackground#121827
statusBar.noFolderForeground#D8E0F0
statusBarItem.activeBackground#F0F5FF2e
statusBarItem.errorBackground#FF6BAA
statusBarItem.errorForeground#F0F5FF
statusBarItem.hoverBackground#F0F5FF1f
statusBarItem.prominentBackground#0D101980
statusBarItem.prominentForeground#D8E0F0
statusBarItem.prominentHoverBackground#0D10194d
statusBarItem.remoteBackground#26C6DA
statusBarItem.remoteForeground#F0F5FF
symbolIcon.arrayForeground#D8E0F0
symbolIcon.booleanForeground#D8E0F0
symbolIcon.classForeground#FFA726
symbolIcon.colorForeground#D8E0F0
symbolIcon.constantForeground#D8E0F0
symbolIcon.constructorForeground#DA78FF
symbolIcon.enumeratorForeground#FFA726
symbolIcon.enumeratorMemberForeground#F0F5FF
symbolIcon.eventForeground#FFA726
symbolIcon.fieldForeground#F0F5FF
symbolIcon.fileForeground#D8E0F0
symbolIcon.folderForeground#D8E0F0
symbolIcon.functionForeground#DA78FF
symbolIcon.interfaceForeground#F0F5FF
symbolIcon.keyForeground#D8E0F0
symbolIcon.keywordForeground#D8E0F0
symbolIcon.methodForeground#DA78FF
symbolIcon.moduleForeground#D8E0F0
symbolIcon.namespaceForeground#D8E0F0
symbolIcon.nullForeground#D8E0F0
symbolIcon.numberForeground#D8E0F0
symbolIcon.objectForeground#D8E0F0
symbolIcon.operatorForeground#D8E0F0
symbolIcon.packageForeground#D8E0F0
symbolIcon.propertyForeground#D8E0F0
symbolIcon.referenceForeground#D8E0F0
symbolIcon.snippetForeground#D8E0F0
symbolIcon.stringForeground#D8E0F0
symbolIcon.structForeground#D8E0F0
symbolIcon.textForeground#D8E0F0
symbolIcon.typeParameterForeground#D8E0F0
symbolIcon.unitForeground#D8E0F0
symbolIcon.variableForeground#F0F5FF
tab.activeBackground#252A3D80
tab.activeForeground#D8E0F0
tab.activeModifiedBorder#F0F5FF
tab.border#00000000
tab.inactiveBackground#121827
tab.inactiveForeground#4A5A70
tab.inactiveModifiedBorder#F0F5FF80
tab.lastPinnedBorder#00000000
tab.unfocusedActiveBackground#121827
tab.unfocusedActiveForeground#D8E0F0
tab.unfocusedActiveModifiedBorder#F0F5FF40
tab.unfocusedInactiveBackground#121827
tab.unfocusedInactiveForeground#D8E0F080
tab.unfocusedInactiveModifiedBorder#F0F5FF40
terminal.ansiBlack#121827
terminal.ansiBlue#5B92EE
terminal.ansiBrightBlack#D8E0F0
terminal.ansiBrightBlue#F0F5FF
terminal.ansiBrightCyan#F0F5FF
terminal.ansiBrightGreen#C78FFF
terminal.ansiBrightMagenta#DA78FF
terminal.ansiBrightRed#FF6BAA
terminal.ansiBrightWhite#F0F5FF
terminal.ansiBrightYellow#FFA726
terminal.ansiCyan#5B92EE
terminal.ansiGreen#C78FFF
terminal.ansiMagenta#DA78FF
terminal.ansiRed#FF6BAA
terminal.ansiWhite#F0F5FF
terminal.ansiYellow#FFA726
terminal.border#00000000
terminal.dropBackground#26C6DA20
terminal.foreground#D8E0F0
terminal.selectionBackground#5B92EE30
terminalCommandDecoration.defaultBackground#4A5A70
terminalCommandDecoration.errorBackground#FF6BAA
terminalCommandDecoration.successBackground#C78FFF
testing.iconErrored#FF6BAA
testing.iconFailed#FF6BAA
testing.iconPassed#C78FFF
testing.iconQueued#FFA726
testing.iconSkipped#4c566a
testing.iconUnset#4c566a
testing.message.error.decorationForeground#FF6BAA
testing.message.error.lineBackground#FF6BAA33
testing.message.hint.decorationForeground#4c566ab3
testing.message.info.decorationForeground#F0F5FF
testing.message.info.lineBackground#5B92EE33
testing.message.warning.decorationForeground#FFA726
testing.message.warning.lineBackground#FFA72633
testing.peekBorder#FF6BAA
testing.runAction#C78FFF
textBlockQuote.background#4c566a1a
textBlockQuote.border#5B92EE80
textCodeBlock.background#0D101950
textLink.activeForeground#F0F5FF
textLink.foreground#F0F5FF
textPreformat.foreground#D8E0F0
textSeparator.foreground#F0F5FF2e
titleBar.activeBackground#121827
titleBar.activeForeground#D8E0F0
titleBar.inactiveBackground#121827
titleBar.inactiveForeground#4A5A70
tree.indentGuidesStroke#252A3D
tree.tableColumnsBorder#D8E0F020
welcomePage.progress.background#F0F5FF05
welcomePage.progress.foreground#20CED0
welcomePage.tileBackground#121827
welcomePage.tileHoverBackground#252A3D
widget.shadow#0D101930

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.quoted.docstring.multi	#4A5A70B0	italic
meta.parameters comment.block	#D8E0F0	italic
variable.other.constant.object, variable.other.readwrite.alias, meta.import variable.other.readwrite	#F0F5FF	—
variable.other, support.type.object	#D8E0F0	—
variable.other.object.property, variable.other.property, support.variable.property	#D8E0F0	—
entity.name.function.method, string.unquoted, meta.object.member	#F0F5FF	—
variable - meta.import, constant.other.placeholder, meta.object-literal.key-meta.object.member	#D8E0F0	—
keyword.control.flow	#20CED0c0	italic
keyword.operator.new, keyword.control.new	#C78FFF	—
variable.language.this, storage.modifier.async, storage.modifier, variable.language.super	#C78FFF	—
support.class.error, keyword.control.trycatch, keyword.operator.expression.delete, keyword.operator.expression.void, keyword.operator.void, keyword.operator.delete, constant.language.null, constant.language.boolean.false, constant.language.undefined	#FF6BAA	—
variable.parameter, variable.other.readwrite.js, meta.definition.variable variable.other.constant, meta.definition.variable variable.other.readwrite	#D8E0F0	—
constant.other.color	#F0F5FF	—
invalid, invalid.illegal	#FF6BAA	—
invalid.deprecated	#FF6BAA	—
keyword.control, keyword	#D8E0F0	—
keyword.operator, storage.type	#5597FF	—
keyword.control.module, keyword.control.import, keyword.control.export, keyword.control.default, meta.import, meta.export	#C78FFF	—
Keyword, Storage	—	italic
keyword-meta.export	#F0F5FF	—
meta.brace, punctuation, keyword.operator.existential	#D8E0F0	—
constant.other.color, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, meta.objectliteral	#D8E0F0	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#D8E0F0	—
support.class.component	#C78FFF	—
entity.name.tag, entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#C78FFF	—
variable.function, meta.class meta.group.braces.curly meta.function-call variable.function, meta.block meta.var.expr meta.function-call entity.name.function	#26C6DA	bold
support.function.console, meta.function-call support.function, source meta.method-call entity.name.function, source meta.function-call entity.name.function, meta.class meta.field.declaration meta.function-call entity.name.function, variable.function.constructor	#D8E0F0	—
entity.name.function, meta.class entity.name.class, meta.class entity.name.type.class, meta.class meta.function-call variable.function, keyword.other.important	#F0F5FF	—
source.cpp meta.block variable.other	#F0F5FF	—
support.other.variable, string.other.link	#C78FFF	—
constant.numeric, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other, string, constant.language, constant.other.symbol, constant.other.key, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#C78FFF	—
text.html.derivative	#D8E0F0	—
entity.other.inherited-class	#F0F5FF	—
meta.type.declaration	#F0F5FF	—
entity.name.type.alias	#D8E0F0	—
keyword.control.as, entity.name.type, support.type	#D8E0F0C0	—
entity.name, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#5597FF	—
support.class, support.constant, variable.other.constant.object	#F0F5FF	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#F0F5FF	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#D8E0F0	—
variable.language	#F0F5FF	italic
entity.name.method.js	#5597FF	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#5597FF	bold
entity.other.attribute-name	#5597FF	italic
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#20CED0	italic
entity.other.attribute-name.class	#20CED0	—
source.sass keyword.control	#26C6DA	—
markup.inserted	#F0F5FF	—
markup.deleted	#262C3F	—
markup.changed	#5597FF	—
string.regexp	#20CED0	—
constant.character.escape	#20CED0	—
url, link, uri	#F0F5FF	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#26C6DA	italic
source.js constant.other.object.key.js string.unquoted.label.js	#20CED0	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#D8E0F0	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#F0F5FF	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#5597FF	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#4c566a	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#D8E0F0	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#F0F5FF	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#5597FF	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#4c566a	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#D8E0F0	—
text.html.markdown, punctuation.definition.list_item.markdown	#D8E0F0	—
text.html.markdown markup.inline.raw.markdown	#F0F5FF	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#5597FF	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#D8E0F0	—
markup.italic	#4c566a	italic
markup.bold, markup.bold string	#4c566a	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#4c566a	bold
markup.underline	#4c566a	underline
markup.strike	—	italic
markup.quote punctuation.definition.blockquote.markdown	#C78FFF	—
markup.quote	—	italic
string.other.link.title.markdown	#F0F5FF	—
string.other.link.description.title.markdown	#F0F5FF	—
constant.other.reference.link.markdown	#F0F5FF	—
markup.raw.block	#F0F5FF	—
markup.raw.block.fenced.markdown	#262C3F50	—
punctuation.definition.fenced.markdown	#262C3F50	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#5597FF	—
variable.language.fenced.markdown	#5597FF	—
meta.separator	#4c566a	bold
markup.table	#F0F5FF	—
token.info-token	#5B92EE	—
token.warn-token	#FFA726	—
token.error-token	#FF6BAA	—
token.debug-token	#D8E0F0	—
entity.name.section.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown	#D8E0F0	bold
meta.paragraph.markdown	#D8E0F0d0	—
punctuation.definition.from-file.diff, meta.diff.header.from-file	#262C3F	—
markup.inline.raw.string.markdown	#4c566a	—
meta.separator.markdown	#4A5A70	—
markup.bold.markdown	—	bold
markup.italic.markdown	—	italic
beginning.punctuation.definition.list.markdown, punctuation.definition.list.begin.markdown, markup.list.unnumbered.markdown	#F0F5FF	—
string.other.link.description.title.markdown punctuation.definition.string.markdown, meta.link.inline.markdown string.other.link.description.title.markdown, string.other.link.description.title.markdown punctuation.definition.string.begin.markdown, string.other.link.description.title.markdown punctuation.definition.string.end.markdown, meta.image.inline.markdown string.other.link.description.title.markdown	#F0F5FF
punctuation.definition.string	#8D99B8	—
punctuation.separator.colon	#8D99B8	—
punctuation.definition.string.begin, punctuation.definition.string.end	#8D99B8	—
punctuation.separator.comma	#8D99B8	—
punctuation.operator.arrow, punctuation.separator.arrow	#8D99B8	—
punctuation.operator.arrow, punctuation.separator.arrow	#8D99B8	—
meta.link.inline.markdown string.other.link.title.markdown, meta.link.reference.markdown string.other.link.title.markdown, meta.link.reference.def.markdown markup.underline.link.markdown	#F0F5FF	underline
markup.underline.link.markdown, string.other.link.description.title.markdown	#C78FFF	—
fenced_code.block.language, markup.inline.raw.markdown	#F0F5FF	—
punctuation.definition.markdown, punctuation.definition.raw.markdown, punctuation.definition.heading.markdown, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown	#F0F5FF	—
source.ignore, log.error, log.exception	#FF6BAA	—
log.verbose	#D8E0F0	—

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