DS Temas

Name: DS Temas
Author: FelipeSantos92Dev

Publisher: FelipeSantos92DevThemes in package: 10

Temas desenvolvidos com base nas cores preferenciais dos alunos do curso de Desenvolvimento de Sistemas de Valinhos

Open in VS Code GitHub

Color themes

VS Code preview

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

DS Temas — Bernardo - Santos Away

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#00000015
activityBar.activeBorder#000000
activityBar.background#FFFFFF
activityBar.border#DDDDDD
activityBar.dropBorder#000000
activityBar.foreground#000000
activityBar.inactiveForeground#888888
activityBarBadge.background#000000
activityBarBadge.foreground#FFFFFF
activityBarTop.activeBorder#000000
activityBarTop.dropBorder#000000
activityBarTop.foreground#000000
activityBarTop.inactiveForeground#888888
badge.background#FFFFFF
badge.foreground#000000
breadcrumb.activeSelectionForeground#000000
breadcrumb.background#FFFFFF
breadcrumb.focusForeground#000000
breadcrumb.foreground#000000
breadcrumbPicker.background#FFFFFF
button.background#FFFFFF
button.border#CCCCCC
button.foreground#000000
button.hoverBackground#EEEEEE
button.secondaryBackground#3A3A3A
button.secondaryForeground#FFFFFF
button.secondaryHoverBackground#4A4A4A
button.separator#000000
charts.blue#4787F4
charts.foreground#000000
charts.green#47F47B
charts.lines#666666
charts.orange#E9A16C
charts.purple#F447F4
charts.red#F44747
charts.yellow#E9D16C
chat.avatarBackground#000000
chat.avatarForeground#FFFFFF
chat.requestBorder#DDDDDD
chat.slashCommandBackground#EEEEEE
chat.slashCommandForeground#000000
commandCenter.activeBackground#EEEEEE
commandCenter.activeForeground#000000
commandCenter.background#FFFFFF
commandCenter.border#DDDDDD
commandCenter.foreground#000000
contrastActiveBorder#FFFFFF00
contrastBorder#FFFFFF00
debugConsole.errorForeground#F44747
debugConsole.infoForeground#4787F4
debugConsole.sourceForeground#FFFFFF
debugConsole.warningForeground#E9D16C
debugConsoleInputIcon.foreground#FFFFFF
debugExceptionWidget.background#5A1D1D
debugExceptionWidget.border#F44747
debugIcon.breakpointCurrentStackframeForeground#F44747
debugIcon.breakpointDisabledForeground#8C8C8C
debugIcon.breakpointForeground#F44747
debugIcon.breakpointUnverifiedForeground#E9A16C
debugIcon.continueForeground#4787F4
debugIcon.disconnectForeground#F44747
debugIcon.pauseForeground#E9D16C
debugIcon.restartForeground#47F47B
debugIcon.startForeground#47F47B
debugIcon.stepBackForeground#4787F4
debugIcon.stepIntoForeground#4787F4
debugIcon.stepOutForeground#4787F4
debugIcon.stepOverForeground#4787F4
debugIcon.stopForeground#F44747
debugTokenExpression.boolean#F447F4
debugTokenExpression.error#F44747
debugTokenExpression.name#FFFFFF
debugTokenExpression.number#E9D16C
debugTokenExpression.string#47F47B
debugTokenExpression.value#4787F4
debugToolBar.background#1E1E1E
debugToolBar.border#FFFFFF
debugView.stateLabelBackground#1E1E1E
debugView.stateLabelForeground#FFFFFF
debugView.valueChangedHighlight#4787F4AA
descriptionForeground#CCCCCC
diffEditor.border#FFFFFF
diffEditor.diagonalFill#333333
diffEditor.insertedLineBackground#47F47B22
diffEditor.insertedTextBackground#47F47B22
diffEditor.insertedTextBorder#00000000
diffEditor.removedLineBackground#F4474722
diffEditor.removedTextBackground#F4474722
diffEditor.removedTextBorder#00000000
diffEditor.unchangedCodeBackground#1A1A1A
diffEditorGutter.insertedLineBackground#47F47B22
diffEditorGutter.removedLineBackground#F4474722
diffEditorOverview.insertedForeground#47F47B
diffEditorOverview.removedForeground#F44747
disabledForeground#888888
dropdown.background#FFFFFF
dropdown.border#CCCCCC
dropdown.foreground#000000
dropdown.listBackground#FFFFFF
editor.background#0A0A0A
editor.findMatchBackground#FFFFFF66
editor.findMatchBorder#FFFFFF
editor.findMatchHighlightBackground#FFFFFF33
editor.findMatchHighlightBorder#FFFFFF66
editor.findRangeHighlightBackground#FFFFFF22
editor.focusedStackFrameHighlightBackground#47F47B44
editor.foldBackground#FFFFFF11
editor.foreground#FFFFFF
editor.hoverHighlightBackground#FFFFFF22
editor.inactiveSelectionBackground#2A2A2A
editor.lineHighlightBackground#1A1A1A
editor.lineHighlightBorder#2A2A2A
editor.linkedEditingBackground#2A2A2A
editor.rangeHighlightBackground#FFFFFF22
editor.selectionBackground#3A3A3A
editor.selectionForeground#FFFFFF
editor.selectionHighlightBackground#2A2A2A
editor.selectionHighlightBorder#333333
editor.stackFrameHighlightBackground#E9D16C44
editor.wordHighlightBackground#FFFFFF33
editor.wordHighlightBorder#FFFFFF33
editor.wordHighlightStrongBackground#FFFFFF22
editor.wordHighlightStrongBorder#FFFFFF33
editorBracketHighlight.foreground1#FFFFFF
editorBracketHighlight.foreground2#CCCCCC
editorBracketHighlight.foreground3#A0A0A0
editorBracketHighlight.foreground4#8C8C8C
editorBracketHighlight.foreground5#7A7A7A
editorBracketHighlight.foreground6#666666
editorBracketHighlight.unexpectedBracket.foreground#F44747
editorBracketMatch.background#3A3A3A
editorBracketMatch.border#FFFFFF
editorBracketPairGuide.activeBackground1#FFFFFF
editorBracketPairGuide.activeBackground2#CCCCCC
editorBracketPairGuide.activeBackground3#A0A0A0
editorBracketPairGuide.activeBackground4#8C8C8C
editorBracketPairGuide.activeBackground5#7A7A7A
editorBracketPairGuide.activeBackground6#666666
editorCodeLens.foreground#8C8C8C
editorCursor.background#000000
editorCursor.foreground#FFFFFF
editorError.border#00000000
editorError.foreground#F44747
editorGhostText.border#00000000
editorGhostText.foreground#FFFFFF77
editorGroup.border#FFFFFF
editorGroup.dropBackground#00000015
editorGroupHeader.border#DDDDDD
editorGroupHeader.noTabsBackground#FFFFFF
editorGroupHeader.tabsBackground#FFFFFF
editorGroupHeader.tabsBorder#DDDDDD
editorGutter.addedBackground#47F47B
editorGutter.background#0A0A0A
editorGutter.commentRangeForeground#666666
editorGutter.deletedBackground#F44747
editorGutter.modifiedBackground#4787F4
editorHint.border#00000000
editorHint.foreground#4787F4
editorHoverWidget.background#1A1A1A
editorHoverWidget.border#FFFFFF
editorIndentGuide.activeBackground1#555555
editorIndentGuide.background1#333333
editorInfo.border#00000000
editorInfo.foreground#4787F4
editorInlayHint.background#1E1E1E
editorInlayHint.foreground#A0A0A0
editorInlayHint.typeBackground#1E1E1E
editorInlayHint.typeForeground#A0A0A0
editorLightBulb.foreground#E9D16C
editorLightBulbAutoFix.foreground#E9D16C
editorLineNumber.activeForeground#FFFFFF
editorLineNumber.foreground#888888
editorLink.activeForeground#FFFFFF
editorMarkerNavigation.background#1A1A1A
editorMarkerNavigationError.background#5A1D1D
editorMarkerNavigationInfo.background#1D3A5A
editorMarkerNavigationWarning.background#5A4D1D
editorOverviewRuler.addedForeground#47F47B
editorOverviewRuler.border#000000
editorOverviewRuler.bracketMatchForeground#FFFFFF66
editorOverviewRuler.deletedForeground#F44747
editorOverviewRuler.errorForeground#F44747
editorOverviewRuler.findMatchForeground#FFFFFF
editorOverviewRuler.infoForeground#4787F4
editorOverviewRuler.modifiedForeground#4787F4
editorOverviewRuler.rangeHighlightForeground#FFFFFF44
editorOverviewRuler.selectionHighlightForeground#FFFFFF22
editorOverviewRuler.warningForeground#E9D16C
editorOverviewRuler.wordHighlightForeground#FFFFFF44
editorOverviewRuler.wordHighlightStrongForeground#FFFFFF66
editorPane.background#0E0E0E
editorRuler.foreground#333333
editorStickyScroll.background#1A1A1A
editorStickyScrollHover.background#2A2A2A
editorSuggestWidget.background#1A1A1A
editorSuggestWidget.border#FFFFFF
editorSuggestWidget.foreground#FFFFFF
editorSuggestWidget.highlightForeground#FFFFFF
editorSuggestWidget.selectedBackground#2A2A2A
editorSuggestWidget.selectedIconForeground#FFFFFF
editorUnnecessaryCode.border#00000000
editorUnnecessaryCode.opacity#FFFFFF88
editorWarning.border#00000000
editorWarning.foreground#E9D16C
editorWhitespace.foreground#333333
editorWidget.background#1A1A1A
editorWidget.border#FFFFFF
editorWidget.foreground#FFFFFF
editorWidget.resizeBorder#FFFFFF
errorForeground#F44747
errorLens.errorForeground#F4474799
errorLens.hintForeground#4787F499
errorLens.infoForeground#4787F499
errorLens.warningForeground#E9D16C99
extensionBadge.remoteBackground#FFFFFF
extensionBadge.remoteForeground#000000
extensionButton.background#3A3A3A
extensionButton.foreground#FFFFFF
extensionButton.hoverBackground#4A4A4A
extensionButton.prominentBackground#FFFFFFDD
extensionButton.prominentForeground#000000
extensionButton.prominentHoverBackground#CCCCCC
focusBorder#FFFFFF
foreground#FFFFFF
gitDecoration.addedResourceForeground#47F47B
gitDecoration.conflictingResourceForeground#E9D16C
gitDecoration.deletedResourceForeground#F44747
gitDecoration.ignoredResourceForeground#666666
gitDecoration.modifiedResourceForeground#4787F4
gitDecoration.renamedResourceForeground#4787F4
gitDecoration.stageDeletedResourceForeground#F44747
gitDecoration.stageModifiedResourceForeground#4787F4
gitDecoration.untrackedResourceForeground#47F47B
icon.foreground#FFFFFF
inlineChat.background#FFFFFF
inlineChat.border#DDDDDD
inlineChat.regionHighlight#00000015
inlineChat.shadow#00000022
inlineChatDiff.inserted#47F47B22
inlineChatDiff.removed#F4474722
inlineChatInput.background#FFFFFF
inlineChatInput.border#DDDDDD
inlineChatInput.focusBorder#000000
inlineChatInput.placeholderForeground#888888
input.background#1A1A1A
input.border#FFFFFF
input.foreground#FFFFFF
input.placeholderForeground#BBBBBB
inputOption.activeBackground#3A3A3A
inputOption.activeBorder#FFFFFF
inputOption.activeForeground#FFFFFF
inputOption.hoverBackground#2A2A2A
inputValidation.errorBackground#5A1D1D
inputValidation.errorBorder#F44747
inputValidation.infoBackground#1D3A5A
inputValidation.infoBorder#4787F4
inputValidation.warningBackground#5A4D1D
inputValidation.warningBorder#F4E147
keybindingLabel.background#FFFFFF
keybindingLabel.border#DDDDDD
keybindingLabel.bottomBorder#BBBBBB
keybindingLabel.foreground#000000
list.activeSelectionBackground#2A2A2A
list.activeSelectionForeground#FFFFFF
list.deemphasizedForeground#8C8C8C
list.dropBackground#FFFFFF10
list.errorForeground#F44747
list.focusBackground#3A3A3A
list.focusForeground#FFFFFF
list.highlightForeground#FFFFFF
list.hoverBackground#2A2A2A
list.hoverForeground#FFFFFF
list.inactiveSelectionBackground#1E1E1E
list.inactiveSelectionForeground#FFFFFF
list.warningForeground#E9D16C
listFilterWidget.background#1E1E1E
listFilterWidget.noMatchesOutline#F44747
listFilterWidget.outline#FFFFFF
menu.background#FFFFFF
menu.border#DDDDDD
menu.foreground#000000
menu.selectionBackground#EEEEEE
menu.selectionForeground#000000
menu.separatorBackground#DDDDDD
menubar.selectionBackground#EEEEEE
menubar.selectionForeground#000000
merge.border#FFFFFF
merge.commonContentBackground#E9D16C22
merge.commonHeaderBackground#E9D16C44
merge.currentContentBackground#47F47B22
merge.currentHeaderBackground#47F47B44
merge.incomingContentBackground#4787F422
merge.incomingHeaderBackground#4787F444
mergeEditor.change.background#47F47B22
mergeEditor.change.word.background#47F47B44
mergeEditor.conflict.handled.minimapOverViewRuler#47F47B
mergeEditor.conflict.handledFocused.border#47F47B
mergeEditor.conflict.handledUnfocused.border#47F47B88
mergeEditor.conflict.unhandled.minimapOverViewRuler#E9D16C
mergeEditor.conflict.unhandledFocused.border#E9D16C
mergeEditor.conflict.unhandledUnfocused.border#E9D16C88
minimap.background#0E0E0E
minimap.errorHighlight#F44747
minimap.findMatchHighlight#FFFFFF66
minimap.selectionHighlight#FFFFFF33
minimap.warningHighlight#E9D16C
minimapGutter.addedBackground#47F47B
minimapGutter.deletedBackground#F44747
minimapGutter.modifiedBackground#4787F4
multiDiffEditor.border#FFFFFF
multiDiffEditor.headerBackground#1E1E1E
notebook.cellBorderColor#FFFFFF
notebook.cellEditorBackground#0A0A0A
notebook.cellInsertionIndicator#FFFFFF
notebook.cellStatusBarItemHoverBackground#2A2A2A
notebook.cellToolbarSeparator#FFFFFF
notebook.editorBackground#0A0A0A
notebook.focusedCellBorder#FFFFFF
notebook.focusedEditorBorder#FFFFFF
notebook.inactiveFocusedCellBorder#666666
notebook.inactiveSelectedCellBorder#666666
notebook.outputContainerBackgroundColor#1A1A1A
notebook.selectedCellBackground#1E1E1E
notebook.selectedCellBorder#FFFFFF
notebook.symbolHighlightBackground#FFFFFF66
notebookScrollbarSlider.activeBackground#FFFFFF44
notebookScrollbarSlider.background#FFFFFF22
notebookScrollbarSlider.hoverBackground#FFFFFF33
notebookStatusErrorIcon.foreground#F44747
notebookStatusRunningIcon.foreground#4787F4
notebookStatusSuccessIcon.foreground#47F47B
notificationCenter.border#FFFFFF
notificationCenterHeader.background#FFFFFF
notificationCenterHeader.foreground#000000
notificationLink.foreground#4787F4
notifications.background#FFFFFF
notifications.border#DDDDDD
notifications.foreground#000000
notificationsErrorIcon.foreground#F44747
notificationsInfoIcon.foreground#4787F4
notificationsWarningIcon.foreground#E9D16C
notificationToast.border#FFFFFF
panel.background#1A1A1A
panel.border#FFFFFF
panel.dropBorder#FFFFFF
panelInput.border#FFFFFF
panelSection.border#FFFFFF
panelSection.dropBackground#FFFFFF10
panelSectionHeader.background#2A2A2A
panelSectionHeader.border#FFFFFF
panelSectionHeader.foreground#FFFFFF
panelTitle.activeBorder#FFFFFF
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#A0A0A0
peekView.border#FFFFFF
peekViewEditor.background#1A1A1A
peekViewEditor.matchHighlightBackground#FFFFFF66
peekViewEditor.matchHighlightBorder#00000000
peekViewEditorGutter.background#1A1A1A
peekViewEditorStickyScroll.background#1E1E1E
peekViewResult.background#1E1E1E
peekViewResult.fileForeground#FFFFFF
peekViewResult.lineForeground#D4D4D4
peekViewResult.matchHighlightBackground#FFFFFF66
peekViewResult.selectionBackground#FFFFFF22
peekViewResult.selectionForeground#FFFFFF
peekViewTitle.background#0A0A0A
peekViewTitleDescription.foreground#D4D4D4
peekViewTitleLabel.foreground#FFFFFF
pickerGroup.border#000000
pickerGroup.foreground#FFFFFF
profileBadge.background#FFFFFF
profileBadge.foreground#000000
progressBar.background#FFFFFF
quickInput.background#1A1A1A
quickInput.foreground#FFFFFF
quickInputList.focusBackground#FFFFFF
quickInputList.focusForeground#000000
quickInputList.focusIconForeground#000000
quickInputTitle.background#000000
sash.hoverBorder#FFFFFF
scmGraph.historyItemAdditionsForeground#47F47B
scmGraph.historyItemBaseRefColor#F44747
scmGraph.historyItemDefaultLabelForeground#000000
scmGraph.historyItemDeletionsForeground#F44747
scmGraph.historyItemHoverDefaultLabelForeground#000000
scmGraph.historyItemHoverLabelForeground#000000
scmGraph.historyItemRemoteRefColor#47F47B
scrollbar.shadow#00000066
scrollbarSlider.activeBackground#FFFFFF44
scrollbarSlider.background#FFFFFF26
scrollbarSlider.hoverBackground#FFFFFF33
selection.background#FFFFFF40
settings.headerForeground#FFFFFF
settings.modifiedItemIndicator#FFFFFF
sideBar.background#0E0E0E
sideBar.border#000000
sideBar.dropBackground#2A2A2A
sideBar.foreground#D4D4D4
sideBarSectionHeader.background#1A1A1A
sideBarSectionHeader.border#000000
sideBarSectionHeader.foreground#FFFFFF
sideBarStickyScroll.background#121212
sideBarStickyScroll.shadow#00000066
sideBarTitle.foreground#FFFFFF
statusBar.background#FFFFFF
statusBar.border#DDDDDD
statusBar.debuggingBackground#FFCC66
statusBar.debuggingBorder#FFBB44
statusBar.debuggingForeground#000000
statusBar.foreground#000000
statusBar.noFolderBackground#FFFFFF
statusBar.noFolderBorder#DDDDDD
statusBar.noFolderForeground#000000
statusBarItem.activeBackground#EEEEEE
statusBarItem.compactHoverBackground#EEEEEE
statusBarItem.errorBackground#F44747
statusBarItem.errorForeground#FFFFFF
statusBarItem.errorHoverBackground#FF5E5E
statusBarItem.errorHoverForeground#FFFFFF
statusBarItem.hoverBackground#EEEEEE
statusBarItem.hoverForeground#000000
statusBarItem.offlineBackground#666666
statusBarItem.offlineForeground#FFFFFF
statusBarItem.offlineHoverBackground#808080
statusBarItem.prominentBackground#EEEEEE
statusBarItem.prominentForeground#000000
statusBarItem.prominentHoverBackground#DDDDDD
statusBarItem.remoteBackground#000000
statusBarItem.remoteForeground#FFFFFF
statusBarItem.remoteHoverBackground#333333
statusBarItem.remoteHoverForeground#FFFFFF
statusBarItem.warningBackground#E9D16C
statusBarItem.warningForeground#000000
statusBarItem.warningHoverBackground#F4E147
statusBarItem.warningHoverForeground#000000
tab.activeBackground#0A0A0A
tab.activeBorder#FFFFFF
tab.activeBorderTop#000000
tab.activeForeground#FFFFFF
tab.activeModifiedBorder#4787F4
tab.border#DDDDDD
tab.hoverBackground#EEEEEE
tab.hoverForeground#000000
tab.inactiveBackground#FFFFFF
tab.inactiveForeground#000000
tab.inactiveModifiedBorder#4787F499
tab.lastPinnedBorder#DDDDDD
tab.unfocusedActiveBorder#A0A0A0
tab.unfocusedActiveForeground#CCCCCC
tab.unfocusedHoverBackground#EEEEEE
tab.unfocusedHoverForeground#000000
tab.unfocusedInactiveForeground#666666
terminal.ansiBlack#000000
terminal.ansiBlue#4787F4
terminal.ansiBrightBlack#666666
terminal.ansiBrightBlue#5E9EFF
terminal.ansiBrightCyan#5EFFFF
terminal.ansiBrightGreen#5EFF8F
terminal.ansiBrightMagenta#FF5EFF
terminal.ansiBrightRed#FF5E5E
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FFEE80
terminal.ansiCyan#47F4F4
terminal.ansiGreen#47F47B
terminal.ansiMagenta#F447F4
terminal.ansiRed#F44747
terminal.ansiWhite#CCCCCC
terminal.ansiYellow#E9D16C
terminal.background#0A0A0A
terminal.foreground#FFFFFF
terminal.selectionBackground#FFFFFF22
terminal.selectionForeground#FFFFFF
terminalCursor.background#000000
terminalCursor.foreground#FFFFFF
terminalStickyScrollHover.background#1E1E1E
textBlockQuote.background#1A1A1A
textBlockQuote.border#FFFFFF
textCodeBlock.background#1A1A1A
textLink.activeForeground#CCCCCC
textLink.foreground#FFFFFF
textPreformat.foreground#D4D4D4
textSeparator.foreground#FFFFFF
titleBar.activeBackground#FFFFFF
titleBar.activeForeground#000000
titleBar.border#DDDDDD
titleBar.inactiveBackground#EEEEEE
titleBar.inactiveForeground#666666
toolbar.activeBackground#DDDDDD
toolbar.hoverBackground#EEEEEE
tree.indentGuidesStroke#333333
walkThrough.embeddedEditorBackground#1A1A1A
welcomePage.progress.background#FFFFFF
welcomePage.progress.foreground#000000
welcomePage.tileBackground#0A0A0A
welcomePage.tileBorder#FFFFFF
welcomePage.tileHoverBackground#1E1E1E
widget.shadow#00000066
window.activeBorder#FFFFFF
window.inactiveBorder#CCCCCC

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.quoted.docstring.multi, comment.block.documentation source	#777777	italic
constant, support.constant.core.php	#A9A9FF	—
constant.numeric, constant.language, constant.character, constant.other	#7EB6FF	—
variable, variable.language, variable.other.readwrite, variable.parameter, meta.method.body, entity.name.variable, punctuation.definition.variable	#E0E0E0	—
entity.name.function.decorator, meta.decorator entity.name.function, meta.decorator punctuation.decorator, punctuation.definition.decorator, meta.decorator variable.other.readwrite.ts, variable.parameter.gdscript, entity.name.variable.parameter, variable.parameter	#BBBBBB	—
keyword, keyword.control, keyword.control.conditional, keyword.control.import, keyword.control.export, keyword.control.flow, keyword.control.from, keyword.control.return, keyword.operator.new, keyword.operator.expression, storage.modifier, storage.type.class	#FFFFFF	bold
support.function, entity.name.function, meta.function-call, meta.function, meta.method.declaration, meta.function-call support, variable.language.super.ts, variable.function, entity.name.function-call	#E0E0E0	bold
entity.name.type, support.type, support.class, storage.type, entity.other.inherited-class, entity.name.class, entity.name.type.class	#FFFFFF	—
string, string.template, string.quoted.single, string.quoted.double, punctuation.definition.string, punctuation.definition.string.template, punctuation.definition.string.begin, punctuation.definition.string.end	#B3E6B3	—
punctuation, meta.brace, punctuation.definition.parameters, punctuation.definition.block, punctuation.terminator, punctuation.separator, meta.tag.xml, meta.tag.preprocessor.xml	#BBBBBB	—
keyword.operator.comparison, storage.type.function.arrow, keyword.operator.assignment, keyword.operator.relational, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.math, keyword.operator.ternary	#FFFFFF	—
entity.name.tag, punctuation.definition.tag	#FFFFFF	bold
entity.other.attribute-name	#DDDDDD	italic
variable.other.property, variable.other.object.property, meta.object-literal.key, entity.name.tag.css, support.type.property-name	#CCCCCC	—
support.module.elm, entity.other.inherited-class.python, variable.other.object, support.other.namespace.php, entity.other.attribute-name.namespace.xml, record.accessor, entity.name.record.field.accessor, storage.modifier.import.java, storage.modifier.import.groovy, meta.import.swift entity.name.type.swift, meta.member.access.python	#CCCCCC	—
meta.section.struct.go variable.other.field.go, meta.section.struct.go variable.other.declaration.go, source, support, constant.character.entity.named, meta.jsx.children, source.lua, text.html.derivative, JSXNested	#E0E0E0	—
entity.name.package.go, variable.language.this, variable.language.special.self, variable.parameter.function.language.special.self, variable.language.this.php punctuation.definition.variable.php	#FFFFFF	—
storage, meta.var.expr storage.type, storage.type.function, keyword.function, storage.type.class, storage.type.property, keyword.other, keyword.local.lua, storage.type.enum, storage.type.interface, storage.type.type, keyword.storage.modifier	#FFFFFF	—
entity.name.function.constructor	#FFFFFF	bold
support.constant.property-value, support.constant.font-name	#7EB6FF	—
keyword.other.unit	#7EB6FF	—
constant.other.color	#7EB6FF	—
markup.bold, punctuation.definition.bold	#FFFFFF	bold
markup.italic, punctuation.definition.italic	#FFFFFF	italic
markup.heading, entity.name.section, punctuation.definition.heading	#FFFFFF	bold
markup.underline.link, markup.underline.link.image	#7EB6FF	—
markup.quote, punctuation.definition.quote.begin	#B3E6B3	italic
markup.inline.raw.string.markdown, punctuation.definition.raw.markdown, markup.fenced_code.block.markdown, markup.fenced_code.block.markdown punctuation, markup.raw.block.markdown	#7EB6FF	—
fenced_code.block.language	#FFFFFF	—
punctuation.definition.list.begin	#FFFFFF	—
markup.inserted, markup.inserted.git_gutter	#B3E6B3	—
markup.deleted, markup.deleted.git_gutter	#F47777	—
markup.changed, markup.changed.git_gutter	#7EB6FF	—
markup.table	#FFFFFF	—
string.regexp	#EE99EE	—
constant.character.escape	#7EB6FF	—
entity.other.attribute-name.class, entity.other.attribute-name.class punctuation.definition.entity	#7EB6FF	—
entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity	#FFFFFF	—
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element	#BBBBBB	—
invalid, invalid.illegal	#F47777	—
invalid.deprecated	#EE99EE	—
meta.diff.header.from-file, meta.diff.header.to-file	#7EB6FF	—
markup.inserted.diff, punctuation.definition.inserted.diff	#B3E6B3	—
markup.deleted.diff, punctuation.definition.deleted.diff	#F47777	—
source.json meta.structure.dictionary.json support.type.property-name.json	#FFFFFF	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#CCCCCC	—
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	#AAAAAA	—
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	#888888	—

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