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

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...
~/my-project

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#bd93f920
activityBar.activeBorder#bd93f9
activityBar.background#1a1b23
activityBar.border#1a1b23
activityBar.dropBorder#bd93f9
activityBar.foreground#e6e6e6
activityBar.inactiveForeground#6272a4
activityBarBadge.background#bd93f9
activityBarBadge.foreground#1a1b23
activityBarTop.activeBorder#bd93f9
activityBarTop.dropBorder#bd93f9
activityBarTop.foreground#e6e6e6
activityBarTop.inactiveForeground#6272a4
badge.background#bd93f9
badge.foreground#1a1b23
breadcrumb.activeSelectionForeground#bd93f9
breadcrumb.background#1e1f29
breadcrumb.focusForeground#bd93f9
breadcrumb.foreground#6272a4
breadcrumbPicker.background#282a36
button.background#bd93f9
button.border#bd93f940
button.foreground#1a1b23
button.hoverBackground#a86deb
button.secondaryBackground#44475a
button.secondaryForeground#e6e6e6
button.secondaryHoverBackground#6272a4
button.separator#1a1b23
charts.blue#8be9fd
charts.foreground#e6e6e6
charts.green#50fa7b
charts.lines#44475a
charts.orange#ffb86c
charts.purple#bd93f9
charts.red#ff6b6b
charts.yellow#f1fa8c
chat.avatarBackground#bd93f9
chat.avatarForeground#1a1b23
chat.requestBorder#44475a40
chat.slashCommandBackground#282a36
chat.slashCommandForeground#bd93f9
commandCenter.activeBackground#44475a40
commandCenter.activeForeground#bd93f9
commandCenter.background#1e1f29
commandCenter.border#44475a40
commandCenter.foreground#e6e6e6
contrastActiveBorder#00000000
contrastBorder#00000000
debugConsole.errorForeground#ff6b6b
debugConsole.infoForeground#8be9fd
debugConsole.sourceForeground#e6e6e6
debugConsole.warningForeground#ffb86c
debugConsoleInputIcon.foreground#bd93f9
debugExceptionWidget.background#1e1f29
debugExceptionWidget.border#ff6b6b
debugIcon.breakpointCurrentStackframeForeground#ff6b6b
debugIcon.breakpointDisabledForeground#6272a4
debugIcon.breakpointForeground#ff6b6b
debugIcon.breakpointUnverifiedForeground#ffb86c
debugIcon.continueForeground#8be9fd
debugIcon.disconnectForeground#ff6b6b
debugIcon.pauseForeground#ffb86c
debugIcon.restartForeground#50fa7b
debugIcon.startForeground#50fa7b
debugIcon.stepBackForeground#8be9fd
debugIcon.stepIntoForeground#8be9fd
debugIcon.stepOutForeground#8be9fd
debugIcon.stepOverForeground#8be9fd
debugIcon.stopForeground#ff6b6b
debugTokenExpression.boolean#bd93f9
debugTokenExpression.error#ff6b6b
debugTokenExpression.name#8be9fd
debugTokenExpression.number#f1fa8c
debugTokenExpression.string#50fa7b
debugTokenExpression.value#e6e6e6
debugToolBar.background#282a36
debugToolBar.border#44475a40
debugView.stateLabelBackground#282a36
debugView.stateLabelForeground#e6e6e6
debugView.valueChangedHighlight#bd93f9aa
descriptionForeground#bfbfbf
diffEditor.border#44475a40
diffEditor.diagonalFill#282a36
diffEditor.insertedLineBackground#50fa7b15
diffEditor.insertedTextBackground#50fa7b20
diffEditor.insertedTextBorder#00000000
diffEditor.move.border#ffb86c4d
diffEditor.moveActive.border#ffb86cb3
diffEditor.removedLineBackground#ff6b6b15
diffEditor.removedTextBackground#ff6b6b20
diffEditor.removedTextBorder#00000000
diffEditor.unchangedCodeBackground#1e1f29
diffEditorGutter.insertedLineBackground#50fa7b20
diffEditorGutter.removedLineBackground#ff6b6b20
diffEditorOverview.insertedForeground#50fa7b25
diffEditorOverview.removedForeground#ff6b6b25
disabledForeground#888888
dropdown.background#282a36
dropdown.border#44475a
dropdown.foreground#e6e6e6
dropdown.listBackground#282a36
editor.background#1e1f29
editor.findMatchBackground#ffb86c80
editor.findMatchBorder#ffb86c
editor.findMatchHighlightBackground#ffb86c40
editor.findMatchHighlightBorder#ffb86c60
editor.findRangeHighlightBackground#44475a30
editor.focusedStackFrameHighlightBackground#bd93f940
editor.foldBackground#44475a20
editor.foreground#e6e6e6
editor.hoverHighlightBackground#44475a30
editor.inactiveSelectionBackground#44475a40
editor.lineHighlightBackground#282a36
editor.lineHighlightBorder#44475a40
editor.linkedEditingBackground#44475a60
editor.rangeHighlightBackground#44475a30
editor.selectionBackground#44475a80
editor.selectionForeground#e6e6e6
editor.selectionHighlightBackground#44475a60
editor.selectionHighlightBorder#6272a480
editor.stackFrameHighlightBackground#ffb86c40
editor.wordHighlightBackground#44475a40
editor.wordHighlightBorder#6272a460
editor.wordHighlightStrongBackground#44475a60
editor.wordHighlightStrongBorder#6272a480
editorBracketHighlight.foreground1#f1fa8c
editorBracketHighlight.foreground2#50fa7b
editorBracketHighlight.foreground3#8be9fd
editorBracketHighlight.foreground4#bd93f9
editorBracketHighlight.foreground5#ffb86c
editorBracketHighlight.foreground6#ff79c6
editorBracketHighlight.unexpectedBracket.foreground#ff6b6b
editorBracketMatch.background#44475a60
editorBracketMatch.border#bd93f9
editorBracketPairGuide.activeBackground1#f1fa8c
editorBracketPairGuide.activeBackground2#50fa7b
editorBracketPairGuide.activeBackground3#8be9fd
editorBracketPairGuide.activeBackground4#bd93f9
editorBracketPairGuide.activeBackground5#ffb86c
editorBracketPairGuide.activeBackground6#ff79c6
editorCodeLens.foreground#6272a4
editorCursor.background#1e1f29
editorCursor.foreground#f8f8f2
editorError.border#00000000
editorError.foreground#ff6b6b
editorGhostText.border#00000000
editorGhostText.foreground#6272a4
editorGroup.border#44475a40
editorGroup.dropBackground#44475a40
editorGroupHeader.border#44475a40
editorGroupHeader.noTabsBackground#1e1f29
editorGroupHeader.tabsBackground#21222c
editorGroupHeader.tabsBorder#44475a40
editorGutter.addedBackground#50fa7b
editorGutter.background#1e1f29
editorGutter.commentRangeForeground#6272a4
editorGutter.deletedBackground#ff6b6b
editorGutter.modifiedBackground#8be9fd
editorHint.border#00000000
editorHint.foreground#8be9fd
editorHoverWidget.background#282a36
editorHoverWidget.border#44475a
editorIndentGuide.activeBackground1#44475a80
editorIndentGuide.background1#44475a40
editorInfo.border#00000000
editorInfo.foreground#8be9fd
editorInlayHint.background#44475a40
editorInlayHint.foreground#6272a4
editorInlayHint.typeBackground#bd93f920
editorInlayHint.typeForeground#bd93f9
editorLightBulb.foreground#f1fa8c
editorLightBulbAutoFix.foreground#f1fa8c
editorLineNumber.activeForeground#bd93f9
editorLineNumber.foreground#6272a4
editorLink.activeForeground#8be9fd
editorMarkerNavigation.background#21222c
editorMarkerNavigationError.background#ff6b6b20
editorMarkerNavigationInfo.background#8be9fd20
editorMarkerNavigationWarning.background#ffb86c20
editorOverviewRuler.addedForeground#50fa7b
editorOverviewRuler.border#44475a40
editorOverviewRuler.bracketMatchForeground#bd93f980
editorOverviewRuler.deletedForeground#ff6b6b
editorOverviewRuler.errorForeground#ff6b6b
editorOverviewRuler.findMatchForeground#ffb86c
editorOverviewRuler.infoForeground#8be9fd
editorOverviewRuler.modifiedForeground#8be9fd
editorOverviewRuler.rangeHighlightForeground#44475a80
editorOverviewRuler.selectionHighlightForeground#44475a60
editorOverviewRuler.warningForeground#ffb86c
editorOverviewRuler.wordHighlightForeground#44475a80
editorOverviewRuler.wordHighlightStrongForeground#6272a480
editorPane.background#1e1f29
editorRuler.foreground#44475a40
editorSuggestWidget.background#282a36
editorSuggestWidget.border#44475a
editorSuggestWidget.foreground#e6e6e6
editorSuggestWidget.highlightForeground#bd93f9
editorSuggestWidget.selectedBackground#44475a80
editorSuggestWidget.selectedIconForeground#bd93f9
editorUnnecessaryCode.border#00000000
editorUnnecessaryCode.opacity#00000060
editorWarning.border#00000000
editorWarning.foreground#ffb86c
editorWhitespace.foreground#44475a60
editorWidget.background#21222c
editorWidget.border#44475a
editorWidget.foreground#e6e6e6
editorWidget.resizeBorder#bd93f9
errorForeground#ff6b6b
errorLens.errorForeground#ff6b6b99
errorLens.hintForeground#bd93f999
errorLens.infoForeground#8be9fd99
errorLens.warningForeground#ffb86c99
extensionBadge.remoteBackground#bd93f9
extensionBadge.remoteForeground#1a1b23
extensionButton.background#44475a
extensionButton.foreground#e6e6e6
extensionButton.hoverBackground#6272a4
extensionButton.prominentBackground#bd93f9DD
extensionButton.prominentForeground#1a1b23
extensionButton.prominentHoverBackground#a86deb
focusBorder#8b949e80
foreground#e6e6e6
gitDecoration.addedResourceForeground#50fa7b
gitDecoration.conflictingResourceForeground#ffb86c
gitDecoration.deletedResourceForeground#ff6b6b
gitDecoration.ignoredResourceForeground#6272a4
gitDecoration.modifiedResourceForeground#8be9fd
gitDecoration.renamedResourceForeground#8be9fd
gitDecoration.stageDeletedResourceForeground#ff6b6b
gitDecoration.stageModifiedResourceForeground#8be9fd
gitDecoration.untrackedResourceForeground#50fa7b
icon.foreground#bd93f9AA
inlineChat.background#1e1f29
inlineChat.border#44475a40
inlineChat.foreground#e6e6e6
inlineChat.regionHighlight#44475a40
inlineChat.shadow#00000040
inlineChatDiff.inserted#50fa7b20
inlineChatDiff.removed#ff6b6b20
inlineChatInput.background#282a36
inlineChatInput.border#44475a
inlineChatInput.focusBorder#bd93f9
inlineChatInput.placeholderForeground#6272a4
input.background#282a36
input.border#44475a
input.foreground#e6e6e6
input.placeholderForeground#6272a4
inputOption.activeBackground#bd93f980
inputOption.activeBorder#00000000
inputOption.activeForeground#1a1b23
inputOption.hoverBackground#44475a60
inputValidation.errorBackground#ff6b6b20
inputValidation.errorBorder#ff6b6b
inputValidation.errorForeground#ff6b6b
inputValidation.infoBackground#8be9fd20
inputValidation.infoBorder#8be9fd
inputValidation.infoForeground#8be9fd
inputValidation.warningBackground#ffb86c20
inputValidation.warningBorder#ffb86c
inputValidation.warningForeground#ffb86c
keybindingLabel.background#282a36
keybindingLabel.border#44475a
keybindingLabel.bottomBorder#6272a4
keybindingLabel.foreground#e6e6e6
list.activeSelectionBackground#44475a80
list.activeSelectionForeground#e6e6e6
list.deemphasizedForeground#6272a4
list.dropBackground#44475a40
list.errorForeground#ff6b6b
list.focusBackground#44475a60
list.focusForeground#e6e6e6
list.highlightForeground#bd93f9
list.hoverBackground#44475a40
list.hoverForeground#e6e6e6
list.inactiveSelectionBackground#44475a40
list.inactiveSelectionForeground#e6e6e6
list.warningForeground#ffb86c
listFilterWidget.background#1e1f29
listFilterWidget.noMatchesOutline#ff6b6b
listFilterWidget.outline#bd93f9
menu.background#1e1f29
menu.border#44475a40
menu.foreground#e6e6e6
menu.selectionBackground#44475a60
menu.selectionForeground#bd93f9
menu.separatorBackground#44475a60
menubar.selectionBackground#44475a60
menubar.selectionForeground#bd93f9
merge.border#44475a40
merge.commonContentBackground#ffb86c40
merge.commonHeaderBackground#ffb86c80
merge.currentContentBackground#50fa7b20
merge.currentHeaderBackground#50fa7b40
merge.incomingContentBackground#8be9fd40
merge.incomingHeaderBackground#8be9fd80
mergeEditor.change.background#50fa7b20
mergeEditor.change.word.background#50fa7b40
mergeEditor.conflict.handled.minimapOverViewRuler#50fa7b
mergeEditor.conflict.handledFocused.border#50fa7b
mergeEditor.conflict.handledUnfocused.border#50fa7b80
mergeEditor.conflict.unhandled.minimapOverViewRuler#ffb86c
mergeEditor.conflict.unhandledFocused.border#ffb86c
mergeEditor.conflict.unhandledUnfocused.border#ffb86c80
minimap.background#1e1f29
minimap.errorHighlight#ff6b6b
minimap.findMatchHighlight#ffb86c60
minimap.selectionHighlight#44475a80
minimap.selectionOccurrenceHighlight#44475a60
minimap.warningHighlight#ffb86c
minimapGutter.addedBackground#50fa7b
minimapGutter.deletedBackground#ff6b6b
minimapGutter.modifiedBackground#8be9fd
multiDiffEditor.border#44475a40
multiDiffEditor.headerBackground#282a36
notebook.cellBorderColor#44475a40
notebook.cellEditorBackground#282a36
notebook.cellInsertionIndicator#bd93f9
notebook.cellStatusBarItemHoverBackground#44475a60
notebook.cellToolbarSeparator#44475a40
notebook.editorBackground#1e1f29
notebook.focusedCellBorder#bd93f9
notebook.focusedEditorBorder#bd93f9
notebook.inactiveFocusedCellBorder#44475a40
notebook.inactiveSelectedCellBorder#44475a40
notebook.outputContainerBackgroundColor#282a36
notebook.selectedCellBackground#44475a40
notebook.selectedCellBorder#bd93f9
notebook.symbolHighlightBackground#ffb86c60
notebookScrollbarSlider.activeBackground#44475a80
notebookScrollbarSlider.background#44475a40
notebookScrollbarSlider.hoverBackground#44475a60
notebookStatusErrorIcon.foreground#ff6b6b
notebookStatusRunningIcon.foreground#8be9fd
notebookStatusSuccessIcon.foreground#50fa7b
notificationCenter.border#44475a40
notificationCenterHeader.background#282a36
notificationCenterHeader.foreground#e6e6e6
notificationLink.foreground#bd93f9
notifications.background#1e1f29
notifications.border#44475a40
notifications.foreground#e6e6e6
notificationsErrorIcon.foreground#ff6b6b
notificationsInfoIcon.foreground#8be9fd
notificationsWarningIcon.foreground#ffb86c
notificationToast.border#44475a40
panel.background#1e1f29
panel.border#44475a40
panel.dropBorder#bd93f9
panelInput.border#44475a
panelSection.border#44475a40
panelSection.dropBackground#44475a40
panelSectionHeader.background#282a36
panelSectionHeader.border#44475a40
panelSectionHeader.foreground#bd93f9
panelTitle.activeBorder#bd93f9
panelTitle.activeForeground#bd93f9
panelTitle.inactiveForeground#6272a4
peekView.border#bd93f9
peekViewEditor.background#21222c
peekViewEditor.matchHighlightBackground#ffb86c60
peekViewEditor.matchHighlightBorder#00000000
peekViewEditorGutter.background#21222c
peekViewEditorStickyScroll.background#1e1f29
peekViewResult.background#282a36
peekViewResult.fileForeground#e6e6e6
peekViewResult.lineForeground#bfbfbf
peekViewResult.matchHighlightBackground#ffb86c60
peekViewResult.selectionBackground#44475a80
peekViewResult.selectionForeground#e6e6e6
peekViewTitle.background#1e1f29
peekViewTitleDescription.foreground#bfbfbf
peekViewTitleLabel.foreground#bd93f9
pickerGroup.border#44475a40
pickerGroup.foreground#bd93f9
profileBadge.background#bd93f9
profileBadge.foreground#1a1b23
progressBar.background#f1fa8c
quickInput.background#1e1f29
quickInput.foreground#e6e6e6
quickInputList.focusBackground#44475a80
quickInputList.focusForeground#e6e6e6
quickInputList.focusIconForeground#bd93f9
quickInputTitle.background#282a36
sash.hoverBorder#bd93f9
scmGraph.foreground1#bd93f9
scmGraph.foreground2#8be9fd
scmGraph.foreground3#50fa7b
scmGraph.foreground4#f1fa8c
scmGraph.foreground5#ff6b6b
scmGraph.historyItemAdditionsForeground#50fa7b
scmGraph.historyItemBaseRefColor#ff6b6b
scmGraph.historyItemDefaultLabelForeground#e6e6e6
scmGraph.historyItemDeletionsForeground#ff6b6b
scmGraph.historyItemHoverDefaultLabelForeground#e6e6e6
scmGraph.historyItemHoverLabelForeground#e6e6e6
scmGraph.historyItemRefColor#8be9fd
scmGraph.historyItemRemoteRefColor#50fa7b
scrollbar.shadow#00000040
scrollbarSlider.activeBackground#44475a80
scrollbarSlider.background#44475a40
scrollbarSlider.hoverBackground#44475a60
selection.background#44475a80
settings.headerForeground#bd93f9
settings.modifiedItemIndicator#bd93f9
sideBar.background#21222c
sideBar.border#44475a40
sideBar.dropBackground#44475a40
sideBar.foreground#e6e6e6
sideBarSectionHeader.background#282a36
sideBarSectionHeader.border#44475a40
sideBarSectionHeader.foreground#bd93f9
sideBarStickyScroll.background#1e1f29
sideBarStickyScroll.shadow#00000040
sideBarTitle.foreground#bd93f9
statusBar.background#1a1b23
statusBar.border#44475a40
statusBar.debuggingBackground#ff7979
statusBar.debuggingBorder#ff6b6b
statusBar.debuggingForeground#1a1b23
statusBar.foreground#e6e6e6
statusBar.noFolderBackground#282a36
statusBar.noFolderBorder#44475a40
statusBar.noFolderForeground#e6e6e6
statusBarItem.activeBackground#44475a40
statusBarItem.compactHoverBackground#44475a40
statusBarItem.errorBackground#ff6b6b
statusBarItem.errorForeground#1a1b23
statusBarItem.errorHoverBackground#ff5757
statusBarItem.errorHoverForeground#1a1b23
statusBarItem.hoverBackground#44475a60
statusBarItem.hoverForeground#e6e6e6
statusBarItem.offlineBackground#6272a4
statusBarItem.offlineForeground#e6e6e6
statusBarItem.offlineHoverBackground#8be9fd
statusBarItem.prominentBackground#44475a60
statusBarItem.prominentForeground#e6e6e6
statusBarItem.prominentHoverBackground#44475a80
statusBarItem.remoteBackground#1a1b23
statusBarItem.remoteForeground#e6e6e6
statusBarItem.remoteHoverBackground#44475a40
statusBarItem.remoteHoverForeground#e6e6e6
statusBarItem.warningBackground#ffb86c
statusBarItem.warningForeground#1a1b23
statusBarItem.warningHoverBackground#ffa726
statusBarItem.warningHoverForeground#1a1b23
symbolIcon.arrayForeground#f1fa8c
symbolIcon.booleanForeground#bd93f9
symbolIcon.classForeground#8be9fd
symbolIcon.colorForeground#ff79c6
symbolIcon.constantForeground#bd93f9
symbolIcon.constructorForeground#50fa7b
symbolIcon.enumeratorForeground#8be9fd
symbolIcon.enumeratorMemberForeground#bd93f9
symbolIcon.eventForeground#ffb86c
symbolIcon.fieldForeground#e6e6e6
symbolIcon.fileForeground#e6e6e6
symbolIcon.folderForeground#e6e6e6
symbolIcon.functionForeground#50fa7b
symbolIcon.interfaceForeground#8be9fd
symbolIcon.keyForeground#bd93f9
symbolIcon.keywordForeground#ff79c6
symbolIcon.methodForeground#50fa7b
symbolIcon.moduleForeground#f1fa8c
symbolIcon.namespaceForeground#f1fa8c
symbolIcon.nullForeground#bd93f9
symbolIcon.numberForeground#bd93f9
symbolIcon.objectForeground#8be9fd
symbolIcon.operatorForeground#ff79c6
symbolIcon.packageForeground#8be9fd
symbolIcon.propertyForeground#e6e6e6
symbolIcon.referenceForeground#bd93f9
symbolIcon.snippetForeground#50fa7b
symbolIcon.stringForeground#f1fa8c
symbolIcon.structForeground#8be9fd
symbolIcon.textForeground#e6e6e6
symbolIcon.typeParameterForeground#8be9fd
symbolIcon.unitForeground#bd93f9
symbolIcon.variableForeground#e6e6e6
tab.activeBackground#1e1f29
tab.activeBorder#bd93f9
tab.activeBorderTop#bd93f9
tab.activeForeground#bd93f9
tab.activeModifiedBorder#8be9fd
tab.border#44475a40
tab.hoverBackground#1e1f29
tab.hoverForeground#bd93f9
tab.inactiveBackground#21222c
tab.inactiveForeground#6272a4
tab.inactiveModifiedBorder#8be9fd80
tab.lastPinnedBorder#44475a40
tab.unfocusedActiveBorder#bd93f960
tab.unfocusedActiveForeground#bd93f980
tab.unfocusedHoverForeground#bd93f9
tab.unfocusedInactiveForeground#6272a480
terminal.ansiBlack#1e1f29
terminal.ansiBlue#8be9fd
terminal.ansiBrightBlack#44475a
terminal.ansiBrightBlue#74c7ec
terminal.ansiBrightCyan#9aedfe
terminal.ansiBrightGreen#6bcf7f
terminal.ansiBrightMagenta#c9a9fa
terminal.ansiBrightRed#ff7979
terminal.ansiBrightWhite#f8f8f2
terminal.ansiBrightYellow#f4f99d
terminal.ansiCyan#8be9fd
terminal.ansiGreen#50fa7b
terminal.ansiMagenta#bd93f9
terminal.ansiRed#ff6b6b
terminal.ansiWhite#e6e6e6
terminal.ansiYellow#f1fa8c
terminal.background#1e1f29
terminal.foreground#e6e6e6
terminal.selectionBackground#44475a80
terminal.selectionForeground#e6e6e6
terminalCursor.background#1e1f29
terminalCursor.foreground#f1fa8c
terminalStickyScrollHover.background#282a36
textBlockQuote.background#282a36
textBlockQuote.border#bd93f9
textCodeBlock.background#282a36
textLink.activeForeground#a86deb
textLink.foreground#bd93f9
textPreformat.background#282a36
textPreformat.foreground#6272a4
textSeparator.foreground#bd93f9
titleBar.activeBackground#1a1b23
titleBar.activeForeground#e6e6e6
titleBar.border#44475a40
titleBar.inactiveBackground#1a1b2390
titleBar.inactiveForeground#bfbfbf
toolbar.activeBackground#44475a60
toolbar.hoverBackground#44475a40
tree.indentGuidesStroke#44475a60
walkThrough.embeddedEditorBackground#1e1f29
welcomePage.progress.background#282a36
welcomePage.progress.foreground#bd93f9
welcomePage.tileBackground#282a36
welcomePage.tileBorder#44475a40
welcomePage.tileHoverBackground#44475a60
widget.shadow#00000040
window.activeBorder#bd93f9
window.inactiveBorder#44475a40

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, meta.var.expr storage.type, keyword.control.flow, keyword.control.return, meta.directive.vue punctuation.separator.key-value.html, meta.directive.vue entity.other.attribute-name.html, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, storage.modifier, string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escape	—	italic
keyword.control.flow.block-scalar.literal, keyword.control.flow.python	—
comment, comment.block.documentation, punctuation.definition.comment, comment.block.documentation punctuation, string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escape	#6272a4	—
keyword.operator.assignment.jsdoc, comment.block.documentation variable, comment.block.documentation storage, comment.block.documentation keyword, comment.block.documentation support, comment.block.documentation markup, comment.block.documentation markup.inline.raw.string.markdown, meta.other.type.phpdoc.php keyword.other.type.php, meta.other.type.phpdoc.php support.other.namespace.php, meta.other.type.phpdoc.php punctuation.separator.inheritance.php, meta.other.type.phpdoc.php support.class, keyword.other.phpdoc.php, log.date	#7d8590	—
meta.other.type.phpdoc.php support.class, comment.block.documentation storage.type, comment.block.documentation punctuation.definition.block.tag, comment.block.documentation entity.name.type.instance	#8b949e	—
variable.other.constant, punctuation.definition.constant, constant.language, constant.numeric, support.constant, constant.other.caps	#bd93f9	—
string, constant.other.symbol, constant.other.key, meta.attribute-selector, string constant.character	#f1fa8c
constant.other.color, constant.other.color.rgb-value.hex punctuation.definition.constant	#bd93f9	—
invalid, invalid.illegal	#ff6b6b	—
invalid.deprecated	#ffb86c	—
storage.type	#ff79c6	—
meta.var.expr storage.type, storage.modifier	#ff79c6	—
punctuation.definition.template-expression, punctuation.section.embedded, meta.embedded.line.tag.smarty, support.constant.handlebars, punctuation.section.tag.twig	#ff79c6	—
keyword.control.smarty, keyword.control.twig, support.constant.handlebars keyword.control, keyword.operator.comparison.twig, keyword.blade, entity.name.function.blade, meta.tag.blade keyword.other.type.php	#ff79c6	—
keyword.operator.spread, keyword.operator.rest	#ff79c6	bold
keyword.operator, keyword.control.as, keyword.other, keyword.operator.bitwise.shift, punctuation, expression.embbeded.vue punctuation.definition.tag, text.html.twig meta.tag.inline.any.html, meta.tag.template.value.twig meta.function.arguments.twig, meta.directive.vue punctuation.separator.key-value.html, punctuation.definition.constant.markdown, punctuation.definition.string, punctuation.support.type.property-name, text.html.vue-html meta.tag, meta.attribute.directive, punctuation.definition.keyword, punctuation.terminator.rule, punctuation.definition.entity, punctuation.separator.inheritance.php, keyword.other.template, keyword.other.substitution, entity.name.operator, meta.property-list punctuation.separator.key-value, meta.at-rule.mixin keyword.control.at-rule.mixin, meta.at-rule.include entity.name.function.scss, meta.at-rule.include keyword.control.at-rule.include	#ff79c6	—
keyword.control.at-rule.include punctuation.definition.keyword, keyword.control.at-rule.mixin punctuation.definition.keyword, meta.at-rule.include keyword.control.at-rule.include, keyword.control.at-rule.extend punctuation.definition.keyword, meta.at-rule.extend keyword.control.at-rule.extend, entity.other.attribute-name.placeholder.css punctuation.definition.entity.css, meta.at-rule.media keyword.control.at-rule.media, meta.at-rule.mixin keyword.control.at-rule.mixin, meta.at-rule.function keyword.control.at-rule.function, keyword.control punctuation.definition.keyword	#ff79c6	—
meta.property-list meta.at-rule.include	#e6e6e6	—
support.constant.property-value	#bd93f9	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#e6e6e6	—
variable.language	#ff79c6	—
variable.other punctuation.definition.variable	#e6e6e6	—
source.js constant.other.object.key.js string.unquoted.label.js, variable.language.this punctuation.definition.variable, keyword.other.this	#ff79c6	—
entity.other.attribute-name, text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#50fa7b	—
text.html constant.character.entity	#bd93f9	—
entity.other.attribute-name.id.html, meta.directive.vue entity.other.attribute-name.html	#50fa7b	—
source.sass keyword.control	#50fa7b	—
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.placeholder, meta.property-list meta.property-value	#50fa7b	—
markup.inserted	#50fa7b	—
markup.deleted	#ff6b6b	—
markup.changed	#8be9fd	—
string.regexp	#f1fa8c	—
punctuation.definition.group	#50fa7b	—
constant.other.character-class.regexp	#8be9fd	—
constant.other.character-class.set.regexp, punctuation.definition.character-class.regexp	#f1fa8c	—
keyword.operator.quantifier.regexp	#ff79c6	—
constant.character.escape.backslash	#ff79c6	—
constant.character.escape	#ff79c6	—
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#50fa7b	—
keyword.other.unit	#bd93f9	—
source.json meta.structure.dictionary.json support.type.property-name.json	#8be9fd	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#50fa7b	—
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	#f1fa8c	—
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	#ffb86c	—
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	#bd93f9	—
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	#ff79c6	—
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	#8be9fd	—
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	#50fa7b	—
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	#f1fa8c	—
punctuation.definition.list_item.markdown	#e6e6e6	—
meta.block, meta.brace, punctuation.definition.block, punctuation.definition.use, punctuation.definition.class, punctuation.definition.begin.bracket, punctuation.definition.end.bracket, punctuation.definition.switch-expression.begin.bracket, punctuation.definition.switch-expression.end.bracket, punctuation.definition.section.switch-block.begin.bracket, punctuation.definition.section.switch-block.end.bracket, punctuation.definition.group.shell, punctuation.definition.parameters, punctuation.definition.arguments, punctuation.definition.dictionary, punctuation.definition.array, punctuation.section	#e6e6e6	—
meta.embedded.block	#e6e6e6	—
meta.tag JSXNested, meta.jsx.children, text.html, text.log	#e6e6e6	—
text.html.markdown markup.inline.raw.markdown	#50fa7b	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#6272a4	—
heading.1.markdown entity.name, heading.1.markdown punctuation.definition.heading.markdown	#bd93f9	bold
heading.2.markdown entity.name, heading.2.markdown punctuation.definition.heading.markdown	#8be9fd	bold
heading.3.markdown entity.name, heading.3.markdown punctuation.definition.heading.markdown	#50fa7b	bold
heading.4.markdown entity.name, heading.4.markdown punctuation.definition.heading.markdown	#f1fa8c	bold
heading.5.markdown entity.name, heading.5.markdown punctuation.definition.heading.markdown	#ffb86c	bold
heading.6.markdown entity.name, heading.6.markdown punctuation.definition.heading.markdown	#ff79c6	bold
markup.italic, markup.italic punctuation	#f1fa8c	italic
markup.bold, markup.bold punctuation	#ffb86c	bold
markup.bold markup.italic, markup.bold markup.italic punctuation	#ff79c6	bold italic
markup.underline, markup.underline punctuation	—	underline
markup.quote punctuation.definition.blockquote.markdown	#6272a4	—
markup.quote	—	italic
string.other.link, markup.underline.link, constant.other.reference.link.markdown, string.other.link.description.title.markdown	#8be9fd	—
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.language.fenced.markdown	#50fa7b	—
meta.separator	#6272a4	bold
markup.table	#e6e6e6	—
token.info-token	#8be9fd	—
token.warn-token	#ffb86c	—
token.error-token	#ff6b6b	—
token.debug-token	#bd93f9	—
entity.tag.apacheconf	#ff79c6	—
meta.preprocessor	#8be9fd	—
source.env	#50fa7b	—

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