Colour

Name: Colour
Author: language-anew

Publisher: language-anewThemes in package: 36

Colour

Color themes

VS Code preview

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

Colour — Colour A 1

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

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#6a3550ff
activityBar.activeBorder#783c5aff
activityBar.activeFocusBorder#7d3f5eff
activityBar.background#402030ff
activityBar.border#6a3550ff
activityBar.dropBorder#6a3550ff
activityBar.foreground#fdfdfdff
activityBar.inactiveForeground#e6e6e6ff
activityBarBadge.background#6a3550ff
activityBarBadge.foreground#ffffffff
badge.background#6a1b35ff
badge.foreground#ffffffff
banner.background#401020ff
banner.foreground#f0f0f0ff
banner.iconForeground#ffffffff
bookmarks.lineBackground#401020ff
bookmarks.lineBorder#6a1b35ff
bookmarks.overviewRuler#401020ff
breadcrumb.activeSelectionForeground#ffffffff
breadcrumb.background#400515ff
breadcrumb.focusForeground#ffffffff
breadcrumb.foreground#ebebebff
breadcrumbPicker.background#6a0923ff
button.background#6a1b35ff
button.border#781e3cff
button.foreground#ffffffff
button.hoverBackground#781e3cff
button.secondaryBackground#6a1b35ff
button.secondaryForeground#ffffffff
button.secondaryHoverBackground#781e3cff
charts.blue#401020ff
charts.foreground#f0f0f0ff
charts.green#401020ff
charts.lines#401020ff
charts.orange#401020ff
charts.purple#401020ff
charts.red#401020ff
charts.yellow#401020ff
checkbox.background#6a1b35ff
checkbox.border#781e3cff
checkbox.foreground#ffffffff
debugConsole.errorForeground#f0f0f0ff
debugConsole.infoForeground#f0f0f0ff
debugConsole.sourceForeground#f0f0f0ff
debugConsole.warningForeground#f0f0f0ff
debugConsoleInputIcon.foreground#ffffffff
debugExceptionWidget.background#6a1b35ff
debugExceptionWidget.border#781e3cff
debugIcon.breakpointCurrentStackframeForeground#ffffffff
debugIcon.breakpointDisabledForeground#ffffffff
debugIcon.breakpointForeground#ffffffff
debugIcon.breakpointStackframeForeground#ffffffff
debugIcon.breakpointUnverifiedForeground#ffffffff
debugIcon.continueForeground#ffffffff
debugIcon.disconnectForeground#ffffffff
debugIcon.pauseForeground#ffffffff
debugIcon.restartForeground#ffffffff
debugIcon.startForeground#ffffffff
debugIcon.stepBackForeground#ffffffff
debugIcon.stepIntoForeground#ffffffff
debugIcon.stepOutForeground#ffffffff
debugIcon.stepOverForeground#ffffffff
debugIcon.stopForeground#ffffffff
debugTokenExpression.boolean#401020ff
debugTokenExpression.error#401020ff
debugTokenExpression.name#401020ff
debugTokenExpression.number#401020ff
debugTokenExpression.string#401020ff
debugTokenExpression.value#401020ff
debugToolBar.background#401020ff
debugToolBar.border#6a1b35ff
debugView.exceptionLabelBackground#6a1b35ff
debugView.exceptionLabelForeground#ffffffff
debugView.stateLabelBackground#6a1b35ff
debugView.stateLabelForeground#ffffffff
debugView.valueChangedHighlight#781e3cff
descriptionForeground#f0f0f0ff
diffEditor.border#6a1b35ff
diffEditor.diagonalFill#401020ff
diffEditor.insertedTextBackground#401020ff
diffEditor.insertedTextBorder#6a1b35ff
diffEditor.removedTextBackground#401020ff
diffEditor.removedTextBorder#6a1b35ff
dropdown.background#401020ff
dropdown.border#6a1b35ff
dropdown.foreground#f0f0f0ff
dropdown.listBackground#401b2bff
editor.background#400010ff
editor.findMatchBackground#400010ff
editor.findMatchBorder#6a001bff
editor.findMatchHighlightBackground#6a001bff
editor.findMatchHighlightBorder#78001eff
editor.findRangeHighlightBackground#6a001bff
editor.findRangeHighlightBorder#78001eff
editor.focusedStackFrameHighlightBackground#78001eff
editor.foldBackground#400010ff
editor.foreground#e8e8e8ff
editor.hoverHighlightBackground#78001eff
editor.inactiveSelectionBackground#400010ff
editor.inlineValuesBackground#400010ff
editor.inlineValuesForeground#e8e8e8ff
editor.lineHighlightBackground#6a001bff
editor.linkedEditingBackground#400010ff
editor.rangeHighlightBackground#6a001bff
editor.rangeHighlightBorder#78001eff
editor.selectionBackground#6a001bff
editor.selectionForeground#ffffffff
editor.selectionHighlightBackground#78001eff
editor.selectionHighlightBorder#7d001fff
editor.snippetFinalTabstopHighlightBackground#6a001bff
editor.snippetFinalTabstopHighlightBorder#78001eff
editor.snippetTabstopHighlightBackground#6a001bff
editor.snippetTabstopHighlightBorder#78001eff
editor.stackFrameHighlightBackground#6a001bff
editor.symbolHighlightBackground#78001eff
editor.symbolHighlightBorder#7d001fff
editor.wordHighlightBackground#6a001bff
editor.wordHighlightBorder#78001eff
editor.wordHighlightStrongBackground#6a001bff
editor.wordHighlightStrongBorder#78001eff
editorBracketHighlight.foreground1#ff0040ff
editorBracketHighlight.foreground2#ff0040ff
editorBracketHighlight.foreground3#ff0040ff
editorBracketHighlight.foreground4#ff0040ff
editorBracketHighlight.foreground5#ff0040ff
editorBracketHighlight.foreground6#ff0040ff
editorBracketHighlight.unexpectedBracket.foreground#7f7f7fff
editorBracketMatch.background#400010ff
editorBracketMatch.border#6a001bff
editorCodeLens.foreground#e8e8e8ff
editorCursor.background#400010ff
editorCursor.foreground#e8e8e8ff
editorError.background#400010ff
editorError.border#6a001bff
editorError.foreground#e8e8e8ff
editorGhostText.border#6a001bff
editorGhostText.foreground#e8e8e8ff
editorGroup.border#6a0923ff
editorGroup.dropBackground#400515ff
editorGroup.emptyBackground#400515ff
editorGroup.focusedEmptyBorder#780a28ff
editorGroupHeader.border#6a0923ff
editorGroupHeader.noTabsBackground#400515ff
editorGroupHeader.tabsBackground#400515ff
editorGroupHeader.tabsBorder#6a0923ff
editorGutter.addedBackground#6a0923ff
editorGutter.background#400515ff
editorGutter.commentRangeForeground#ebebebff
editorGutter.deletedBackground#6a0923ff
editorGutter.foldingControlForeground#ebebebff
editorGutter.modifiedBackground#6a0923ff
editorHint.border#6a001bff
editorHint.foreground#e8e8e8ff
editorHoverWidget.background#78001eff
editorHoverWidget.border#7d001fff
editorHoverWidget.foreground#ffffffff
editorHoverWidget.statusBarBackground#781e3cff
editorIndentGuide.activeBackground#ff0040ff
editorIndentGuide.background#9f0028ff
editorInfo.background#400010ff
editorInfo.border#6a001bff
editorInfo.foreground#e8e8e8ff
editorInlayHint.background#400010ff
editorInlayHint.foreground#e8e8e8ff
editorLightBulb.foreground#ffffffff
editorLightBulbAutoFix.foreground#7f7f7fff
editorLineNumber.activeForeground#ffffffff
editorLineNumber.foreground#e8e8e8ff
editorLink.activeForeground#ffffffff
editorMarkerNavigation.background#400010ff
editorMarkerNavigationError.background#400010ff
editorMarkerNavigationError.headerBackground#400010ff
editorMarkerNavigationInfo.background#400010ff
editorMarkerNavigationInfo.headerBackground#400010ff
editorMarkerNavigationWarning.background#400010ff
editorMarkerNavigationWarning.headerBackground#400010ff
editorOverviewRuler.addedForeground#ffffffff
editorOverviewRuler.background#400010ff
editorOverviewRuler.border#6a001bff
editorOverviewRuler.bracketMatchForeground#e8e8e8ff
editorOverviewRuler.commonContentForeground#e8e8e8ff
editorOverviewRuler.currentContentForeground#e8e8e8ff
editorOverviewRuler.deletedForeground#ffffffff
editorOverviewRuler.errorForeground#e8e8e8ff
editorOverviewRuler.findMatchForeground#e8e8e8ff
editorOverviewRuler.incomingContentForeground#e8e8e8ff
editorOverviewRuler.infoForeground#e8e8e8ff
editorOverviewRuler.modifiedForeground#ffffffff
editorOverviewRuler.rangeHighlightForeground#ffffffff
editorOverviewRuler.selectionHighlightForeground#ffffffff
editorOverviewRuler.warningForeground#e8e8e8ff
editorOverviewRuler.wordHighlightForeground#ffffffff
editorOverviewRuler.wordHighlightStrongForeground#ffffffff
editorPane.background#400010ff
editorRuler.foreground#e8e8e8ff
editorSuggestWidget.background#6a001bff
editorSuggestWidget.border#78001eff
editorSuggestWidget.focusHighlightForeground#ffffffff
editorSuggestWidget.foreground#ffffffff
editorSuggestWidget.highlightForeground#ffffffff
editorSuggestWidget.selectedBackground#78001eff
editorSuggestWidget.selectedForeground#ffffffff
editorSuggestWidget.selectedIconForeground#ffffffff
editorUnnecessaryCode.border#6a001b99
editorUnnecessaryCode.opacity#40001099
editorWarning.background#400010ff
editorWarning.border#6a001bff
editorWarning.foreground#e8e8e8ff
editorWhitespace.foreground#600018ff
editorWidget.background#6a001bff
editorWidget.border#78001eff
editorWidget.foreground#ffffffff
editorWidget.resizeBorder#78001eff
errorForeground#f0f0f0ff
errorLens.errorBackground#401020ff
errorLens.errorBackgroundLight#401020ff
errorLens.errorForeground#f0f0f0ff
errorLens.errorForegroundLight#f0f0f0ff
errorLens.errorMessageBackground#401020ff
errorLens.hintBackground#401020ff
errorLens.hintBackgroundLight#401020ff
errorLens.hintForeground#f0f0f0ff
errorLens.hintForegroundLight#f0f0f0ff
errorLens.hintMessageBackground#401020ff
errorLens.infoBackground#401020ff
errorLens.infoBackgroundLight#401020ff
errorLens.infoForeground#f0f0f0ff
errorLens.infoForegroundLight#f0f0f0ff
errorLens.infoMessageBackground#401020ff
errorLens.statusBarErrorForeground#f0f0f0ff
errorLens.statusBarHintForeground#f0f0f0ff
errorLens.statusBarInfoForeground#f0f0f0ff
errorLens.statusBarWarningForeground#f0f0f0ff
errorLens.warningBackground#401020ff
errorLens.warningBackgroundLight#401020ff
errorLens.warningForeground#f0f0f0ff
errorLens.warningForegroundLight#f0f0f0ff
errorLens.warningMessageBackground#401020ff
extensionBadge.remoteBackground#6a1b35ff
extensionBadge.remoteForeground#ffffffff
extensionButton.prominentBackground#6a1b35ff
extensionButton.prominentForeground#ffffffff
extensionButton.prominentHoverBackground#781e3cff
extensionIcon.starForeground#ffffffff
focusBorder#781e3cff
foreground#f0f0f0ff
gitlens.closedPullRequestIconColor#6a1b35ff
gitlens.decorations.addedForegroundColor#ffffffff
gitlens.decorations.branchAheadForegroundColor#f0f0f0ff
gitlens.decorations.branchBehindForegroundColor#f0f0f0ff
gitlens.decorations.branchDivergedForegroundColor#f0f0f0ff
gitlens.decorations.branchMissingUpstreamForegroundColor#f0f0f0ff
gitlens.decorations.branchUnpublishedForegroundColor#f0f0f0ff
gitlens.decorations.branchUpToDateForegroundColor#f0f0f0ff
gitlens.decorations.copiedForegroundColor#f0f0f0ff
gitlens.decorations.deletedForegroundColor#ffffffff
gitlens.decorations.ignoredForegroundColor#f0f0f0ff
gitlens.decorations.modifiedForegroundColor#ffffffff
gitlens.decorations.renamedForegroundColor#f0f0f0ff
gitlens.decorations.untrackedForegroundColor#f0f0f0ff
gitlens.gutterBackgroundColor#401020ff
gitlens.gutterForegroundColor#f0f0f0ff
gitlens.gutterUncommittedForegroundColor#f0f0f0ff
gitlens.lineHighlightBackgroundColor#6a1b35ff
gitlens.lineHighlightOverviewRulerColor#6a1b35ff
gitlens.mergedPullRequestIconColor#6a1b35ff
gitlens.openPullRequestIconColor#6a1b35ff
gitlens.trailingLineBackgroundColor#401020ff
gitlens.trailingLineForegroundColor#f0f0f0ff
gitlens.unpublishedCommitIconColor#6a1b35ff
gitlens.unpulledChangesIconColor#6a1b35ff
gitlens.unpushlishedChangesIconColor#6a1b35ff
icon.foreground#ffffffff
inlineTitleBar.background#401020ff
input.background#401020ff
input.border#6a1b35ff
input.foreground#f0f0f0ff
input.placeholderForeground#f0f0f0ff
inputOption.activeBackground#6a1b35ff
inputOption.activeBorder#781e3cff
inputOption.activeForeground#ffffffff
inputValidation.errorBackground#401020ff
inputValidation.errorBorder#6a1b35ff
inputValidation.errorForeground#f0f0f0ff
inputValidation.infoBackground#401020ff
inputValidation.infoBorder#6a1b35ff
inputValidation.infoForeground#f0f0f0ff
inputValidation.warningBackground#401020ff
inputValidation.warningBorder#6a1b35ff
inputValidation.warningForeground#f0f0f0ff
interactive.activeCodeBorder#781e3cff
interactive.inactiveCodeBorder#621831ff
issues.closed#401020ff
issues.newIssueDecoration#401020ff
issues.open#401020ff
keybindingLabel.background#401020ff
keybindingLabel.border#6a1b35ff
keybindingLabel.bottomBorder#6a1b35ff
keybindingLabel.foreground#f0f0f0ff
lintlens.annotationColor#401020ff
list.activeSelectionBackground#783250ff
list.activeSelectionForeground#ffffffff
list.activeSelectionIconForeground#ffffffff
list.deemphasizedForeground#f8f8f8ff
list.dropBackground#401b2bff
list.errorForeground#f8f8f8ff
list.filterMatchBackground#401b2bff
list.filterMatchBorder#6a2c47ff
list.focusBackground#6a2c47ff
list.focusForeground#ffffffff
list.focusHighlightForeground#ffffffff
list.focusOutline#783250ff
list.highlightForeground#ffffffff
list.hoverBackground#6a2c47ff
list.hoverForeground#ffffffff
list.inactiveFocusBackground#6a2c47ff
list.inactiveFocusOutline#783250ff
list.inactiveSelectionBackground#6a2c47ff
list.inactiveSelectionForeground#ffffffff
list.inactiveSelectionIconForeground#ffffffff
list.invalidItemForeground#f8f8f8ff
list.warningForeground#f8f8f8ff
listFilterWidget.background#6a2c47ff
listFilterWidget.noMatchesOutline#783250ff
listFilterWidget.outline#783250ff
menu.background#401020ff
menu.border#6a1b35ff
menu.foreground#f0f0f0ff
menu.selectionBackground#6a1b35ff
menu.selectionBorder#781e3cff
menu.selectionForeground#ffffffff
menu.separatorBackground#401020ff
menubar.selectionBackground#6a1b35ff
menubar.selectionBorder#781e3cff
menubar.selectionForeground#ffffffff
merge.border#6a1b35ff
merge.commonContentBackground#401020ff
merge.commonHeaderBackground#401020ff
merge.currentContentBackground#401020ff
merge.currentHeaderBackground#401020ff
merge.incomingContentBackground#401020ff
merge.incomingHeaderBackground#401020ff
minimap.background#400010ff
minimap.errorHighlight#6a001bff
minimap.findMatchHighlight#6a001bff
minimap.selectionHighlight#78001eff
minimap.warningHighlight#6a001bff
minimapGutter.addedBackground#6a001bff
minimapGutter.deletedBackground#6a001bff
minimapGutter.modifiedBackground#6a001bff
minimapSlider.activeBackground#78001e99
minimapSlider.background#6a001b99
minimapSlider.hoverBackground#78001e99
notebook.cellBorderColor#6a1b35ff
notebook.cellEditorBackground#401020ff
notebook.cellHoverBackground#6a1b35ff
notebook.cellInsertionIndicator#401020ff
notebook.cellStatusBarItemHoverBackground#6a1b35ff
notebook.cellToolbarSeparator#401020ff
notebook.focusedCellBackground#6a1b35ff
notebook.focusedCellBorder#781e3cff
notebook.focusedEditorBorder#781e3cff
notebook.inactiveFocusedCellBorder#6a1b35ff
notebook.inactiveSelectedCellBorder#6a1b35ff
notebook.outputContainerBackgroundColor#401020ff
notebook.selectedCellBackground#6a1b35ff
notebook.selectedCellBorder#781e3cff
notebook.symbolHighlightBackground#781e3cff
notebookScrollbarSlider.activeBackground#781e3c99
notebookScrollbarSlider.background#6a1b3599
notebookScrollbarSlider.hoverBackground#781e3c99
notebookStatusErrorIcon.foreground#ffffffff
notebookStatusRunningIcon.foreground#ffffffff
notebookStatusSuccessIcon.foreground#ffffffff
notificationCenter.border#6a1b35ff
notificationCenterHeader.background#401020ff
notificationCenterHeader.foreground#f0f0f0ff
notificationLink.foreground#f0f0f0ff
notifications.background#401020ff
notifications.border#6a1b35ff
notifications.foreground#f0f0f0ff
notificationsErrorIcon.foreground#ffffffff
notificationsInfoIcon.foreground#ffffffff
notificationsWarningIcon.foreground#ffffffff
notificationToast.border#6a1b35ff
panel.background#401525ff
panel.border#6a233eff
panel.dropBorder#6a233eff
panelInput.border#6a233eff
panelSection.border#6a233eff
panelSection.dropBackground#401525ff
panelSectionHeader.background#401525ff
panelSectionHeader.border#6a233eff
panelSectionHeader.foreground#f4f4f4ff
panelTitle.activeBorder#782846ff
panelTitle.activeForeground#ffffffff
panelTitle.inactiveForeground#e2e2e2ff
peekView.border#781e3cff
peekViewEditor.background#6a1b35ff
peekViewEditor.matchHighlightBackground#781e3cff
peekViewEditor.matchHighlightBorder#7d1f3fff
peekViewEditorGutter.background#6a1b35ff
peekViewResult.background#6a1b35ff
peekViewResult.fileForeground#ffffffff
peekViewResult.lineForeground#ffffffff
peekViewResult.matchHighlightBackground#781e3cff
peekViewResult.selectionBackground#781e3cff
peekViewResult.selectionForeground#ffffffff
peekViewTitle.background#6a1b35ff
peekViewTitleDescription.foreground#ffffffff
peekViewTitleLabel.foreground#ffffffff
pickerGroup.border#781e3cff
pickerGroup.foreground#ffffffff
ports.iconRunningProcessForeground#ffffffff
problemsErrorIcon.foreground#ffffffff
problemsInfoIcon.foreground#ffffffff
problemsWarningIcon.foreground#ffffffff
progressBar.background#401020ff
quickInput.background#401020ff
quickInput.foreground#f0f0f0ff
quickInputList.focusBackground#6a2c47ff
quickInputList.focusForeground#ffffffff
quickInputList.focusIconForeground#ffffffff
quickInputTitle.background#401020ff
sash.hoverBorder#781e3cff
scm.providerBorder#6a1b35ff
scrollbar.shadow#6a1b35ff
scrollbarSlider.activeBackground#781e3c99
scrollbarSlider.background#6a1b3599
scrollbarSlider.hoverBackground#781e3c99
searchEditor.findMatchBackground#401020ff
searchEditor.findMatchBorder#6a1b35ff
searchEditor.textInputBorder#6a1b35ff
selection.background#6a1b35ff
settings.checkboxBackground#6a1b35ff
settings.checkboxBorder#781e3cff
settings.checkboxForeground#ffffffff
settings.dropdownBackground#401020ff
settings.dropdownBorder#6a1b35ff
settings.dropdownForeground#f0f0f0ff
settings.dropdownListBorder#6a2c47ff
settings.focusedRowBackground#6a1b35ff
settings.focusedRowBorder#781e3cff
settings.headerForeground#f0f0f0ff
settings.modifiedItemIndicator#6a1b35ff
settings.numberInputBackground#401020ff
settings.numberInputBorder#6a1b35ff
settings.numberInputForeground#f0f0f0ff
settings.rowHoverBackground#6a1b35ff
settings.textInputBackground#401020ff
settings.textInputBorder#6a1b35ff
settings.textInputForeground#f0f0f0ff
sideBar.background#401b2bff
sideBar.border#6a2c47ff
sideBar.dropBackground#401b2bff
sideBar.foreground#f8f8f8ff
sideBarSectionHeader.background#401b2bff
sideBarSectionHeader.border#6a2c47ff
sideBarSectionHeader.foreground#f8f8f8ff
sideBarTitle.foreground#f8f8f8ff
statusBar.background#401020ff
statusBar.border#6a1b35ff
statusBar.debuggingBackground#401020ff
statusBar.debuggingBorder#6a1b35ff
statusBar.debuggingForeground#f0f0f0ff
statusBar.foreground#f0f0f0ff
statusBar.noFolderBackground#401020ff
statusBar.noFolderBorder#6a1b35ff
statusBar.noFolderForeground#f0f0f0ff
statusBarItem.activeBackground#6a1b35ff
statusBarItem.errorBackground#401020ff
statusBarItem.errorForeground#f0f0f0ff
statusBarItem.hoverBackground#6a1b35ff
statusBarItem.prominentBackground#401020ff
statusBarItem.prominentForeground#f0f0f0ff
statusBarItem.prominentHoverBackground#6a1b35ff
statusBarItem.remoteBackground#401020ff
statusBarItem.remoteForeground#f0f0f0ff
statusBarItem.warningBackground#401020ff
statusBarItem.warningForeground#f0f0f0ff
symbolIcon.arrayForeground#ffffffff
symbolIcon.booleanForeground#ffffffff
symbolIcon.classForeground#ffffffff
symbolIcon.colorForeground#ffffffff
symbolIcon.constantForeground#ffffffff
symbolIcon.constructorForeground#ffffffff
symbolIcon.enumeratorForeground#ffffffff
symbolIcon.enumeratorMemberForeground#ffffffff
symbolIcon.eventForeground#ffffffff
symbolIcon.fieldForeground#ffffffff
symbolIcon.fileForeground#ffffffff
symbolIcon.folderForeground#ffffffff
symbolIcon.functionForeground#ffffffff
symbolIcon.interfaceForeground#ffffffff
symbolIcon.keyForeground#ffffffff
symbolIcon.keywordForeground#ffffffff
symbolIcon.methodForeground#ffffffff
symbolIcon.moduleForeground#ffffffff
symbolIcon.namespaceForeground#ffffffff
symbolIcon.nullForeground#ffffffff
symbolIcon.numberForeground#ffffffff
symbolIcon.objectForeground#ffffffff
symbolIcon.operatorForeground#ffffffff
symbolIcon.packageForeground#ffffffff
symbolIcon.propertyForeground#ffffffff
symbolIcon.referenceForeground#ffffffff
symbolIcon.snippetForeground#ffffffff
symbolIcon.stringForeground#ffffffff
symbolIcon.structForeground#ffffffff
symbolIcon.textForeground#ffffffff
symbolIcon.typeParameterForeground#ffffffff
symbolIcon.unitForeground#ffffffff
symbolIcon.variableForeground#ffffffff
tab.activeBackground#6a122cff
tab.activeBorder#781432ff
tab.activeBorderTop#781432ff
tab.activeForeground#ffffffff
tab.activeModifiedBorder#7d1534ff
tab.border#6a122cff
tab.hoverBackground#6a122cff
tab.hoverBorder#781432ff
tab.hoverForeground#ffffffff
tab.inactiveBackground#400b1bff
tab.inactiveForeground#edededff
tab.inactiveModifiedBorder#6a122cff
tab.lastPinnedBorder#6a122cff
tab.unfocusedActiveBackground#6a122cff
tab.unfocusedActiveBorder#781432ff
tab.unfocusedActiveBorderTop#781432ff
tab.unfocusedActiveForeground#ffffffff
tab.unfocusedActiveModifiedBorder#7d1534ff
tab.unfocusedHoverBackground#6a122cff
tab.unfocusedHoverBorder#781432ff
tab.unfocusedHoverForeground#ffffffff
tab.unfocusedInactiveBackground#260610ff
tab.unfocusedInactiveForeground#dfdfdfff
tab.unfocusedInactiveModifiedBorder#6a122cff
testing.iconErrored#6a1b35ff
testing.iconFailed#6a1b35ff
testing.iconPassed#6a1b35ff
testing.iconQueued#6a1b35ff
testing.iconSkipped#6a1b35ff
testing.iconUnset#6a1b35ff
testing.message.error.decorationForeground#f0f0f0ff
testing.message.error.lineBackground#401020ff
testing.message.info.decorationForeground#f0f0f0ff
testing.message.info.lineBackground#401020ff
testing.peekBorder#6a1b35ff
testing.peekHeaderBackground#401020ff
testing.runAction#401020ff
textBlockQuote.background#401020ff
textBlockQuote.border#6a1b35ff
textCodeBlock.background#401020ff
textLink.activeForeground#ffffffff
textLink.foreground#f0f0f0ff
textPreformat.foreground#f0f0f0ff
textSeparator.foreground#f0f0f0ff
titleBar.activeBackground#6a1b35ff
titleBar.activeForeground#ffffffff
titleBar.border#6a1b35ff
titleBar.inactiveBackground#260a13ff
titleBar.inactiveForeground#e0e0e0ff
toolbar.activeBackground#6a1b35ff
toolbar.hoverBackground#6a1b35ff
toolbar.hoverOutline#781e3cff
tree.indentGuidesStroke#783250ff
tree.tableColumnsBorder#6a2c47ff
walkThrough.embeddedEditorBackground#401020ff
welcomePage.background#401020ff
welcomePage.buttonBackground#6a1b35ff
welcomePage.buttonHoverBackground#781e3cff
welcomePage.progress.background#401020ff
welcomePage.progress.foreground#f0f0f0ff
welcomePage.tileBackground#401020ff
welcomePage.tileHoverBackground#6a1b35ff
welcomePage.tileShadow.#6a1b35ff
widget.shadow#781e3cff
window.activeBorder#781e3cff
window.inactiveBorder#621831ff
workspace.hiddenColor#40102099

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
meta.tag.jsx support.class.component.open.jsx	#ffffffff	bold
meta.tag.jsx support.class.component.close.jsx	#ffffffff	bold
meta.tag.jsx entity.other.attribute-name.jsx	#fbfbfbff	italic
variable.other.constant , variable.other.dollar , variable.other.readwrite	#ffffffff	bold
entity	#ffffffff	bold
support	#ffffffff	bold
variable	#ffffffff	bold
keyword.operator	#f7f7f7ff
constant	#ecececff
string	#ecececff
keyword	#ff0040ff
meta	#ff0040ff
punctuation	#ff0040ff
storage	#ff0040ff
comment	#800020ff
source	#600018ff

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