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 — Julia Neves

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#c792ea20
activityBar.activeBorder#c792ea
activityBar.background#15081a
activityBar.border#15081a
activityBar.dropBorder#c792ea
activityBar.foreground#e8e5f0
activityBar.inactiveForeground#9d87b3
activityBarBadge.background#c792ea
activityBarBadge.foreground#15081a
activityBarTop.activeBorder#c792ea
activityBarTop.dropBorder#c792ea
activityBarTop.foreground#e8e5f0
activityBarTop.inactiveForeground#9d87b3
badge.background#c792ea
badge.foreground#15081a
breadcrumb.activeSelectionForeground#c792ea
breadcrumb.background#1a0f1c
breadcrumb.focusForeground#c792ea
breadcrumb.foreground#9d87b3
breadcrumbPicker.background#2a1b2e
button.background#c792ea
button.border#c792ea40
button.foreground#15081a
button.hoverBackground#b678d9
button.secondaryBackground#6b5b73
button.secondaryForeground#e8e5f0
button.secondaryHoverBackground#8a7a94
button.separator#15081a
charts.blue#85a3e0
charts.foreground#e8e5f0
charts.green#85e89d
charts.lines#6b5b73
charts.orange#deb887
charts.purple#c792ea
charts.red#e574a8
charts.yellow#f4d03f
chat.avatarBackground#c792ea
chat.avatarForeground#15081a
chat.requestBorder#6b5b7340
chat.slashCommandBackground#2a1b2e
chat.slashCommandForeground#c792ea
commandCenter.activeBackground#6b5b7340
commandCenter.activeForeground#c792ea
commandCenter.background#1a0f1c
commandCenter.border#6b5b7340
commandCenter.foreground#e8e5f0
contrastActiveBorder#00000000
contrastBorder#00000000
debugConsole.errorForeground#e574a8
debugConsole.infoForeground#85a3e0
debugConsole.sourceForeground#e8e5f0
debugConsole.warningForeground#deb887
debugConsoleInputIcon.foreground#c792ea
debugExceptionWidget.background#1a0f1c
debugExceptionWidget.border#e574a8
debugIcon.breakpointCurrentStackframeForeground#e574a8
debugIcon.breakpointDisabledForeground#9d87b3
debugIcon.breakpointForeground#e574a8
debugIcon.breakpointUnverifiedForeground#deb887
debugIcon.continueForeground#85e89d
debugIcon.disconnectForeground#e574a8
debugIcon.pauseForeground#deb887
debugIcon.restartForeground#85e89d
debugIcon.startForeground#85e89d
debugIcon.stepBackForeground#85a3e0
debugIcon.stepIntoForeground#85a3e0
debugIcon.stepOutForeground#85a3e0
debugIcon.stepOverForeground#85a3e0
debugIcon.stopForeground#e574a8
debugTokenExpression.boolean#c792ea
debugTokenExpression.error#e574a8
debugTokenExpression.name#85a3e0
debugTokenExpression.number#f4d03f
debugTokenExpression.string#85e89d
debugTokenExpression.value#e8e5f0
debugToolBar.background#2a1b2e
debugToolBar.border#6b5b7340
debugView.stateLabelBackground#2a1b2e
debugView.stateLabelForeground#e8e5f0
debugView.valueChangedHighlight#c792eaaa
descriptionForeground#c4b8d1
diffEditor.border#6b5b7340
diffEditor.diagonalFill#2a1b2e
diffEditor.insertedLineBackground#85e89d15
diffEditor.insertedTextBackground#85e89d20
diffEditor.insertedTextBorder#00000000
diffEditor.move.border#deb8874d
diffEditor.moveActive.border#deb887b3
diffEditor.removedLineBackground#e574a815
diffEditor.removedTextBackground#e574a820
diffEditor.removedTextBorder#00000000
diffEditor.unchangedCodeBackground#1a0f1c
diffEditorGutter.insertedLineBackground#85e89d20
diffEditorGutter.removedLineBackground#e574a820
diffEditorOverview.insertedForeground#85e89d25
diffEditorOverview.removedForeground#e574a825
disabledForeground#8a7a94
dropdown.background#2a1b2e
dropdown.border#6b5b73
dropdown.foreground#e8e5f0
dropdown.listBackground#2a1b2e
editor.background#1a0f1c
editor.findMatchBackground#c792ea80
editor.findMatchBorder#c792ea
editor.findMatchHighlightBackground#c792ea40
editor.findMatchHighlightBorder#c792ea60
editor.findRangeHighlightBackground#6b5b7330
editor.focusedStackFrameHighlightBackground#c792ea40
editor.foldBackground#6b5b7320
editor.foreground#e8e5f0
editor.hoverHighlightBackground#6b5b7330
editor.inactiveSelectionBackground#6b5b7340
editor.lineHighlightBackground#2a1b2e
editor.lineHighlightBorder#6b5b7340
editor.linkedEditingBackground#6b5b7360
editor.rangeHighlightBackground#6b5b7330
editor.selectionBackground#6b5b7380
editor.selectionForeground#e8e5f0
editor.selectionHighlightBackground#6b5b7360
editor.selectionHighlightBorder#9d87b380
editor.stackFrameHighlightBackground#deb88740
editor.wordHighlightBackground#6b5b7340
editor.wordHighlightBorder#9d87b360
editor.wordHighlightStrongBackground#6b5b7360
editor.wordHighlightStrongBorder#9d87b380
editorBracketHighlight.foreground1#f4d03f
editorBracketHighlight.foreground2#85e89d
editorBracketHighlight.foreground3#85a3e0
editorBracketHighlight.foreground4#c792ea
editorBracketHighlight.foreground5#deb887
editorBracketHighlight.foreground6#e574a8
editorBracketHighlight.unexpectedBracket.foreground#e574a8
editorBracketMatch.background#6b5b7360
editorBracketMatch.border#c792ea
editorBracketPairGuide.activeBackground1#f4d03f
editorBracketPairGuide.activeBackground2#85e89d
editorBracketPairGuide.activeBackground3#85a3e0
editorBracketPairGuide.activeBackground4#c792ea
editorBracketPairGuide.activeBackground5#deb887
editorBracketPairGuide.activeBackground6#e574a8
editorCodeLens.foreground#9d87b3
editorCursor.background#1a0f1c
editorCursor.foreground#c792ea
editorError.border#00000000
editorError.foreground#e574a8
editorGhostText.border#00000000
editorGhostText.foreground#9d87b3
editorGroup.border#6b5b7340
editorGroup.dropBackground#6b5b7340
editorGroupHeader.border#6b5b7340
editorGroupHeader.noTabsBackground#1a0f1c
editorGroupHeader.tabsBackground#1e1026
editorGroupHeader.tabsBorder#6b5b7340
editorGutter.addedBackground#85e89d
editorGutter.background#1a0f1c
editorGutter.commentRangeForeground#9d87b3
editorGutter.deletedBackground#e574a8
editorGutter.modifiedBackground#85a3e0
editorHint.border#00000000
editorHint.foreground#85a3e0
editorHoverWidget.background#2a1b2e
editorHoverWidget.border#6b5b73
editorIndentGuide.activeBackground1#6b5b7380
editorIndentGuide.background1#6b5b7340
editorInfo.border#00000000
editorInfo.foreground#85a3e0
editorInlayHint.background#6b5b7340
editorInlayHint.foreground#9d87b3
editorInlayHint.typeBackground#c792ea20
editorInlayHint.typeForeground#c792ea
editorLightBulb.foreground#f4d03f
editorLightBulbAutoFix.foreground#f4d03f
editorLineNumber.activeForeground#c792ea
editorLineNumber.foreground#9d87b3
editorLink.activeForeground#85a3e0
editorMarkerNavigation.background#1e1026
editorMarkerNavigationError.background#e574a820
editorMarkerNavigationInfo.background#85a3e020
editorMarkerNavigationWarning.background#deb88720
editorOverviewRuler.addedForeground#85e89d
editorOverviewRuler.border#6b5b7340
editorOverviewRuler.bracketMatchForeground#c792ea80
editorOverviewRuler.deletedForeground#e574a8
editorOverviewRuler.errorForeground#e574a8
editorOverviewRuler.findMatchForeground#deb887
editorOverviewRuler.infoForeground#85a3e0
editorOverviewRuler.modifiedForeground#85a3e0
editorOverviewRuler.rangeHighlightForeground#6b5b7380
editorOverviewRuler.selectionHighlightForeground#6b5b7360
editorOverviewRuler.warningForeground#deb887
editorOverviewRuler.wordHighlightForeground#6b5b7380
editorOverviewRuler.wordHighlightStrongForeground#9d87b380
editorPane.background#1a0f1c
editorRuler.foreground#6b5b7340
editorStickyScroll.shadow#00000050
editorSuggestWidget.background#2a1b2e
editorSuggestWidget.border#6b5b73
editorSuggestWidget.foreground#e8e5f0
editorSuggestWidget.highlightForeground#c792ea
editorSuggestWidget.selectedBackground#6b5b7380
editorSuggestWidget.selectedIconForeground#c792ea
editorUnnecessaryCode.border#00000000
editorUnnecessaryCode.opacity#00000060
editorWarning.border#00000000
editorWarning.foreground#deb887
editorWhitespace.foreground#6b5b7360
editorWidget.background#1e1026
editorWidget.border#6b5b73
editorWidget.foreground#e8e5f0
editorWidget.resizeBorder#c792ea
errorForeground#e574a8
errorLens.errorForeground#e574a899
errorLens.hintForeground#c792ea99
errorLens.infoForeground#85a3e099
errorLens.warningForeground#deb88799
extensionBadge.remoteBackground#c792ea
extensionBadge.remoteForeground#15081a
extensionButton.background#6b5b73
extensionButton.foreground#e8e5f0
extensionButton.hoverBackground#8a7a94
extensionButton.prominentBackground#c792eaDD
extensionButton.prominentForeground#15081a
extensionButton.prominentHoverBackground#b678d9
focusBorder#9d87b380
foreground#e8e5f0
gitDecoration.addedResourceForeground#85e89d
gitDecoration.conflictingResourceForeground#deb887
gitDecoration.deletedResourceForeground#e574a8
gitDecoration.ignoredResourceForeground#9d87b3
gitDecoration.modifiedResourceForeground#85a3e0
gitDecoration.renamedResourceForeground#85a3e0
gitDecoration.stageDeletedResourceForeground#e574a8
gitDecoration.stageModifiedResourceForeground#85a3e0
gitDecoration.untrackedResourceForeground#85e89d
icon.foreground#c792eaAA
inlineChat.background#1a0f1c
inlineChat.border#6b5b7340
inlineChat.foreground#e8e5f0
inlineChat.regionHighlight#6b5b7340
inlineChat.shadow#00000040
inlineChatDiff.inserted#85e89d20
inlineChatDiff.removed#e574a820
inlineChatInput.background#2a1b2e
inlineChatInput.border#6b5b73
inlineChatInput.focusBorder#c792ea
inlineChatInput.placeholderForeground#9d87b3
input.background#2a1b2e
input.border#6b5b73
input.foreground#e8e5f0
input.placeholderForeground#9d87b3
inputOption.activeBackground#c792ea80
inputOption.activeBorder#00000000
inputOption.activeForeground#15081a
inputOption.hoverBackground#6b5b7360
inputValidation.errorBackground#e574a820
inputValidation.errorBorder#e574a8
inputValidation.errorForeground#e574a8
inputValidation.infoBackground#85a3e020
inputValidation.infoBorder#85a3e0
inputValidation.infoForeground#85a3e0
inputValidation.warningBackground#deb88720
inputValidation.warningBorder#deb887
inputValidation.warningForeground#deb887
keybindingLabel.background#2a1b2e
keybindingLabel.border#6b5b73
keybindingLabel.bottomBorder#9d87b3
keybindingLabel.foreground#e8e5f0
list.activeSelectionBackground#6b5b7380
list.activeSelectionForeground#e8e5f0
list.deemphasizedForeground#9d87b3
list.dropBackground#6b5b7340
list.errorForeground#e574a8
list.focusBackground#6b5b7360
list.focusForeground#e8e5f0
list.highlightForeground#c792ea
list.hoverBackground#6b5b7340
list.hoverForeground#e8e5f0
list.inactiveSelectionBackground#6b5b7340
list.inactiveSelectionForeground#e8e5f0
list.warningForeground#deb887
listFilterWidget.background#1a0f1c
listFilterWidget.noMatchesOutline#e574a8
listFilterWidget.outline#c792ea
menu.background#1a0f1c
menu.border#6b5b7340
menu.foreground#e8e5f0
menu.selectionBackground#6b5b7360
menu.selectionForeground#c792ea
menu.separatorBackground#6b5b7360
menubar.selectionBackground#6b5b7360
menubar.selectionForeground#c792ea
merge.border#6b5b7340
merge.commonContentBackground#deb88740
merge.commonHeaderBackground#deb88780
merge.currentContentBackground#85e89d20
merge.currentHeaderBackground#85e89d40
merge.incomingContentBackground#85a3e040
merge.incomingHeaderBackground#85a3e080
mergeEditor.change.background#85e89d20
mergeEditor.change.word.background#85e89d40
mergeEditor.conflict.handled.minimapOverViewRuler#85e89d
mergeEditor.conflict.handledFocused.border#85e89d
mergeEditor.conflict.handledUnfocused.border#85e89d80
mergeEditor.conflict.unhandled.minimapOverViewRuler#deb887
mergeEditor.conflict.unhandledFocused.border#deb887
mergeEditor.conflict.unhandledUnfocused.border#deb88780
minimap.background#1a0f1c
minimap.errorHighlight#e574a8
minimap.findMatchHighlight#deb88760
minimap.selectionHighlight#6b5b7380
minimap.selectionOccurrenceHighlight#6b5b7360
minimap.warningHighlight#deb887
minimapGutter.addedBackground#85e89d
minimapGutter.deletedBackground#e574a8
minimapGutter.modifiedBackground#85a3e0
multiDiffEditor.border#6b5b7340
multiDiffEditor.headerBackground#2a1b2e
notebook.cellBorderColor#6b5b7340
notebook.cellEditorBackground#2a1b2e
notebook.cellInsertionIndicator#c792ea
notebook.cellStatusBarItemHoverBackground#6b5b7360
notebook.cellToolbarSeparator#6b5b7340
notebook.editorBackground#1a0f1c
notebook.focusedCellBorder#c792ea
notebook.focusedEditorBorder#c792ea
notebook.inactiveFocusedCellBorder#6b5b7340
notebook.inactiveSelectedCellBorder#6b5b7340
notebook.outputContainerBackgroundColor#2a1b2e
notebook.selectedCellBackground#6b5b7340
notebook.selectedCellBorder#c792ea
notebook.symbolHighlightBackground#deb88760
notebookScrollbarSlider.activeBackground#6b5b7380
notebookScrollbarSlider.background#6b5b7340
notebookScrollbarSlider.hoverBackground#6b5b7360
notebookStatusErrorIcon.foreground#e574a8
notebookStatusRunningIcon.foreground#85a3e0
notebookStatusSuccessIcon.foreground#85e89d
notificationCenter.border#6b5b7340
notificationCenterHeader.background#2a1b2e
notificationCenterHeader.foreground#e8e5f0
notificationLink.foreground#c792ea
notifications.background#1a0f1c
notifications.border#6b5b7340
notifications.foreground#e8e5f0
notificationsErrorIcon.foreground#e574a8
notificationsInfoIcon.foreground#85a3e0
notificationsWarningIcon.foreground#deb887
notificationToast.border#6b5b7340
panel.background#1a0f1c
panel.border#6b5b7340
panel.dropBorder#c792ea
panelInput.border#6b5b73
panelSection.border#6b5b7340
panelSection.dropBackground#6b5b7340
panelSectionHeader.background#2a1b2e
panelSectionHeader.border#6b5b7340
panelSectionHeader.foreground#c792ea
panelTitle.activeBorder#c792ea
panelTitle.activeForeground#c792ea
panelTitle.inactiveForeground#9d87b3
peekView.border#c792ea
peekViewEditor.background#1e1026
peekViewEditor.matchHighlightBackground#deb88760
peekViewEditor.matchHighlightBorder#00000000
peekViewEditorGutter.background#1e1026
peekViewEditorStickyScroll.background#1a0f1c
peekViewResult.background#2a1b2e
peekViewResult.fileForeground#e8e5f0
peekViewResult.lineForeground#c4b8d1
peekViewResult.matchHighlightBackground#deb88760
peekViewResult.selectionBackground#6b5b7380
peekViewResult.selectionForeground#e8e5f0
peekViewTitle.background#1a0f1c
peekViewTitleDescription.foreground#c4b8d1
peekViewTitleLabel.foreground#c792ea
pickerGroup.border#6b5b7340
pickerGroup.foreground#c792ea
profileBadge.background#c792ea
profileBadge.foreground#15081a
progressBar.background#f4d03f
quickInput.background#1a0f1c
quickInput.foreground#e8e5f0
quickInputList.focusBackground#6b5b7380
quickInputList.focusForeground#e8e5f0
quickInputList.focusIconForeground#c792ea
quickInputTitle.background#2a1b2e
sash.hoverBorder#c792ea
scmGraph.foreground1#c792ea
scmGraph.foreground2#85a3e0
scmGraph.foreground3#85e89d
scmGraph.foreground4#f4d03f
scmGraph.foreground5#e574a8
scmGraph.historyItemAdditionsForeground#85e89d
scmGraph.historyItemBaseRefColor#e574a8
scmGraph.historyItemDefaultLabelForeground#e8e5f0
scmGraph.historyItemDeletionsForeground#e574a8
scmGraph.historyItemHoverDefaultLabelForeground#e8e5f0
scmGraph.historyItemHoverLabelForeground#e8e5f0
scmGraph.historyItemRefColor#85a3e0
scmGraph.historyItemRemoteRefColor#85e89d
scrollbar.shadow#00000045
scrollbarSlider.activeBackground#6b5b7380
scrollbarSlider.background#6b5b7340
scrollbarSlider.hoverBackground#6b5b7360
selection.background#6b5b7380
settings.headerForeground#c792ea
settings.modifiedItemIndicator#c792ea
sideBar.background#1e1026
sideBar.border#6b5b7340
sideBar.dropBackground#6b5b7340
sideBar.foreground#e8e5f0
sideBarSectionHeader.background#2a1b2e
sideBarSectionHeader.border#6b5b7340
sideBarSectionHeader.foreground#c792ea
sideBarStickyScroll.background#1a0f1c
sideBarStickyScroll.shadow#00000040
sideBarTitle.foreground#c792ea
statusBar.background#15081a
statusBar.border#6b5b7340
statusBar.debuggingBackground#e574a8
statusBar.debuggingBorder#e574a8
statusBar.debuggingForeground#15081a
statusBar.foreground#e8e5f0
statusBar.noFolderBackground#2a1b2e
statusBar.noFolderBorder#6b5b7340
statusBar.noFolderForeground#e8e5f0
statusBarItem.activeBackground#6b5b7340
statusBarItem.compactHoverBackground#6b5b7340
statusBarItem.errorBackground#e574a8
statusBarItem.errorForeground#15081a
statusBarItem.errorHoverBackground#e888b8
statusBarItem.errorHoverForeground#15081a
statusBarItem.hoverBackground#6b5b7360
statusBarItem.hoverForeground#e8e5f0
statusBarItem.offlineBackground#9d87b3
statusBarItem.offlineForeground#e8e5f0
statusBarItem.offlineHoverBackground#b19ec9
statusBarItem.prominentBackground#6b5b7360
statusBarItem.prominentForeground#e8e5f0
statusBarItem.prominentHoverBackground#6b5b7380
statusBarItem.remoteBackground#15081a
statusBarItem.remoteForeground#e8e5f0
statusBarItem.remoteHoverBackground#6b5b7340
statusBarItem.remoteHoverForeground#e8e5f0
statusBarItem.warningBackground#deb887
statusBarItem.warningForeground#15081a
statusBarItem.warningHoverBackground#e3c39a
statusBarItem.warningHoverForeground#15081a
symbolIcon.arrayForeground#f4d03f
symbolIcon.booleanForeground#c792ea
symbolIcon.classForeground#85a3e0
symbolIcon.colorForeground#e574a8
symbolIcon.constantForeground#c792ea
symbolIcon.constructorForeground#85e89d
symbolIcon.enumeratorForeground#85a3e0
symbolIcon.enumeratorMemberForeground#c792ea
symbolIcon.eventForeground#deb887
symbolIcon.fieldForeground#e8e5f0
symbolIcon.fileForeground#e8e5f0
symbolIcon.folderForeground#e8e5f0
symbolIcon.functionForeground#85e89d
symbolIcon.interfaceForeground#85a3e0
symbolIcon.keyForeground#c792ea
symbolIcon.keywordForeground#e574a8
symbolIcon.methodForeground#85e89d
symbolIcon.moduleForeground#f4d03f
symbolIcon.namespaceForeground#f4d03f
symbolIcon.nullForeground#c792ea
symbolIcon.numberForeground#c792ea
symbolIcon.objectForeground#85a3e0
symbolIcon.operatorForeground#e574a8
symbolIcon.packageForeground#85a3e0
symbolIcon.propertyForeground#e8e5f0
symbolIcon.referenceForeground#c792ea
symbolIcon.snippetForeground#85e89d
symbolIcon.stringForeground#f4d03f
symbolIcon.structForeground#85a3e0
symbolIcon.textForeground#e8e5f0
symbolIcon.typeParameterForeground#85a3e0
symbolIcon.unitForeground#c792ea
symbolIcon.variableForeground#e8e5f0
tab.activeBackground#1a0f1c
tab.activeBorder#c792ea
tab.activeBorderTop#c792ea
tab.activeForeground#c792ea
tab.activeModifiedBorder#b19ec9
tab.border#6b5b7340
tab.hoverBackground#1a0f1c
tab.hoverForeground#c792ea
tab.inactiveBackground#1e1026
tab.inactiveForeground#9d87b3
tab.inactiveModifiedBorder#b19ec980
tab.lastPinnedBorder#6b5b7340
tab.unfocusedActiveBorder#c792ea60
tab.unfocusedActiveForeground#c792ea80
tab.unfocusedHoverForeground#c792ea
tab.unfocusedInactiveForeground#9d87b380
terminal.ansiBlack#1a0f1c
terminal.ansiBlue#85a3e0
terminal.ansiBrightBlack#6b5b73
terminal.ansiBrightBlue#9bb3e8
terminal.ansiBrightCyan#9fdef2
terminal.ansiBrightGreen#9eecad
terminal.ansiBrightMagenta#d1a6ef
terminal.ansiBrightRed#ee8bb8
terminal.ansiBrightWhite#f5f2fc
terminal.ansiBrightYellow#f6dd5a
terminal.ansiCyan#7fd3ed
terminal.ansiGreen#85e89d
terminal.ansiMagenta#c792ea
terminal.ansiRed#e574a8
terminal.ansiWhite#e8e5f0
terminal.ansiYellow#f4d03f
terminal.background#1a0f1c
terminal.foreground#e8e5f0
terminal.selectionBackground#6b5b7380
terminal.selectionForeground#e8e5f0
terminalCursor.background#1a0f1c
terminalCursor.foreground#f4d03f
terminalStickyScrollHover.background#2a1b2e
textBlockQuote.background#2a1b2e
textBlockQuote.border#c792ea
textCodeBlock.background#2a1b2e
textLink.activeForeground#b678d9
textLink.foreground#c792ea
textPreformat.background#2a1b2e
textPreformat.foreground#9d87b3
textSeparator.foreground#c792ea
titleBar.activeBackground#15081a
titleBar.activeForeground#e8e5f0
titleBar.border#6b5b7340
titleBar.inactiveBackground#15081a90
titleBar.inactiveForeground#c4b8d1
toolbar.activeBackground#6b5b7360
toolbar.hoverBackground#6b5b7340
tree.indentGuidesStroke#6b5b7360
walkThrough.embeddedEditorBackground#1a0f1c
welcomePage.progress.background#2a1b2e
welcomePage.progress.foreground#c792ea
welcomePage.tileBackground#2a1b2e
welcomePage.tileBorder#6b5b7340
welcomePage.tileHoverBackground#6b5b7360
widget.shadow#00000050
window.activeBorder#c792ea
window.inactiveBorder#6b5b7340

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	#9d87b3	—
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	#8a7a94	—
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	#9d87b3	—
variable.other.constant, punctuation.definition.constant, constant.language, constant.numeric, support.constant, constant.other.caps	#c792ea	—
string, constant.other.symbol, constant.other.key, meta.attribute-selector, string constant.character	#f4d03f
constant.other.color, constant.other.color.rgb-value.hex punctuation.definition.constant	#c792ea	—
invalid, invalid.illegal	#e574a8	—
invalid.deprecated	#deb887	—
storage.type	#e574a8	—
meta.var.expr storage.type, storage.modifier	#e574a8	—
punctuation.definition.template-expression, punctuation.section.embedded, meta.embedded.line.tag.smarty, support.constant.handlebars, punctuation.section.tag.twig	#e574a8	—
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	#e574a8	—
keyword.operator.spread, keyword.operator.rest	#e574a8	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	#e574a8	—
keyword.control.module.js, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.default, meta.import keyword.other	#c792ea	—
keyword, keyword.control, keyword.other.important	#e574a8	—
keyword.other.DML	#c792ea	—
keyword.operator.logical, storage.type.function, keyword.operator.bitwise, keyword.operator.ternary, keyword.operator.comparison, keyword.operator.relational, keyword.operator.or.regexp	#e574a8	—
entity.name.tag	#85a3e0	—
entity.name.tag support.class.component, meta.tag.custom entity.name.tag, meta.tag.other.unrecognized.html.derivative entity.name.tag, meta.tag	#7fd3ed	—
punctuation.definition.tag, text.html.php meta.embedded.block.html meta.tag.metadata.script.end.html punctuation.definition.tag.begin.html text.html.basic	#9d87b3	—
constant.other.php, variable.other.global.safer, variable.other.global.safer punctuation.definition.variable, variable.other.global, variable.other.global punctuation.definition.variable, constant.other	#deb887	—
variable, support.variable, string constant.other.placeholder, variable.parameter.handlebars, variable.other.object, meta.fstring, meta.function-call meta.function-call.arguments	#e8e5f0	—
meta.array.literal variable	#c792ea	—
meta.object-literal.key, entity.name.type.hcl, string.alias.graphql, string.unquoted.graphql, string.unquoted.alias.graphql, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, meta.field.declaration.ts variable.object.property, meta.block entity.name.label	#85e89d	—
variable.other.property, support.variable.property, support.variable.property.dom, meta.function-call variable.other.object.property	#c792ea	—
variable.other.object.property	#e8e5f0	—
source.cpp meta.block variable.other	#85a3e0	—
support.other.variable	#85a3e0	—
meta.class-method.js entity.name.function.js, entity.name.method.js, variable.function.constructor, keyword.other.special-method, storage.type.cs	#85e89d	—
entity.name.function, variable.other.enummember, meta.function-call, meta.function-call entity.name.function, variable.function, meta.definition.method entity.name.function, meta.object-literal entity.name.function	#85e89d	—
variable.parameter.function.language.special, variable.parameter, meta.function.parameters punctuation.definition.variable, meta.function.parameter variable	#deb887	—
keyword.other.type.php, storage.type.php, constant.character, constant.escape, keyword.other.unit	#c792ea	—
meta.definition.variable variable.other.constant, meta.definition.variable variable.other.readwrite, variable.declaration.hcl variable.other.readwrite.hcl, meta.mapping.key.hcl variable.other.readwrite.hcl, variable.other.declaration	#c792ea	—
entity.other.inherited-class	#c792ea
support.class, support.type, variable.other.readwrite.alias, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, support.type.sys-types, support.variable.dom, support.constant.math, support.type.object.module, support.constant.json, entity.name.namespace, meta.import.qualifier, variable.other.constant.object	#85a3e0	—
entity.name	#e8e5f0	—
support.function	#85a3e0	—
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, support.type.property-name.css, support.type.vendored.property-name, support.type.map.key	#85e89d	—
support.constant.font-name, meta.definition.variable	#f4d03f	—
entity.other.attribute-name.class, meta.at-rule.mixin.scss entity.name.function.scss	#f4d03f	—
entity.other.attribute-name.id	#e574a8	—
entity.name.tag.css	#85a3e0	—
entity.other.attribute-name.pseudo-class punctuation.definition.entity, entity.other.attribute-name.pseudo-element punctuation.definition.entity, entity.other.attribute-name.class punctuation.definition.entity, entity.name.tag.reference	#deb887	—
meta.property-list	#e8e5f0	—
punctuation.definition.list_item.markdown	#e8e5f0	—
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	#e8e5f0	—
meta.embedded.block	#e8e5f0	—
meta.tag JSXNested, meta.jsx.children, text.html, text.log	#e8e5f0	—
text.html.markdown markup.inline.raw.markdown	#85e89d	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#9d87b3	—
heading.1.markdown entity.name, heading.1.markdown punctuation.definition.heading.markdown	#c792ea	bold
heading.2.markdown entity.name, heading.2.markdown punctuation.definition.heading.markdown	#85a3e0	bold
heading.3.markdown entity.name, heading.3.markdown punctuation.definition.heading.markdown	#85e89d	bold
heading.4.markdown entity.name, heading.4.markdown punctuation.definition.heading.markdown	#f4d03f	bold
heading.5.markdown entity.name, heading.5.markdown punctuation.definition.heading.markdown	#deb887	bold
heading.6.markdown entity.name, heading.6.markdown punctuation.definition.heading.markdown	#e574a8	bold
markup.italic, markup.italic punctuation	#f4d03f	italic
markup.bold, markup.bold punctuation	#deb887	bold
markup.bold markup.italic, markup.bold markup.italic punctuation	#e574a8	bold italic
markup.underline, markup.underline punctuation	—	underline
markup.quote punctuation.definition.blockquote.markdown	#9d87b3	—
markup.quote	—	italic
string.other.link, markup.underline.link, constant.other.reference.link.markdown, string.other.link.description.title.markdown	#85a3e0	—
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.language.fenced.markdown	#85e89d	—
meta.separator	#9d87b3	bold
markup.table	#e8e5f0	—
token.info-token	#85a3e0	—
token.warn-token	#deb887	—
token.error-token	#e574a8	—
token.debug-token	#c792ea	—
entity.tag.apacheconf	#e574a8	—
meta.preprocessor	#85a3e0	—
source.env	#85e89d	—
markup.inserted	#85e89d	—
markup.deleted	#e574a8	—
markup.changed	#85a3e0	—
string.regexp	#f4d03f	—
punctuation.definition.group	#85e89d	—
constant.other.character-class.regexp	#85a3e0	—
constant.other.character-class.set.regexp, punctuation.definition.character-class.regexp	#f4d03f	—
keyword.operator.quantifier.regexp	#e574a8	—
constant.character.escape.backslash	#e574a8	—
constant.character.escape	#e574a8	—
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#85e89d	—
keyword.other.unit	#c792ea	—
source.json meta.structure.dictionary.json support.type.property-name.json	#85a3e0	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#85e89d	—
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	#f4d03f	—
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	#deb887	—
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	#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 support.type.property-name.json	#e574a8	—
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	#85a3e0	—
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	#85e89d	—
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	#f4d03f	—
variable.language	#e574a8	—
variable.other punctuation.definition.variable	#e8e5f0	—
source.js constant.other.object.key.js string.unquoted.label.js, variable.language.this punctuation.definition.variable, keyword.other.this	#e574a8	—
entity.other.attribute-name, text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#85e89d	—
text.html constant.character.entity	#c792ea	—
entity.other.attribute-name.id.html, meta.directive.vue entity.other.attribute-name.html	#85e89d	—
source.sass keyword.control	#85e89d	—
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.placeholder, meta.property-list meta.property-value	#85e89d	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#e8e5f0	—
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	#c792ea	—
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	#e574a8	—
meta.property-list meta.at-rule.include	#e8e5f0	—
support.constant.property-value	#c792ea	—

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