Author's OLED Theme

Name: Author's OLED Theme
Author: Author's Publisher

Publisher: Author's PublisherThemes in package: 1

Author theme, made for OLED screens and for users who want to take care of their eyes on big screens

Open in VS Code GitHub

VS Code preview

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

Author's OLED Theme — Author's OLED Theme

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.activeBorder#26ff0080
activityBar.background#000000
activityBar.dropBorder#50b54a
activityBar.foreground#e2d9d9da
activityBar.inactiveForeground#868b85b4
activityBarBadge.background#2eac1b
activityBarBadge.foreground#000000
badge.background#4d4d4d
badge.foreground#ffffff
banner.background#000000
banner.foreground#26ff0080
banner.iconForeground#3794ff
breadcrumb.activeSelectionForeground#e0e0e0
breadcrumb.background#000000
breadcrumb.focusForeground#e0e0e0
breadcrumb.foreground#cccccccc
breadcrumbPicker.background#000000
button.background#3b8919
button.foreground#000000
button.hoverBackground#2eac1b
button.secondaryBackground#3a3d41
button.secondaryForeground#ffffff
button.secondaryHoverBackground#45494e
button.separator#00000066
charts.blue#3794ff
charts.foreground#cccccc
charts.green#89d185
charts.lines#cccccc80
charts.orange#d18616
charts.purple#b180d7
charts.red#f14c4c
charts.yellow#cca700
checkbox.background#000000
checkbox.border#4b4d51
checkbox.foreground#f0f0f0
checkbox.selectBackground#000000
checkbox.selectBorder#000000
commandCenter.activeBackground#ffffff14
commandCenter.activeBorder#cccccc4d
commandCenter.activeForeground#cccccc
commandCenter.background#ffffff0d
commandCenter.border#cccccc33
commandCenter.foreground#cccccc
commandCenter.inactiveBorder#00000040
commandCenter.inactiveForeground#000000
debugConsole.errorForeground#f48771
debugConsole.infoForeground#3794ff
debugConsole.sourceForeground#cccccc
debugConsole.warningForeground#cca700
debugConsoleInputIcon.foreground#cccccc
debugExceptionWidget.background#420b0d
debugExceptionWidget.border#a31515
debugIcon.breakpointCurrentStackframeForeground#ffcc00
debugIcon.breakpointDisabledForeground#848484
debugIcon.breakpointForeground#e51400
debugIcon.breakpointStackframeForeground#89d185
debugIcon.breakpointUnverifiedForeground#848484
debugIcon.continueForeground#75beff
debugIcon.disconnectForeground#f48771
debugIcon.pauseForeground#75beff
debugIcon.restartForeground#89d185
debugIcon.startForeground#89d185
debugIcon.stepBackForeground#75beff
debugIcon.stepIntoForeground#75beff
debugIcon.stepOutForeground#75beff
debugIcon.stepOverForeground#75beff
debugIcon.stopForeground#f48771
debugTokenExpression.boolean#4e94ce
debugTokenExpression.error#f48771
debugTokenExpression.name#c586c0
debugTokenExpression.number#b5cea8
debugTokenExpression.string#ce9178
debugTokenExpression.value#cccccc99
debugToolBar.background#000000
debugView.exceptionLabelBackground#6c2022
debugView.exceptionLabelForeground#cccccc
debugView.stateLabelBackground#88888844
debugView.stateLabelForeground#cccccc
debugView.valueChangedHighlight#569cd6
descriptionForeground#ccccccb3
diffEditor.diagonalFill#cccccc33
diffEditor.insertedLineBackground#9bb95533
diffEditor.insertedTextBackground#9ccc2c33
diffEditor.removedLineBackground#ff000033
diffEditor.removedTextBackground#ff000033
disabledForeground#cccccc80
dropdown.background#000000
dropdown.border#97a7c8
dropdown.foreground#f0f0f0
editor.background#000000
editor.findMatchBackground#18222d
editor.findMatchHighlightBackground#ea5c0055
editor.findRangeHighlightBackground#3a3d4166
editor.focusedStackFrameHighlightBackground#7abd7a4d
editor.foldBackground#18222d4d
editor.foreground#ced5e5
editor.hoverHighlightBackground#264f7840
editor.inactiveSelectionBackground#182d1880
editor.inlineValuesBackground#ffc80033
editor.inlineValuesForeground#ffffff80
editor.lineHighlightBackground#26ff0014
editor.lineHighlightBorder#1212123b
editor.linkedEditingBackground#ff00004d
editor.rangeHighlightBackground#ffffff0b
editor.selectionBackground#182d18
editor.selectionHighlightBackground#11182099
editor.snippetFinalTabstopHighlightBorder#525252
editor.snippetTabstopHighlightBackground#7c7c7c4d
editor.stackFrameHighlightBackground#ffff0033
editor.symbolHighlightBackground#ea5c0055
editor.wordHighlightBackground#575757b8
editor.wordHighlightStrongBackground#004972b8
editor.wordHighlightTextBackground#575757b8
editorBracketHighlight.foreground1#ffd700
editorBracketHighlight.foreground2#da70d6
editorBracketHighlight.foreground3#179fff
editorBracketHighlight.foreground4#00000000
editorBracketHighlight.foreground5#00000000
editorBracketHighlight.foreground6#00000000
editorBracketHighlight.unexpectedBracket.foreground#ff1212cc
editorBracketMatch.background#0064001a
editorBracketMatch.border#97a7c8
editorBracketPairGuide.activeBackground1#00000000
editorBracketPairGuide.activeBackground2#00000000
editorBracketPairGuide.activeBackground3#00000000
editorBracketPairGuide.activeBackground4#00000000
editorBracketPairGuide.activeBackground5#00000000
editorBracketPairGuide.activeBackground6#00000000
editorBracketPairGuide.background1#00000000
editorBracketPairGuide.background2#00000000
editorBracketPairGuide.background3#00000000
editorBracketPairGuide.background4#00000000
editorBracketPairGuide.background5#00000000
editorBracketPairGuide.background6#00000000
editorCodeLens.foreground#999999
editorCommentsWidget.rangeActiveBackground#3794ff1a
editorCommentsWidget.rangeActiveBorder#3794ff66
editorCommentsWidget.rangeBackground#3794ff1a
editorCommentsWidget.rangeBorder#3794ff66
editorCommentsWidget.resolvedBorder#cccccc80
editorCommentsWidget.unresolvedBorder#3794ff
editorCursor.foreground#26ff0080
editorError.border#fb467b
editorError.foreground#f14c4c
editorGhostText.foreground#ffffff56
editorGroup.border#000000
editorGroup.dropBackground#53595d80
editorGroup.dropIntoPromptBackground#000000
editorGroup.dropIntoPromptForeground#cccccc
editorGroupHeader.noTabsBackground#000000
editorGroupHeader.tabsBackground#000000
editorGutter.addedBackground#56d6d6
editorGutter.background#000000
editorGutter.commentRangeForeground#000000
editorGutter.deletedBackground#fb467b
editorGutter.foldingControlForeground#c5c5c5
editorGutter.modifiedBackground#26ff0080
editorHint.foreground#eeeeeeb3
editorHoverWidget.background#000000
editorHoverWidget.border#454545
editorHoverWidget.foreground#cccccc
editorHoverWidget.highlightForeground#26ff0080
editorHoverWidget.statusBarBackground#000000
editorIndentGuide.activeBackground#18222d
editorIndentGuide.background#18222d
editorInfo.foreground#3794ff
editorInlayHint.background#4d4d4dcc
editorInlayHint.foreground#ffffff
editorInlayHint.parameterBackground#4d4d4dcc
editorInlayHint.parameterForeground#ffffff
editorInlayHint.typeBackground#4d4d4dcc
editorInlayHint.typeForeground#ffffff
editorLightBulb.foreground#ffcc00
editorLightBulbAutoFix.foreground#75beff
editorLineNumber.activeForeground#c6c6c6
editorLineNumber.foreground#5c6370
editorLink.activeForeground#4e94ce
editorMarkerNavigation.background#000000
editorMarkerNavigationError.background#f14c4c
editorMarkerNavigationError.headerBackground#f14c4c1a
editorMarkerNavigationInfo.background#3794ff
editorMarkerNavigationInfo.headerBackground#3794ff1a
editorMarkerNavigationWarning.background#cca700
editorMarkerNavigationWarning.headerBackground#cca7001a
editorOverviewRuler.addedForeground#56d6d699
editorOverviewRuler.border#000000
editorOverviewRuler.bracketMatchForeground#a0a0a0
editorOverviewRuler.commonContentForeground#60606066
editorOverviewRuler.currentContentForeground#40c8ae80
editorOverviewRuler.deletedForeground#fb467b99
editorOverviewRuler.errorForeground#ff1212b3
editorOverviewRuler.findMatchForeground#d186167e
editorOverviewRuler.incomingContentForeground#40a6ff80
editorOverviewRuler.infoForeground#3794ff
editorOverviewRuler.modifiedForeground#ffcc0099
editorOverviewRuler.rangeHighlightForeground#007acc99
editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
editorOverviewRuler.warningForeground#cca700
editorOverviewRuler.wordHighlightForeground#a0a0a0cc
editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
editorOverviewRuler.wordHighlightTextForeground#a0a0a0cc
editorPane.background#000000
editorRuler.foreground#18222d
editorStickyScroll.background#000000
editorStickyScrollHover.background#2a2d2e
editorSuggestWidget.background#000000
editorSuggestWidget.border#1d1d1d
editorSuggestWidget.focusHighlightForeground#26ff0080
editorSuggestWidget.foreground#ced5e5
editorSuggestWidget.highlightForeground#00ff00
editorSuggestWidget.selectedBackground#21212165
editorSuggestWidget.selectedForeground#44bb27
editorSuggestWidgetStatus.foreground#ced5e580
editorUnicodeHighlight.background#bd9b0326
editorUnicodeHighlight.border#bd9b03
editorUnnecessaryCode.opacity#000000aa
editorWarning.border#ffcc00
editorWarning.foreground#cca700
editorWhitespace.foreground#18222d
editorWidget.background#000000
editorWidget.border#454545
editorWidget.foreground#cccccc
errorForeground#f48771
extensionBadge.remoteBackground#000000
extensionBadge.remoteForeground#26ff0080
extensionButton.background#0e639c
extensionButton.foreground#ffffff
extensionButton.hoverBackground#26ff0080
extensionButton.prominentBackground#0e639c
extensionButton.prominentForeground#ffffff
extensionButton.prominentHoverBackground#26ff0080
extensionButton.separator#ffffff66
extensionIcon.preReleaseForeground#1d9271
extensionIcon.sponsorForeground#d758b3
extensionIcon.starForeground#ff8e00
extensionIcon.verifiedForeground#3794ff
focusBorder#000000
foreground#cccccc
icon.foreground#c5c5c5
input.background#000000
input.border#272727
input.foreground#cccccc
input.placeholderForeground#cccccc80
inputOption.activeBackground#97a7c866
inputOption.activeBorder#007acc
inputOption.activeForeground#ffffff
inputOption.hoverBackground#5a5d5e80
inputValidation.errorBackground#5a1d1d
inputValidation.errorBorder#be1100
inputValidation.infoBackground#063b49
inputValidation.infoBorder#007acc
inputValidation.warningBackground#352a05
inputValidation.warningBorder#b89500
interactive.activeCodeBorder#3794ff
interactive.inactiveCodeBorder#000000
keybindingLabel.background#8080802b
keybindingLabel.border#33333399
keybindingLabel.bottomBorder#44444499
keybindingLabel.foreground#cccccc
keybindingTable.headerBackground#cccccc0a
keybindingTable.rowsBackground#cccccc0a
list.activeSelectionBackground#000000
list.activeSelectionForeground#26ff0080
list.deemphasizedForeground#8c8c8c
list.dropBackground#062f4a
list.errorForeground#f88070
list.filterMatchBackground#ea5c0055
list.focusBackground#18222d
list.focusForeground#26ff0080
list.focusHighlightForeground#26ff0080
list.focusOutline#000000
list.highlightForeground#26ff0080
list.hoverBackground#292929
list.inactiveSelectionBackground#000000
list.inactiveSelectionForeground#26ff0080
list.invalidItemForeground#b89500
list.warningForeground#cca700
listFilterWidget.background#000000
listFilterWidget.noMatchesOutline#be1100
listFilterWidget.outline#00000000
listFilterWidget.shadow#18222d
menu.background#000000
menu.foreground#f0f0f0
menu.selectionBackground#000000
menu.selectionForeground#26ff0080
menu.separatorBackground#606060
menubar.selectionBackground#5a5d5e50
menubar.selectionForeground#cccccc
merge.commonContentBackground#60606029
merge.commonHeaderBackground#60606066
merge.currentContentBackground#40c8ae33
merge.currentHeaderBackground#40c8ae80
merge.incomingContentBackground#40a6ff33
merge.incomingHeaderBackground#40a6ff80
mergeEditor.change.background#9bb95533
mergeEditor.change.word.background#9ccc2c33
mergeEditor.changeBase.background#4b1818
mergeEditor.changeBase.word.background#6f1313
mergeEditor.conflict.handled.minimapOverViewRuler#adaca8ee
mergeEditor.conflict.handledFocused.border#c1c1c1cc
mergeEditor.conflict.handledUnfocused.border#86868649
mergeEditor.conflict.input1.background#40c8ae33
mergeEditor.conflict.input2.background#40a6ff33
mergeEditor.conflict.unhandled.minimapOverViewRuler#fcba03
mergeEditor.conflict.unhandledFocused.border#ffa600
mergeEditor.conflict.unhandledUnfocused.border#ffa6007a
mergeEditor.conflictingLines.background#ffea0047
minimap.errorHighlight#ff1212b3
minimap.findMatchHighlight#d18616
minimap.foregroundOpacity#000000
minimap.selectionHighlight#26ff0031
minimap.selectionOccurrenceHighlight#676767
minimap.warningHighlight#cca700
minimapGutter.addedBackground#56d6d6
minimapGutter.deletedBackground#fb467b
minimapGutter.modifiedBackground#26ff0080
minimapSlider.activeBackground#bfbfbf33
minimapSlider.background#18222d80
minimapSlider.hoverBackground#22303e80
notebook.cellBorderColor#000000
notebook.cellEditorBackground#000000
notebook.cellInsertionIndicator#97a7c8
notebook.cellStatusBarItemHoverBackground#ffffff26
notebook.cellToolbarSeparator#80808059
notebook.editorBackground#000000
notebook.focusedCellBorder#97a7c8
notebook.focusedEditorBorder#97a7c8
notebook.inactiveFocusedCellBorder#000000
notebook.selectedCellBackground#000000
notebook.selectedCellBorder#000000
notebook.symbolHighlightBackground#ffffff0b
notebookEditorOverviewRuler.runningCellForeground#89d185
notebookScrollbarSlider.activeBackground#bfbfbf66
notebookScrollbarSlider.background#18222d
notebookScrollbarSlider.hoverBackground#22303e
notebookStatusErrorIcon.foreground#f48771
notebookStatusRunningIcon.foreground#cccccc
notebookStatusSuccessIcon.foreground#89d185
notificationCenterHeader.background#000000
notificationLink.foreground#3794ff
notifications.background#000000
notifications.border#000000
notifications.foreground#cccccc
notificationsErrorIcon.foreground#f14c4c
notificationsInfoIcon.foreground#3794ff
notificationsWarningIcon.foreground#cca700
panel.background#000000
panel.border#000000
panel.dropBorder#26ff0080
panelInput.border#26ff0080
panelSection.border#000000
panelSection.dropBackground#53595d80
panelSectionHeader.background#80808033
panelTitle.activeBorder#26ff0080
panelTitle.activeForeground#26ff0080
panelTitle.inactiveForeground#97a7c8
peekView.border#3794ff
peekViewEditor.background#001f33
peekViewEditor.matchHighlightBackground#ff8f0099
peekViewEditorGutter.background#001f33
peekViewResult.background#252526
peekViewResult.fileForeground#ffffff
peekViewResult.lineForeground#bbbbbb
peekViewResult.matchHighlightBackground#ea5c004d
peekViewResult.selectionBackground#3399ff33
peekViewResult.selectionForeground#ffffff
peekViewTitle.background#3794ff1a
peekViewTitleDescription.foreground#ccccccb3
peekViewTitleLabel.foreground#ffffff
pickerGroup.border#3f3f46
pickerGroup.foreground#3794ff
ports.iconRunningProcessForeground#26ff0080
problemsErrorIcon.foreground#f14c4c
problemsInfoIcon.foreground#3794ff
problemsWarningIcon.foreground#cca700
progressBar.background#0e70c0
quickInput.background#000000
quickInput.foreground#cccccc
quickInputList.focusBackground#000000
quickInputList.focusForeground#26ff0080
quickInputTitle.background#ffffff1b
sash.hoverBorder#97a7c8
scm.providerBorder#454545
scrollbar.shadow#000000
scrollbarSlider.activeBackground#353a34
scrollbarSlider.background#202121
scrollbarSlider.hoverBackground#383a3b
searchEditor.findMatchBackground#ea5c0038
searchEditor.textInputBorder#26ff0080
settings.checkboxBackground#000000
settings.checkboxBorder#97a7c8
settings.checkboxForeground#f0f0f0
settings.dropdownBackground#000000
settings.dropdownBorder#97a7c8
settings.dropdownForeground#f0f0f0
settings.dropdownListBorder#454545
settings.focusedRowBackground#18222d99
settings.focusedRowBorder#97a7c8
settings.headerBorder#000000
settings.headerForeground#e7e7e7
settings.modifiedItemIndicator#0c7d9d
settings.numberInputBackground#000000
settings.numberInputBorder#26ff0080
settings.numberInputForeground#cccccc
settings.rowHoverBackground#18222d4d
settings.sashBorder#000000
settings.settingsHeaderHoverForeground#e7e7e7b3
settings.textInputBackground#000000
settings.textInputBorder#26ff0080
settings.textInputForeground#cccccc
sideBar.background#000000
sideBar.dropBackground#53595d80
sideBarSectionHeader.background#000000
sideBySideEditor.horizontalBorder#000000
sideBySideEditor.verticalBorder#000000
statusBar.background#000000
statusBar.debuggingBackground#000000
statusBar.debuggingForeground#97a7c8
statusBar.focusBorder#000000
statusBar.foreground#9ea19dc9
statusBar.noFolderBackground#26ff0080
statusBar.noFolderForeground#000000
statusBarItem.activeBackground#ffffff2e
statusBarItem.compactHoverBackground#ffffff33
statusBarItem.errorBackground#c72e0f
statusBarItem.errorForeground#ffffff
statusBarItem.focusBorder#97a7c8
statusBarItem.hoverBackground#ffffff1f
statusBarItem.prominentBackground#00000080
statusBarItem.prominentForeground#97a7c8
statusBarItem.prominentHoverBackground#0000004d
statusBarItem.remoteBackground#26ff0080
statusBarItem.remoteForeground#000000
statusBarItem.warningBackground#7a6400
statusBarItem.warningForeground#ffffff
symbolIcon.arrayForeground#cccccc
symbolIcon.booleanForeground#cccccc
symbolIcon.classForeground#ee9d28
symbolIcon.colorForeground#cccccc
symbolIcon.constantForeground#cccccc
symbolIcon.constructorForeground#b180d7
symbolIcon.enumeratorForeground#ee9d28
symbolIcon.enumeratorMemberForeground#75beff
symbolIcon.eventForeground#ee9d28
symbolIcon.fieldForeground#75beff
symbolIcon.fileForeground#cccccc
symbolIcon.folderForeground#cccccc
symbolIcon.functionForeground#b180d7
symbolIcon.interfaceForeground#75beff
symbolIcon.keyForeground#cccccc
symbolIcon.keywordForeground#cccccc
symbolIcon.methodForeground#b180d7
symbolIcon.moduleForeground#cccccc
symbolIcon.namespaceForeground#cccccc
symbolIcon.nullForeground#cccccc
symbolIcon.numberForeground#cccccc
symbolIcon.objectForeground#cccccc
symbolIcon.operatorForeground#cccccc
symbolIcon.packageForeground#cccccc
symbolIcon.propertyForeground#cccccc
symbolIcon.referenceForeground#cccccc
symbolIcon.snippetForeground#cccccc
symbolIcon.stringForeground#cccccc
symbolIcon.structForeground#cccccc
symbolIcon.textForeground#cccccc
symbolIcon.typeParameterForeground#cccccc
symbolIcon.unitForeground#cccccc
symbolIcon.variableForeground#75beff
tab.activeBackground#000000
tab.activeBorder#26ff009c
tab.activeForeground#ffffff
tab.activeModifiedBorder#3399cc
tab.border#000000
tab.inactiveBackground#000000
tab.inactiveForeground#26ff0045
tab.inactiveModifiedBorder#3399cc80
tab.lastPinnedBorder#585858
tab.unfocusedActiveBackground#000000
tab.unfocusedActiveBorder#293929
tab.unfocusedActiveForeground#ffd30080
tab.unfocusedActiveModifiedBorder#3399cc80
tab.unfocusedInactiveBackground#000000
tab.unfocusedInactiveForeground#97a7c880
tab.unfocusedInactiveModifiedBorder#3399cc40
terminal.ansiBlack#000000
terminal.ansiBlue#2472c8
terminal.ansiBrightBlack#666666
terminal.ansiBrightBlue#3b8eea
terminal.ansiBrightCyan#29b8db
terminal.ansiBrightGreen#23d18b
terminal.ansiBrightMagenta#d670d6
terminal.ansiBrightRed#f14c4c
terminal.ansiBrightWhite#e5e5e5
terminal.ansiBrightYellow#ffd300
terminal.ansiCyan#11a8cd
terminal.ansiGreen#0dbc79
terminal.ansiMagenta#bc3fbc
terminal.ansiRed#cd3131
terminal.ansiWhite#e5e5e5
terminal.ansiYellow#e5e510
terminal.border#000000
terminal.dropBackground#53595d80
terminal.findMatchBackground#18222d
terminal.findMatchHighlightBackground#ea5c0055
terminal.foreground#cccccc
terminal.inactiveSelectionBackground#18222d80
terminal.selectionBackground#18222d
terminal.tab.activeBorder#26ff0037
terminalCommandDecoration.defaultBackground#ffffff40
terminalCommandDecoration.errorBackground#f14c4c
terminalCommandDecoration.successBackground#1b81a8
terminalOverviewRuler.cursorForeground#a0a0a0cc
terminalOverviewRuler.findMatchForeground#d186167e
testing.iconErrored#f14c4c
testing.iconFailed#f14c4c
testing.iconPassed#73c991
testing.iconQueued#cca700
testing.iconSkipped#848484
testing.iconUnset#848484
testing.message.error.decorationForeground#f14c4c
testing.message.error.lineBackground#ff000033
testing.message.info.decorationForeground#ced5e580
testing.peekBorder#f14c4c
testing.peekHeaderBackground#f14c4c1a
testing.runAction#73c991
textBlockQuote.background#7f7f7f1a
textBlockQuote.border#007acc80
textCodeBlock.background#0a0a0a66
textLink.activeForeground#3794ff
textLink.foreground#3794ff
textPreformat.foreground#d7ba7d
textSeparator.foreground#ffffff2e
titleBar.activeBackground#000000
titleBar.activeForeground#e2e5e2a9
titleBar.inactiveBackground#000000
titleBar.inactiveForeground#7c7a7a
toolbar.activeBackground#63666750
toolbar.hoverBackground#5a5d5e50
tree.inactiveIndentGuidesStroke#58585866
tree.indentGuidesStroke#585858
tree.tableColumnsBorder#cccccc20
tree.tableOddRowsBackground#cccccc0a
walkthrough.stepTitle.foreground#ffffff
welcomePage.progress.background#000000
welcomePage.progress.foreground#3794ff
welcomePage.tileBackground#000000
welcomePage.tileBorder#ffffff1a
welcomePage.tileHoverBackground#000000
widget.shadow#181717b6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
	—	bold
comment, punctuation.definition.comment	#546E7A	bold italic
variable, string constant.other.placeholder	#EEFFFF	—
constant.other.color	#ffffff	—
invalid, invalid.illegal	#FF5370	—
keyword, storage.type, storage.modifier	#C792EA	—
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution	#89DDFF	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#f07178	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#82AAFF	—
meta.block variable.other	#f07178	—
support.other.variable, string.other.link	#f07178	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other	#F78C6C	—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#C3E88D	—
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#FFCB6B	—
support.type	#B2CCD6	—
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	#B2CCD6	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#FF5370	—
variable.language	#FF5370	italic
entity.name.method.js	#82AAFF	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#82AAFF	—
entity.other.attribute-name	#C792EA	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#FFCB6B	italic
entity.other.attribute-name.class	#FFCB6B	—
source.sass keyword.control	#82AAFF	—
markup.inserted	#C3E88D	—
markup.deleted	#FF5370	—
markup.changed	#C792EA	—
string.regexp	#89DDFF	—
constant.character.escape	#89DDFF	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#82AAFF	italic
source.js constant.other.object.key.js string.unquoted.label.js	#FF5370	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#C792EA	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#FFCB6B	—
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	#F78C6C	—
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	#FF5370	—
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	#C17E70	—
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	#82AAFF	—
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	#f07178	—
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	#C792EA	—
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	#C3E88D	—
text.html.markdown, punctuation.definition.list_item.markdown	#EEFFFF	—
text.html.markdown markup.inline.raw.markdown	#C792EA	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#65737E	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#C3E88D	—
markup.italic	#f07178	italic
markup.bold, markup.bold string	#f07178	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	#f07178	bold
markup.underline	#F78C6C	underline
markup.quote punctuation.definition.blockquote.markdown	#65737E	—
markup.quote	—	italic
string.other.link.title.markdown	#82AAFF	—
string.other.link.description.title.markdown	#C792EA	—
constant.other.reference.link.markdown	#FFCB6B	—
markup.raw.block	#C792EA	—
markup.raw.block.fenced.markdown	#00000050	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#EEFFFF	—
variable.language.fenced.markdown	#65737E	—
meta.separator	#65737E	bold
markup.table	#EEFFFF	—

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