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 — Kevin Nino

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#ffffff20
activityBar.activeBorder#ffffff
activityBar.background#87ceeb
activityBar.border#6bb6d6
activityBar.dropBorder#ffffff
activityBar.foreground#ffffff
activityBar.inactiveForeground#ffffff90
activityBarBadge.background#ffffff
activityBarBadge.foreground#87ceeb
activityBarTop.activeBorder#ffffff
activityBarTop.dropBorder#ffffff
activityBarTop.foreground#ffffff
activityBarTop.inactiveForeground#ffffff80
badge.background#87ceeb
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#87ceeb
breadcrumb.background#f8fcff
breadcrumb.focusForeground#87ceeb
breadcrumb.foreground#5a6c7d
breadcrumbPicker.background#ffffff
button.background#87ceeb
button.border#87ceeb40
button.foreground#ffffff
button.hoverBackground#6bb6d6
button.secondaryBackground#ecf5ff
button.secondaryForeground#87ceeb
button.secondaryHoverBackground#d6e9f7
button.separator#ffffff
charts.blue#87ceeb
charts.foreground#2c3e50
charts.green#2ecc71
charts.lines#d6e9f7
charts.orange#e67e22
charts.purple#9b59b6
charts.red#e74c3c
charts.yellow#f39c12
chat.avatarBackground#87ceeb
chat.avatarForeground#ffffff
chat.requestBorder#d6e9f7
chat.slashCommandBackground#f0f8ff
chat.slashCommandForeground#87ceeb
commandCenter.activeBackground#87ceeb15
commandCenter.activeForeground#87ceeb
commandCenter.background#f8fcff
commandCenter.border#d6e9f7
commandCenter.foreground#2c3e50
contrastActiveBorder#00000000
contrastBorder#00000000
debugConsole.errorForeground#e74c3c
debugConsole.infoForeground#87ceeb
debugConsole.sourceForeground#2c3e50
debugConsole.warningForeground#f39c12
debugConsoleInputIcon.foreground#87ceeb
debugExceptionWidget.background#fdf2f2
debugExceptionWidget.border#e74c3c
debugIcon.breakpointCurrentStackframeForeground#e74c3c
debugIcon.breakpointDisabledForeground#bdc3c7
debugIcon.breakpointForeground#e74c3c
debugIcon.breakpointUnverifiedForeground#f39c12
debugIcon.continueForeground#87ceeb
debugIcon.disconnectForeground#e74c3c
debugIcon.pauseForeground#f39c12
debugIcon.restartForeground#2ecc71
debugIcon.startForeground#2ecc71
debugIcon.stepBackForeground#87ceeb
debugIcon.stepIntoForeground#87ceeb
debugIcon.stepOutForeground#87ceeb
debugIcon.stepOverForeground#87ceeb
debugIcon.stopForeground#e74c3c
debugTokenExpression.boolean#27ae60
debugTokenExpression.error#e74c3c
debugTokenExpression.name#1abc9c
debugTokenExpression.number#27ae60
debugTokenExpression.string#16a085
debugTokenExpression.value#2c3e50
debugToolBar.background#f0f8ff
debugToolBar.border#d6e9f7
debugView.stateLabelBackground#f0f8ff
debugView.stateLabelForeground#2c3e50
debugView.valueChangedHighlight#87ceebaa
descriptionForeground#5a6c7d
diffEditor.border#d6e9f7
diffEditor.diagonalFill#f0f8ff
diffEditor.insertedLineBackground#2ecc7115
diffEditor.insertedTextBackground#2ecc7120
diffEditor.insertedTextBorder#00000000
diffEditor.move.border#f39c124d
diffEditor.moveActive.border#f39c12b3
diffEditor.removedLineBackground#e74c3c15
diffEditor.removedTextBackground#e74c3c20
diffEditor.removedTextBorder#00000000
diffEditor.unchangedCodeBackground#f8fcff
diffEditorGutter.insertedLineBackground#2ecc7120
diffEditorGutter.removedLineBackground#e74c3c20
diffEditorOverview.insertedForeground#2ecc7125
diffEditorOverview.removedForeground#e74c3c25
disabledForeground#8ca3b8
dropdown.background#ffffff
dropdown.border#d6e9f7
dropdown.foreground#2c3e50
dropdown.listBackground#ffffff
editor.background#f8fcff
editor.findMatchBackground#ffd70060
editor.findMatchBorder#f39c12
editor.findMatchHighlightBackground#ffd70040
editor.findMatchHighlightBorder#f39c1280
editor.findRangeHighlightBackground#87ceeb15
editor.focusedStackFrameHighlightBackground#87ceeb40
editor.foldBackground#87ceeb10
editor.foreground#2c3e50
editor.hoverHighlightBackground#87ceeb15
editor.inactiveSelectionBackground#87ceeb20
editor.lineHighlightBackground#f0f8ff
editor.lineHighlightBorder#e6f3ff
editor.linkedEditingBackground#87ceeb25
editor.rangeHighlightBackground#87ceeb15
editor.selectionBackground#87ceeb40
editor.selectionForeground#2c3e50
editor.selectionHighlightBackground#87ceeb25
editor.selectionHighlightBorder#87ceeb60
editor.stackFrameHighlightBackground#f39c1240
editor.wordHighlightBackground#87ceeb20
editor.wordHighlightBorder#87ceeb50
editor.wordHighlightStrongBackground#87ceeb30
editor.wordHighlightStrongBorder#87ceeb70
editorBracketHighlight.foreground1#87ceeb
editorBracketHighlight.foreground2#3498db
editorBracketHighlight.foreground3#9b59b6
editorBracketHighlight.foreground4#2ecc71
editorBracketHighlight.foreground5#f39c12
editorBracketHighlight.foreground6#e74c3c
editorBracketHighlight.unexpectedBracket.foreground#e74c3c
editorBracketMatch.background#87ceeb20
editorBracketMatch.border#87ceeb
editorBracketPairGuide.activeBackground1#87ceeb
editorBracketPairGuide.activeBackground2#3498db
editorBracketPairGuide.activeBackground3#9b59b6
editorBracketPairGuide.activeBackground4#2ecc71
editorBracketPairGuide.activeBackground5#f39c12
editorBracketPairGuide.activeBackground6#e74c3c
editorCodeLens.foreground#8ca3b8
editorCursor.background#f8fcff
editorCursor.foreground#87ceeb
editorError.border#00000000
editorError.foreground#e74c3c
editorGhostText.border#00000000
editorGhostText.foreground#87ceeb60
editorGroup.border#d6e9f7
editorGroup.dropBackground#87ceeb15
editorGroupHeader.border#d6e9f7
editorGroupHeader.noTabsBackground#f8fcff
editorGroupHeader.tabsBackground#f0f8ff
editorGroupHeader.tabsBorder#d6e9f7
editorGutter.addedBackground#2ecc71
editorGutter.background#f8fcff
editorGutter.commentRangeForeground#8ca3b8
editorGutter.deletedBackground#e74c3c
editorGutter.modifiedBackground#3498db
editorHint.border#00000000
editorHint.foreground#87ceeb
editorHoverWidget.background#ffffff
editorHoverWidget.border#d6e9f7
editorIndentGuide.activeBackground1#d6e9f7
editorIndentGuide.background1#e6f3ff
editorInfo.border#00000000
editorInfo.foreground#87ceeb
editorInlayHint.background#f0f8ff
editorInlayHint.foreground#8ca3b8
editorInlayHint.typeBackground#f0f8ff
editorInlayHint.typeForeground#8ca3b8
editorLightBulb.foreground#f39c12
editorLightBulbAutoFix.foreground#f39c12
editorLineNumber.activeForeground#87ceeb
editorLineNumber.foreground#b0c4d4
editorLink.activeForeground#87ceeb
editorMarkerNavigation.background#f8fcff
editorMarkerNavigationError.background#fdf2f2
editorMarkerNavigationInfo.background#f0f8ff
editorMarkerNavigationWarning.background#fff8f0
editorOverviewRuler.addedForeground#2ecc71
editorOverviewRuler.border#d6e9f7
editorOverviewRuler.bracketMatchForeground#87ceeb80
editorOverviewRuler.deletedForeground#e74c3c
editorOverviewRuler.errorForeground#e74c3c
editorOverviewRuler.findMatchForeground#f39c12
editorOverviewRuler.infoForeground#87ceeb
editorOverviewRuler.modifiedForeground#3498db
editorOverviewRuler.rangeHighlightForeground#87ceeb40
editorOverviewRuler.selectionHighlightForeground#87ceeb30
editorOverviewRuler.warningForeground#f39c12
editorOverviewRuler.wordHighlightForeground#87ceeb50
editorOverviewRuler.wordHighlightStrongForeground#87ceeb70
editorPane.background#f8fcff
editorRuler.foreground#e6f3ff
editorStickyScroll.background#f8fcff
editorStickyScroll.shadow#00000015
editorStickyScrollHover.background#f0f8ff
editorSuggestWidget.background#ffffff
editorSuggestWidget.border#d6e9f7
editorSuggestWidget.foreground#2c3e50
editorSuggestWidget.highlightForeground#87ceeb
editorSuggestWidget.selectedBackground#f0f8ff
editorSuggestWidget.selectedIconForeground#87ceeb
editorUnnecessaryCode.border#00000000
editorUnnecessaryCode.opacity#00000060
editorWarning.border#00000000
editorWarning.foreground#f39c12
editorWhitespace.foreground#d6e9f7
editorWidget.background#f8fcff
editorWidget.border#d6e9f7
editorWidget.foreground#2c3e50
editorWidget.resizeBorder#87ceeb
errorForeground#e74c3c
errorLens.errorForeground#e74c3c99
errorLens.hintForeground#87ceeb99
errorLens.infoForeground#87ceeb99
errorLens.warningForeground#f39c1299
extensionBadge.remoteBackground#87ceeb
extensionBadge.remoteForeground#ffffff
extensionButton.background#ecf5ff
extensionButton.foreground#87ceeb
extensionButton.hoverBackground#d6e9f7
extensionButton.prominentBackground#87ceebDD
extensionButton.prominentForeground#ffffff
extensionButton.prominentHoverBackground#6bb6d6
focusBorder#87ceeb80
foreground#2c3e50
gitDecoration.addedResourceForeground#2ecc71
gitDecoration.conflictingResourceForeground#f39c12
gitDecoration.deletedResourceForeground#e74c3c
gitDecoration.ignoredResourceForeground#8ca3b8
gitDecoration.modifiedResourceForeground#3498db
gitDecoration.renamedResourceForeground#3498db
gitDecoration.stageDeletedResourceForeground#e74c3c
gitDecoration.stageModifiedResourceForeground#3498db
gitDecoration.untrackedResourceForeground#2ecc71
icon.foreground#87ceebAA
inlineChat.background#f8fcff
inlineChat.border#d6e9f7
inlineChat.foreground#2c3e50
inlineChat.regionHighlight#87ceeb15
inlineChat.shadow#00000015
inlineChatDiff.inserted#2ecc7120
inlineChatDiff.removed#e74c3c20
inlineChatInput.background#ffffff
inlineChatInput.border#d6e9f7
inlineChatInput.focusBorder#87ceeb
inlineChatInput.placeholderForeground#8ca3b8
input.background#ffffff
input.border#d6e9f7
input.foreground#2c3e50
input.placeholderForeground#8ca3b8
inputOption.activeBackground#87ceeb80
inputOption.activeBorder#00000000
inputOption.activeForeground#ffffff
inputOption.hoverBackground#ecf5ff
inputValidation.errorBackground#fdf2f2
inputValidation.errorBorder#e74c3c
inputValidation.errorForeground#e74c3c
inputValidation.infoBackground#f0f8ff
inputValidation.infoBorder#87ceeb
inputValidation.infoForeground#2c3e50
inputValidation.warningBackground#fff8f0
inputValidation.warningBorder#f39c12
inputValidation.warningForeground#8b4513
keybindingLabel.background#f0f8ff
keybindingLabel.border#d6e9f7
keybindingLabel.bottomBorder#c0d6e8
keybindingLabel.foreground#2c3e50
list.activeSelectionBackground#87ceeb30
list.activeSelectionForeground#2c3e50
list.deemphasizedForeground#8ca3b8
list.dropBackground#87ceeb15
list.errorForeground#e74c3c
list.focusBackground#87ceeb25
list.focusForeground#2c3e50
list.highlightForeground#87ceeb
list.hoverBackground#f0f8ff
list.hoverForeground#2c3e50
list.inactiveSelectionBackground#87ceeb20
list.inactiveSelectionForeground#2c3e50
list.warningForeground#f39c12
listFilterWidget.background#f8fcff
listFilterWidget.noMatchesOutline#e74c3c
listFilterWidget.outline#87ceeb
menu.background#f8fcff
menu.border#d6e9f7
menu.foreground#2c3e50
menu.selectionBackground#f0f8ff
menu.selectionForeground#87ceeb
menu.separatorBackground#d6e9f7
menubar.selectionBackground#f0f8ff
menubar.selectionBorder#87ceeb40
menubar.selectionForeground#87ceeb
merge.border#d6e9f7
merge.commonContentBackground#f39c1240
merge.commonHeaderBackground#f39c1280
merge.currentContentBackground#2ecc7120
merge.currentHeaderBackground#2ecc7140
merge.incomingContentBackground#87ceeb40
merge.incomingHeaderBackground#87ceeb80
mergeEditor.change.background#2ecc7120
mergeEditor.change.word.background#2ecc7140
mergeEditor.conflict.handled.minimapOverViewRuler#2ecc71
mergeEditor.conflict.handledFocused.border#2ecc71
mergeEditor.conflict.handledUnfocused.border#2ecc7180
mergeEditor.conflict.unhandled.minimapOverViewRuler#f39c12
mergeEditor.conflict.unhandledFocused.border#f39c12
mergeEditor.conflict.unhandledUnfocused.border#f39c1280
minimap.background#fbfdff
minimap.errorHighlight#e74c3c
minimap.findMatchHighlight#f39c1260
minimap.selectionHighlight#87ceeb40
minimap.selectionOccurrenceHighlight#87ceeb30
minimap.warningHighlight#f39c12
minimapGutter.addedBackground#2ecc71
minimapGutter.deletedBackground#e74c3c
minimapGutter.modifiedBackground#3498db
multiDiffEditor.border#d6e9f7
multiDiffEditor.headerBackground#f0f8ff
notebook.cellBorderColor#d6e9f7
notebook.cellEditorBackground#ffffff
notebook.cellInsertionIndicator#87ceeb
notebook.cellStatusBarItemHoverBackground#f0f8ff
notebook.cellToolbarSeparator#d6e9f7
notebook.editorBackground#f8fcff
notebook.focusedCellBorder#87ceeb
notebook.focusedEditorBorder#87ceeb
notebook.inactiveFocusedCellBorder#d6e9f7
notebook.inactiveSelectedCellBorder#d6e9f7
notebook.outputContainerBackgroundColor#f0f8ff
notebook.selectedCellBackground#f0f8ff
notebook.selectedCellBorder#87ceeb
notebook.symbolHighlightBackground#f39c1260
notebookScrollbarSlider.activeBackground#87ceeb70
notebookScrollbarSlider.background#87ceeb30
notebookScrollbarSlider.hoverBackground#87ceeb50
notebookStatusErrorIcon.foreground#e74c3c
notebookStatusRunningIcon.foreground#3498db
notebookStatusSuccessIcon.foreground#2ecc71
notificationCenter.border#d6e9f7
notificationCenterHeader.background#f0f8ff
notificationCenterHeader.foreground#2c3e50
notificationLink.foreground#87ceeb
notifications.background#f8fcff
notifications.border#d6e9f7
notifications.foreground#2c3e50
notificationsErrorIcon.foreground#e74c3c
notificationsInfoIcon.foreground#87ceeb
notificationsWarningIcon.foreground#f39c12
notificationToast.border#d6e9f7
panel.background#f8fcff
panel.border#d6e9f7
panel.dropBorder#87ceeb
panelInput.border#d6e9f7
panelSection.border#d6e9f7
panelSection.dropBackground#87ceeb15
panelSectionHeader.background#f0f8ff
panelSectionHeader.border#d6e9f7
panelSectionHeader.foreground#87ceeb
panelTitle.activeBorder#87ceeb
panelTitle.activeForeground#87ceeb
panelTitle.inactiveForeground#5a6c7d
peekView.border#87ceeb
peekViewEditor.background#f8fcff
peekViewEditor.matchHighlightBackground#f39c1260
peekViewEditor.matchHighlightBorder#00000000
peekViewEditorGutter.background#f8fcff
peekViewEditorStickyScroll.background#f0f8ff
peekViewResult.background#f0f8ff
peekViewResult.fileForeground#2c3e50
peekViewResult.lineForeground#5a6c7d
peekViewResult.matchHighlightBackground#f39c1260
peekViewResult.selectionBackground#87ceeb40
peekViewResult.selectionForeground#2c3e50
peekViewTitle.background#ffffff
peekViewTitleDescription.foreground#5a6c7d
peekViewTitleLabel.foreground#87ceeb
pickerGroup.border#d6e9f7
pickerGroup.foreground#87ceeb
profileBadge.background#87ceeb
profileBadge.foreground#ffffff
progressBar.background#87ceeb
quickInput.background#f8fcff
quickInput.foreground#2c3e50
quickInputList.focusBackground#87ceeb30
quickInputList.focusForeground#2c3e50
quickInputList.focusIconForeground#87ceeb
quickInputTitle.background#f0f8ff
sash.hoverBorder#87ceeb
scmGraph.foreground1#87ceeb
scmGraph.foreground2#3498db
scmGraph.foreground3#2ecc71
scmGraph.foreground4#f39c12
scmGraph.foreground5#e74c3c
scmGraph.historyItemAdditionsForeground#2ecc71
scmGraph.historyItemBaseRefColor#e74c3c
scmGraph.historyItemDefaultLabelForeground#2c3e50
scmGraph.historyItemDeletionsForeground#e74c3c
scmGraph.historyItemHoverDefaultLabelForeground#2c3e50
scmGraph.historyItemHoverLabelForeground#2c3e50
scmGraph.historyItemRefColor#3498db
scmGraph.historyItemRemoteRefColor#2ecc71
scrollbar.shadow#00000020
scrollbarSlider.activeBackground#87ceeb70
scrollbarSlider.background#87ceeb30
scrollbarSlider.hoverBackground#87ceeb50
selection.background#87ceeb40
settings.headerForeground#87ceeb
settings.modifiedItemIndicator#87ceeb
sideBar.background#f0f8ff
sideBar.border#d6e9f7
sideBar.dropBackground#87ceeb20
sideBar.foreground#2c3e50
sideBarSectionHeader.background#e6f3ff
sideBarSectionHeader.border#d6e9f7
sideBarSectionHeader.foreground#87ceeb
sideBarStickyScroll.background#eef7ff
sideBarStickyScroll.shadow#00000015
sideBarTitle.foreground#87ceeb
statusBar.background#87ceeb
statusBar.border#6bb6d6
statusBar.debuggingBackground#f39c12
statusBar.debuggingBorder#e67e22
statusBar.debuggingForeground#ffffff
statusBar.foreground#ffffff
statusBar.noFolderBackground#95a5a6
statusBar.noFolderBorder#7f8c8d
statusBar.noFolderForeground#ffffff
statusBarItem.activeBackground#ffffff20
statusBarItem.compactHoverBackground#ffffff20
statusBarItem.errorBackground#e74c3c
statusBarItem.errorForeground#ffffff
statusBarItem.errorHoverBackground#c0392b
statusBarItem.errorHoverForeground#ffffff
statusBarItem.hoverBackground#ffffff30
statusBarItem.hoverForeground#ffffff
statusBarItem.offlineBackground#95a5a6
statusBarItem.offlineForeground#ffffff
statusBarItem.offlineHoverBackground#7f8c8d
statusBarItem.prominentBackground#ffffff30
statusBarItem.prominentForeground#ffffff
statusBarItem.prominentHoverBackground#ffffff40
statusBarItem.remoteBackground#87ceeb
statusBarItem.remoteForeground#ffffff
statusBarItem.remoteHoverBackground#ffffff20
statusBarItem.remoteHoverForeground#ffffff
statusBarItem.warningBackground#f39c12
statusBarItem.warningForeground#ffffff
statusBarItem.warningHoverBackground#e67e22
statusBarItem.warningHoverForeground#ffffff
symbolIcon.arrayForeground#27ae60
symbolIcon.booleanForeground#27ae60
symbolIcon.classForeground#e67e22
symbolIcon.colorForeground#f39c12
symbolIcon.constantForeground#27ae60
symbolIcon.constructorForeground#9b59b6
symbolIcon.enumeratorForeground#e67e22
symbolIcon.enumeratorMemberForeground#27ae60
symbolIcon.eventForeground#f39c12
symbolIcon.fieldForeground#27ae60
symbolIcon.fileForeground#2c3e50
symbolIcon.folderForeground#2c3e50
symbolIcon.functionForeground#9b59b6
symbolIcon.interfaceForeground#e67e22
symbolIcon.keyForeground#27ae60
symbolIcon.keywordForeground#87ceeb
symbolIcon.methodForeground#9b59b6
symbolIcon.moduleForeground#87ceeb
symbolIcon.namespaceForeground#87ceeb
symbolIcon.nullForeground#27ae60
symbolIcon.numberForeground#27ae60
symbolIcon.objectForeground#e67e22
symbolIcon.operatorForeground#87ceeb
symbolIcon.packageForeground#e67e22
symbolIcon.propertyForeground#e67e22
symbolIcon.referenceForeground#27ae60
symbolIcon.snippetForeground#2ecc71
symbolIcon.stringForeground#16a085
symbolIcon.structForeground#e67e22
symbolIcon.textForeground#2c3e50
symbolIcon.typeParameterForeground#e67e22
symbolIcon.unitForeground#27ae60
symbolIcon.variableForeground#27ae60
tab.activeBackground#f8fcff
tab.activeBorder#87ceeb
tab.activeBorderTop#87ceeb
tab.activeForeground#87ceeb
tab.activeModifiedBorder#3498db
tab.border#d6e9f7
tab.hoverBackground#f8fcff
tab.hoverForeground#87ceeb
tab.inactiveBackground#f0f8ff
tab.inactiveForeground#5a6c7d
tab.inactiveModifiedBorder#3498db80
tab.lastPinnedBorder#d6e9f7
tab.unfocusedActiveBorder#87ceeb60
tab.unfocusedActiveForeground#87ceeb80
tab.unfocusedHoverBackground#f8fcff
tab.unfocusedHoverForeground#87ceeb
tab.unfocusedInactiveForeground#5a6c7d80
terminal.ansiBlack#2c3e50
terminal.ansiBlue#87ceeb
terminal.ansiBrightBlack#5a6c7d
terminal.ansiBrightBlue#3498db
terminal.ansiBrightCyan#16a085
terminal.ansiBrightGreen#27ae60
terminal.ansiBrightMagenta#8e44ad
terminal.ansiBrightRed#c0392b
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#e67e22
terminal.ansiCyan#1abc9c
terminal.ansiGreen#2ecc71
terminal.ansiMagenta#9b59b6
terminal.ansiRed#e74c3c
terminal.ansiWhite#ecf0f1
terminal.ansiYellow#f39c12
terminal.background#f8fcff
terminal.foreground#2c3e50
terminal.selectionBackground#87ceeb30
terminal.selectionForeground#2c3e50
terminalCursor.background#f8fcff
terminalCursor.foreground#87ceeb
terminalStickyScrollHover.background#f0f8ff
textBlockQuote.background#f0f8ff
textBlockQuote.border#87ceeb
textCodeBlock.background#f0f8ff
textLink.activeForeground#6bb6d6
textLink.foreground#87ceeb
textPreformat.background#f0f8ff
textPreformat.foreground#5a6c7d
textSeparator.foreground#87ceeb
titleBar.activeBackground#87ceeb
titleBar.activeForeground#ffffff
titleBar.border#6bb6d6
titleBar.inactiveBackground#87ceeb90
titleBar.inactiveForeground#ffffffcc
toolbar.activeBackground#f0f8ff
toolbar.hoverBackground#eef7ff
tree.indentGuidesStroke#d6e9f7
walkThrough.embeddedEditorBackground#f8fcff
welcomePage.progress.background#f0f8ff
welcomePage.progress.foreground#87ceeb
welcomePage.tileBackground#ffffff
welcomePage.tileBorder#d6e9f7
welcomePage.tileHoverBackground#f0f8ff
widget.shadow#00000015
window.activeBorder#87ceeb
window.inactiveBorder#d6e9f7

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	#8ca3b8	—
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	#a4b3c2	—
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	#bcc9d4	—
variable.other.constant, punctuation.definition.constant, constant.language, constant.numeric, support.constant, constant.other.caps	#27ae60	—
string, constant.other.symbol, constant.other.key, meta.attribute-selector, string constant.character	#16a085
constant.other.color, constant.other.color.rgb-value.hex punctuation.definition.constant	#5a6c7d	—
invalid, invalid.illegal	#e74c3c	—
invalid.deprecated	#9b59b6	—
storage.type	#9b59b6	—
meta.var.expr storage.type, storage.modifier	#8e44ad	—
punctuation.definition.template-expression, punctuation.section.embedded, meta.embedded.line.tag.smarty, support.constant.handlebars, punctuation.section.tag.twig	#1abc9c	—
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	#17a2b8	—
keyword.operator.spread, keyword.operator.rest	#e74c3c	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 punctuation.separator.key-value, meta.at-rule.function variable.parameter.url, meta.embedded.inline.phpx punctuation.definition.tag.begin.html, meta.embedded.inline.phpx punctuation.definition.tag.end.html	#87ceeb	—
keyword.control.module.js, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.default, meta.import keyword.other	#1abc9c	—
keyword, keyword.control, keyword.other.important	#87ceeb	—
keyword.other.DML	#1abc9c	—
keyword.operator.logical, storage.type.function, keyword.operator.bitwise, keyword.operator.ternary, keyword.operator.comparison, keyword.operator.relational, keyword.operator.or.regexp	#87ceeb	—
entity.name.tag	#87ceeb	—
entity.name.tag support.class.component, meta.tag.custom entity.name.tag, meta.tag.other.unrecognized.html.derivative entity.name.tag, meta.tag	#6bb6d6	—
punctuation.definition.tag, text.html.php meta.embedded.block.html meta.tag.metadata.script.end.html punctuation.definition.tag.begin.html text.html.basic	#6bb6d6	—
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	#f39c12	—
variable, support.variable, string constant.other.placeholder, variable.parameter.handlebars, variable.other.object, meta.fstring, meta.function-call meta.function-call.arguments, meta.embedded.inline.phpx constant.other.php	#2c3e50	—
meta.array.literal variable	#1abc9c	—
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	#16a085	—
variable.other.property, support.variable.property, support.variable.property.dom, meta.function-call variable.other.object.property	#1abc9c	—
variable.other.object.property	#2c3e50	—
meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.object-literal.key	#17a2b8	—
source.cpp meta.block variable.other	#e74c3c	—
support.other.variable	#e74c3c	—
meta.class-method.js entity.name.function.js, entity.name.method.js, variable.function.constructor, keyword.other.special-method, storage.type.cs	#9b59b6	—
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	#9b59b6	—
variable.parameter.function.language.special, variable.parameter, meta.function.parameters punctuation.definition.variable, meta.function.parameter variable	#f39c12	—
keyword.other.type.php, storage.type.php, constant.character, constant.escape, keyword.other.unit	#9b59b6	—
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	#9b59b6	—
entity.other.inherited-class	#9b59b6
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	#17a2b8	—
entity.name	#2c3e50	—
support.function	#17a2b8	—
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	#87ceeb	—
support.constant.font-name, meta.definition.variable	#16a085	—
entity.other.attribute-name.class, meta.at-rule.mixin.scss entity.name.function.scss	#16a085	—
entity.other.attribute-name.id	#e67e22	—
entity.name.tag.css	#17a2b8	—
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	#f39c12	—
meta.property-list	#5a6c7d	—
meta.property-list meta.at-rule.if, meta.at-rule.return variable.parameter.url, meta.property-list meta.at-rule.else	#27ae60	—
entity.other.attribute-name.parent-selector-suffix punctuation.definition.entity.css	#16a085	—
meta.property-list meta.property-list	#5a6c7d	—
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	#9b59b6	—
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	#8e44ad	—
meta.property-list meta.at-rule.include	#2c3e50	—
support.constant.property-value	#27ae60	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#2c3e50	—
variable.language	#e67e22	—
variable.other punctuation.definition.variable	#2c3e50	—
source.js constant.other.object.key.js string.unquoted.label.js, variable.language.this punctuation.definition.variable, keyword.other.this	#e67e22	—
entity.other.attribute-name, text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#e67e22	—
text.html constant.character.entity	#17a2b8	—
entity.other.attribute-name.id.html, meta.directive.vue entity.other.attribute-name.html	#e67e22	—
source.sass keyword.control	#87ceeb	—
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.placeholder, meta.property-list meta.property-value	#9b59b6	—
markup.inserted	#2ecc71	—
markup.deleted	#e74c3c	—
markup.changed	#3498db	—
string.regexp	#1abc9c	—
punctuation.definition.group	#e67e22	—
constant.other.character-class.regexp	#9b59b6	—
constant.other.character-class.set.regexp, punctuation.definition.character-class.regexp	#f39c12	—
keyword.operator.quantifier.regexp	#87ceeb	—
constant.character.escape.backslash	#2c3e50	—
constant.character.escape	#87ceeb	—
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#9b59b6	—
keyword.other.unit	#e67e22	—
source.json meta.structure.dictionary.json support.type.property-name.json	#87ceeb	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#17a2b8	—
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	#1abc9c	—
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	#9b59b6	—
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	#f39c12	—
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	#17a2b8	—
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	#16a085	—
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	#e67e22	—
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	#16a085	—
punctuation.definition.list_item.markdown	#5a6c7d	—
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	#5a6c7d	—
meta.embedded.block	#2c3e50	—
meta.tag JSXNested, meta.jsx.children, text.html, text.log	#5a6c7d	—
text.html.markdown markup.inline.raw.markdown	#9b59b6	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#8ca3b8	—
heading.1.markdown entity.name, heading.1.markdown punctuation.definition.heading.markdown	#87ceeb	bold
heading.2.markdown entity.name, heading.2.markdown punctuation.definition.heading.markdown	#6bb6d6	bold
heading.3.markdown entity.name, heading.3.markdown punctuation.definition.heading.markdown	#3498db	bold
heading.4.markdown entity.name, heading.4.markdown punctuation.definition.heading.markdown	#2980b9	bold
heading.5.markdown entity.name, heading.5.markdown punctuation.definition.heading.markdown	#5a6c7d	bold
heading.6.markdown entity.name, heading.6.markdown punctuation.definition.heading.markdown	#8ca3b8	bold
markup.italic, markup.italic punctuation	#2c3e50	italic
markup.bold, markup.bold punctuation	#2c3e50	bold
markup.bold markup.italic, markup.bold markup.italic punctuation	#2c3e50	bold italic
markup.underline, markup.underline punctuation	—	underline
markup.quote punctuation.definition.blockquote.markdown	#8ca3b8	—
markup.quote	—	italic
string.other.link, markup.underline.link, constant.other.reference.link.markdown, string.other.link.description.title.markdown	#87ceeb	—
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.language.fenced.markdown	#1abc9c	—
meta.separator	#8ca3b8	bold
markup.table	#2c3e50	—
token.info-token	#17a2b8	—
token.warn-token	#f39c12	—
token.error-token	#e74c3c	—
token.debug-token	#9b59b6	—
entity.tag.apacheconf	#87ceeb	—
meta.preprocessor	#16a085	—
source.env	#87ceeb	—

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