Skip to main content
Lucid Labs | Coding Theme
Home Theme VS Code Lucid Labs A professional dark theme for Visual Studio Code based on Lucid Labs brand guidelines. Features dark purple backgrounds, teal accents, and cloud-inspired aesthetics perfect for Azure development, PowerShell scripting, and enterprise coding.
VS Code preview Full workbench mockup using this variant's colors and tokenColors.
colors Workbench UI color keys from the theme JSON colors map.
actionBar.toggledBackground #33999940 activityBar.activeBackground #271D3B50 activityBar.activeBorder #339999 activityBar.activeFocusBorder #339999 activityBar.background #1A0F24 activityBar.border #1A0F24 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #CCCCCC80 italic variable, string constant.other.placeholder #E8E0F0 — constant.other.color #339999 — invalid, invalid.illegal #D96560 — keyword, storage.type, storage.modifier
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}!`;
}
Lucid Labs — Lucid Labs Dark main*
0 1
Copilot
Ln 5, Col 12
Spaces: 2
UTF-8
LF
TypeScript
Dark+
activityBar.dropBorder #339999
activityBar.foreground #E8E0F0
activityBar.inactiveForeground #CCCCCC80
activityBarBadge.background #339999
activityBarBadge.foreground #E8E0F0
activityBarTop.activeBackground #271D3B50
activityBarTop.activeBorder #339999
activityBarTop.background #1A0F24
activityBarTop.dropBorder #339999
activityBarTop.foreground #E8E0F0
activityBarTop.inactiveForeground #CCCCCC80
activityErrorBadge.background #D96560
activityErrorBadge.foreground #E8E0F0
activityWarningBadge.background #F0F0E1
activityWarningBadge.foreground #E8E0F0
agentSessionReadIndicator.foreground #339999
agentSessionSelectedBadge.border #33999950
agentSessionSelectedUnfocusedBadge.border #E8E0F050
agentStatusIndicator.background #2E2342
aiCustomizationManagement.sashBorder #339999
badge.background #339999
badge.foreground #E8E0F0
banner.background #339999
banner.foreground #E8E0F0
banner.iconForeground #E8E0F0
breadcrumb.activeSelectionForeground #339999
breadcrumb.background #271D3B
breadcrumb.focusForeground #E8E0F0
breadcrumb.foreground #CCCCCC
breadcrumbPicker.background #1E1628
button.background #339999
button.border #33999900
button.foreground #E8E0F0
button.hoverBackground #2B8080
button.secondaryBackground #2E2342
button.secondaryBorder #33999950
button.secondaryForeground #E8E0F0
button.secondaryHoverBackground #332848
button.separator #E8E0F040
charts.blue #339999
charts.foreground #E8E0F0
charts.green #5BBF7A
charts.lines #CCCCCC80
charts.orange #F0F0E1
charts.purple #9B7ED9
charts.red #D96560
charts.yellow #F0F0E1
chat.avatarBackground #339999
chat.avatarForeground #E8E0F0
chat.checkpointSeparator #33999950
chat.editedFileForeground #9B7ED9
chat.inputWorkingBorderColor1 #339999
chat.inputWorkingBorderColor2 #2B8080
chat.inputWorkingBorderColor3 #339999
chat.linesAddedForeground #339999CC
chat.linesRemovedForeground #D96560CC
chat.requestBackground #2E2342
chat.requestBorder #33999950
chat.requestBubbleBackground #2E2342E6
chat.requestBubbleHoverBackground #332848E6
chat.requestCodeBorder #33999930
chat.slashCommandBackground #339999
chat.slashCommandForeground #E8E0F0
chat.thinkingShimmer #33999940
chatManagement.sashBorder #339999
checkbox.background #3D2F54
checkbox.border #33999950
checkbox.disabled.background #3D2F5480
checkbox.disabled.foreground #CCCCCC60
checkbox.foreground #339999
checkbox.selectBackground #3D2F54
checkbox.selectBorder #339999
commandCenter.activeBackground #E8E0F025
commandCenter.activeBorder #E8E0F050
commandCenter.activeForeground #E8E0F0
commandCenter.background #E8E0F015
commandCenter.border #E8E0F030
commandCenter.debuggingBackground #33999930
commandCenter.foreground #E8E0F0
commandCenter.inactiveBorder #E8E0F020
commandCenter.inactiveForeground #CCCCCC80
commentsView.resolvedIcon #5BBF7A
commentsView.unresolvedIcon #F0F0E1
contrastActiveBorder #33999900
contrastBorder #33999900
debugConsole.errorForeground #D96560
debugConsole.infoForeground #339999
debugConsole.sourceForeground #CCCCCC
debugConsole.warningForeground #F0F0E1
debugConsoleInputIcon.foreground #339999
debugExceptionWidget.background #D9656020
debugExceptionWidget.border #D9656080
debugIcon.breakpointCurrentStackframeForeground #F0F0E1
debugIcon.breakpointDisabledForeground #CCCCCC80
debugIcon.breakpointForeground #D96560
debugIcon.breakpointStackframeForeground #5BBF7A
debugIcon.breakpointUnverifiedForeground #F0F0E1
debugIcon.continueForeground #5BBF7A
debugIcon.disconnectForeground #D96560
debugIcon.pauseForeground #F0F0E1
debugIcon.restartForeground #5BBF7A
debugIcon.startForeground #5BBF7A
debugIcon.stepBackForeground #339999
debugIcon.stepIntoForeground #339999
debugIcon.stepOutForeground #339999
debugIcon.stepOverForeground #339999
debugIcon.stopForeground #D96560
debugTokenExpression.boolean #F0F0E1
debugTokenExpression.error #D96560
debugTokenExpression.name #9B7ED9
debugTokenExpression.number #F0F0E1
debugTokenExpression.string #C3D7CD
debugTokenExpression.type #9B7ED9
debugTokenExpression.value #C3D7CD
debugToolBar.background #1E1628
debugView.exceptionLabelBackground #D9656080
debugView.exceptionLabelForeground #E8E0F0
debugView.stateLabelBackground #33999950
debugView.stateLabelForeground #E8E0F0
debugView.valueChangedHighlight #33999980
descriptionForeground #CCCCCC
diffEditor.border #33999920
diffEditor.diagonalFill #33999920
diffEditor.insertedLineBackground #33999915
diffEditor.insertedTextBackground #33999920
diffEditor.insertedTextBorder #33999950
diffEditor.move.border #33999980
diffEditor.moveActive.border #339999
diffEditor.removedLineBackground #D9656015
diffEditor.removedTextBackground #D9656020
diffEditor.removedTextBorder #D9656050
diffEditor.unchangedCodeBackground #271D3B80
diffEditor.unchangedRegionBackground #1E1628
diffEditor.unchangedRegionForeground #CCCCCC80
diffEditor.unchangedRegionShadow #10182030
diffEditorGutter.insertedLineBackground #33999930
diffEditorGutter.removedLineBackground #D9656030
diffEditorOverview.insertedForeground #33999980
diffEditorOverview.removedForeground #D9656080
disabledForeground #CCCCCC60
dropdown.background #3D2F54
dropdown.border #33999950
dropdown.foreground #E8E0F0
dropdown.listBackground #1E1628
editor.background #271D3B
editor.compositionBorder #339999
editor.findMatchBackground #33999980
editor.findMatchBorder #339999
editor.findMatchForeground #E8E0F0
editor.findMatchHighlightBackground #33999950
editor.findMatchHighlightBorder #33999980
editor.findMatchHighlightForeground #E8E0F0
editor.findRangeHighlightBackground #33999920
editor.findRangeHighlightBorder #33999900
editor.focusedStackFrameHighlightBackground #5BBF7A30
editor.foldBackground #33999915
editor.foldPlaceholderForeground #CCCCCC80
editor.foreground #E8E0F0
editor.hoverHighlightBackground #33999925
editor.inactiveLineHighlightBackground #3D2F5480
editor.inactiveSelectionBackground #33999930
editor.inlineValuesBackground #33999915
editor.inlineValuesForeground #CCCCCCCC
editor.lineHighlightBackground #3D2F54
editor.lineHighlightBorder #33999915
editor.linkedEditingBackground #33999930
editor.placeholder.foreground #CCCCCC80
editor.rangeHighlightBackground #33999915
editor.rangeHighlightBorder #33999900
editor.selectionBackground #33999950
editor.selectionForeground #E8E0F0
editor.selectionHighlightBackground #33999930
editor.selectionHighlightBorder #33999950
editor.stackFrameHighlightBackground #F0F0E130
editor.symbolHighlightBackground #33999930
editor.symbolHighlightBorder #33999950
editor.wordHighlightBackground #33999930
editor.wordHighlightBorder #33999950
editor.wordHighlightStrongBackground #33999950
editor.wordHighlightStrongBorder #33999980
editor.wordHighlightTextBackground #33999920
editor.wordHighlightTextBorder #33999940
editorActionList.background #1E1628
editorActionList.focusBackground #33999940
editorActionList.focusForeground #E8E0F0
editorActionList.foreground #E8E0F0
editorBracketHighlight.foreground1 #339999
editorBracketHighlight.foreground2 #9B7ED9
editorBracketHighlight.foreground3 #E8C84D
editorBracketHighlight.foreground4 #5BBF7A
editorBracketHighlight.foreground5 #DA70D6
editorBracketHighlight.foreground6 #C3D7CD
editorBracketHighlight.unexpectedBracket.foreground #D96560
editorBracketMatch.border #33999980
editorBracketMatch.foreground #339999
editorBracketPairGuide.activeBackground1 #33999980
editorBracketPairGuide.activeBackground2 #9B7ED980
editorBracketPairGuide.activeBackground3 #E8C84D80
editorBracketPairGuide.activeBackground4 #5BBF7A80
editorBracketPairGuide.activeBackground5 #DA70D680
editorBracketPairGuide.activeBackground6 #C3D7CD80
editorBracketPairGuide.background1 #33999940
editorBracketPairGuide.background2 #9B7ED940
editorBracketPairGuide.background3 #E8C84D40
editorBracketPairGuide.background4 #5BBF7A40
editorBracketPairGuide.background5 #DA70D640
editorBracketPairGuide.background6 #C3D7CD40
editorCodeLens.foreground #CCCCCC80
editorCommentsWidget.rangeActiveBackground #33999920
editorCommentsWidget.rangeBackground #33999910
editorCommentsWidget.replyInputBackground #3D2F54
editorCommentsWidget.resolvedBorder #5BBF7A50
editorCommentsWidget.unresolvedBorder #F0F0E1
editorCursor.background #271D3B
editorCursor.foreground #339999
editorError.background #D9656015
editorError.border #D9656000
editorError.foreground #D96560
editorGhostText.background #33999900
editorGhostText.border #33999900
editorGhostText.foreground #33999980
editorGroup.border #33999920
editorGroup.dropBackground #33999930
editorGroup.dropIntoPromptBackground #1E1628
editorGroup.dropIntoPromptBorder #33999950
editorGroup.dropIntoPromptForeground #E8E0F0
editorGroup.emptyBackground #271D3B
editorGroup.focusedEmptyBorder #33999950
editorGroupHeader.border #33999920
editorGroupHeader.noTabsBackground #271D3B
editorGroupHeader.tabsBackground #1E1628
editorGroupHeader.tabsBorder #33999920
editorGutter.addedBackground #339999
editorGutter.addedSecondaryBackground #33999980
editorGutter.background #271D3B
editorGutter.commentDraftGlyphForeground #33999980
editorGutter.commentGlyphForeground #339999
editorGutter.commentRangeForeground #CCCCCC50
editorGutter.commentUnresolvedGlyphForeground #F0F0E1
editorGutter.deletedBackground #D96560
editorGutter.deletedSecondaryBackground #D9656080
editorGutter.foldingControlForeground #CCCCCC80
editorGutter.itemBackground #1E1628
editorGutter.itemGlyphForeground #339999
editorGutter.modifiedBackground #9B7ED9
editorGutter.modifiedSecondaryBackground #9B7ED980
editorHint.border #5BBF7A00
editorHint.foreground #5BBF7A
editorHoverWidget.background #1E1628
editorHoverWidget.border #33999950
editorHoverWidget.foreground #E8E0F0
editorHoverWidget.highlightForeground #339999
editorHoverWidget.statusBarBackground #2E2342
editorIndentGuide.activeBackground1 #339999
editorIndentGuide.activeBackground2 #9B7ED9
editorIndentGuide.activeBackground3 #E8C84D
editorIndentGuide.activeBackground4 #5BBF7A
editorIndentGuide.activeBackground5 #DA70D6
editorIndentGuide.activeBackground6 #C3D7CD
editorIndentGuide.background1 #33999925
editorIndentGuide.background2 #9B7ED925
editorIndentGuide.background3 #E8C84D25
editorIndentGuide.background4 #5BBF7A25
editorIndentGuide.background5 #DA70D625
editorIndentGuide.background6 #C3D7CD25
editorInfo.background #33999915
editorInfo.border #33999900
editorInfo.foreground #339999
editorInlayHint.background #3D2F54
editorInlayHint.foreground #CCCCCC
editorInlayHint.parameterBackground #3D2F54
editorInlayHint.parameterForeground #CCCCCC
editorInlayHint.typeBackground #3D2F54
editorInlayHint.typeForeground #C3D7CD
editorLightBulb.foreground #F0F0E1
editorLightBulbAi.foreground #339999
editorLightBulbAutoFix.foreground #5BBF7A
editorLineNumber.activeForeground #339999
editorLineNumber.dimmedForeground #CCCCCC50
editorLineNumber.foreground #9B7ED9
editorLink.activeForeground #339999
editorMarkerNavigation.background #1E1628
editorMarkerNavigationError.background #D9656030
editorMarkerNavigationError.headerBackground #D9656020
editorMarkerNavigationInfo.background #33999930
editorMarkerNavigationInfo.headerBackground #33999920
editorMarkerNavigationWarning.background #F0F0E130
editorMarkerNavigationWarning.headerBackground #F0F0E120
editorMinimap.inlineChatInserted #33999940
editorMinimap.inlineChatRemoved #D9656040
editorMultiCursor.primary.background #271D3B
editorMultiCursor.primary.foreground #339999
editorMultiCursor.secondary.background #271D3B
editorMultiCursor.secondary.foreground #9B7ED9
editorOverviewRuler.addedForeground #339999
editorOverviewRuler.background #271D3B
editorOverviewRuler.border #33999920
editorOverviewRuler.bracketMatchForeground #33999980
editorOverviewRuler.commentDraftForeground #33999960
editorOverviewRuler.commentForeground #33999940
editorOverviewRuler.commentUnresolvedForeground #F0F0E180
editorOverviewRuler.commonContentForeground #CCCCCC50
editorOverviewRuler.currentContentForeground #33999980
editorOverviewRuler.deletedForeground #D96560
editorOverviewRuler.errorForeground #D96560
editorOverviewRuler.findMatchForeground #339999CC
editorOverviewRuler.incomingContentForeground #9B7ED980
editorOverviewRuler.infoForeground #339999
editorOverviewRuler.inlineChatInserted #33999980
editorOverviewRuler.inlineChatRemoved #D9656080
editorOverviewRuler.modifiedForeground #9B7ED9
editorOverviewRuler.rangeHighlightForeground #33999999
editorOverviewRuler.selectionHighlightForeground #33999999
editorOverviewRuler.warningForeground #F0F0E1
editorOverviewRuler.wordHighlightForeground #33999999
editorOverviewRuler.wordHighlightStrongForeground #339999CC
editorOverviewRuler.wordHighlightTextForeground #33999980
editorPane.background #271D3B
editorRuler.foreground #9B7ED930
editorSnippetFinalTabstopHighlightBackground #5BBF7A30
editorSnippetFinalTabstopHighlightBorder #5BBF7A00
editorSnippetTabstopHighlightBackground #33999930
editorSnippetTabstopHighlightBorder #33999900
editorStickyScroll.background #1E1628
editorStickyScroll.border #33999920
editorStickyScroll.shadow #10182030
editorStickyScrollGutter.background #1E1628
editorStickyScrollHover.background #332848
editorSuggestWidget.background #1E1628
editorSuggestWidget.border #33999950
editorSuggestWidget.focusHighlightForeground #339999
editorSuggestWidget.foreground #E8E0F0
editorSuggestWidget.highlightForeground #339999
editorSuggestWidget.selectedBackground #33999950
editorSuggestWidget.selectedForeground #E8E0F0
editorSuggestWidget.selectedIconForeground #E8E0F0
editorSuggestWidgetStatus.foreground #CCCCCC80
editorUnicodeHighlight.background #F0F0E120
editorUnicodeHighlight.border #F0F0E1
editorUnnecessaryCode.border #CCCCCC50
editorUnnecessaryCode.opacity #000000AA
editorWarning.background #F0F0E115
editorWarning.border #F0F0E100
editorWarning.foreground #F0F0E1
editorWhitespace.foreground #9B7ED950
editorWidget.background #1E1628
editorWidget.border #33999950
editorWidget.foreground #E8E0F0
editorWidget.resizeBorder #339999
errorForeground #D96560
extensionBadge.remoteBackground #339999
extensionBadge.remoteForeground #E8E0F0
extensionButton.background #339999
extensionButton.border #33999900
extensionButton.foreground #E8E0F0
extensionButton.hoverBackground #2B8080
extensionButton.prominentBackground #339999
extensionButton.prominentForeground #E8E0F0
extensionButton.prominentHoverBackground #2B8080
extensionButton.separator #E8E0F040
extensionIcon.preReleaseForeground #339999
extensionIcon.privateForeground #CCCCCC80
extensionIcon.sponsorForeground #9B7ED9
extensionIcon.starForeground #F0F0E1
extensionIcon.verifiedForeground #5BBF7A
focusBorder #339999
foreground #E8E0F0
gauge.background #1E1628
gauge.border #33999930
gauge.errorBackground #D9656030
gauge.errorForeground #D96560
gauge.foreground #E8E0F0
gauge.warningBackground #F0F0E130
gauge.warningForeground #F0F0E1
git.blame.editorDecorationForeground #CCCCCC60
gitDecoration.addedResourceForeground #339999
gitDecoration.conflictingResourceForeground #F0F0E1
gitDecoration.deletedResourceForeground #D96560
gitDecoration.ignoredResourceForeground #CCCCCC80
gitDecoration.modifiedResourceForeground #9B7ED9
gitDecoration.renamedResourceForeground #339999
gitDecoration.stageDeletedResourceForeground #D96560CC
gitDecoration.stageModifiedResourceForeground #9B7ED9CC
gitDecoration.submoduleResourceForeground #C3D7CD
gitDecoration.untrackedResourceForeground #339999
icon.foreground #339999
inlineChat.background #1E1628
inlineChat.border #33999950
inlineChat.foreground #E8E0F0
inlineChat.shadow #10182080
inlineChatDiff.inserted #33999930
inlineChatDiff.removed #D9656030
inlineChatInput.background #3D2F54
inlineChatInput.border #33999950
inlineChatInput.focusBorder #339999
inlineChatInput.placeholderForeground #CCCCCC80
inlineEdit.gutterIndicator.background #1E1628
inlineEdit.gutterIndicator.primaryBackground #33999920
inlineEdit.gutterIndicator.primaryBorder #339999
inlineEdit.gutterIndicator.primaryForeground #339999
inlineEdit.gutterIndicator.secondaryBackground #9B7ED920
inlineEdit.gutterIndicator.secondaryBorder #9B7ED9
inlineEdit.gutterIndicator.secondaryForeground #9B7ED9
inlineEdit.gutterIndicator.successfulBackground #5BBF7A20
inlineEdit.gutterIndicator.successfulBorder #5BBF7A
inlineEdit.gutterIndicator.successfulForeground #5BBF7A
inlineEdit.modifiedBackground #9B7ED915
inlineEdit.modifiedBorder #9B7ED950
inlineEdit.modifiedChangedLineBackground #9B7ED920
inlineEdit.modifiedChangedTextBackground #9B7ED930
inlineEdit.originalBackground #D9656010
inlineEdit.originalBorder #D9656030
inlineEdit.originalChangedLineBackground #D9656015
inlineEdit.originalChangedTextBackground #D9656025
inlineEdit.tabWillAcceptModifiedBorder #5BBF7A80
inlineEdit.tabWillAcceptOriginalBorder #D9656050
input.background #3D2F54
input.border #33999950
input.foreground #E8E0F0
input.placeholderForeground #CCCCCC80
inputOption.activeBackground #33999940
inputOption.activeBorder #339999
inputOption.activeForeground #E8E0F0
inputOption.hoverBackground #33999920
inputValidation.errorBackground #D9656020
inputValidation.errorBorder #D96560
inputValidation.errorForeground #D96560
inputValidation.infoBackground #33999920
inputValidation.infoBorder #339999
inputValidation.infoForeground #339999
inputValidation.warningBackground #F0F0E120
inputValidation.warningBorder #F0F0E1
inputValidation.warningForeground #F0F0E1
interactive.activeCodeBorder #339999
interactive.inactiveCodeBorder #33999930
keybindingLabel.background #33999920
keybindingLabel.border #33999940
keybindingLabel.bottomBorder #33999960
keybindingLabel.foreground #E8E0F0
keybindingTable.headerBackground #2E2342
keybindingTable.rowsBackground #271D3B80
list.activeSelectionBackground #33999950
list.activeSelectionForeground #E8E0F0
list.activeSelectionIconForeground #E8E0F0
list.deemphasizedForeground #CCCCCC80
list.dropBackground #33999930
list.dropBetweenBackground #339999
list.errorForeground #D96560
list.filterMatchBorder #33999980
list.focusAndSelectionOutline #339999
list.focusBackground #33999940
list.focusForeground #E8E0F0
list.focusHighlightForeground #339999
list.focusOutline #33999980
list.highlightForeground #339999
list.hoverBackground #33999920
list.hoverForeground #E8E0F0
list.inactiveFocusBackground #33999920
list.inactiveFocusOutline #33999950
list.inactiveSelectionBackground #33999930
list.inactiveSelectionForeground #E8E0F0
list.inactiveSelectionIconForeground #E8E0F0
list.invalidItemForeground #D96560
list.warningForeground #F0F0E1
listFilterWidget.background #3D2F54
listFilterWidget.noMatchesOutline #D96560
listFilterWidget.outline #339999
listFilterWidget.shadow #10182050
markdownAlert.caution.foreground #D96560
markdownAlert.important.foreground #9B7ED9
markdownAlert.note.foreground #339999
markdownAlert.tip.foreground #5BBF7A
markdownAlert.warning.foreground #F0F0E1
mcpIcon.starForeground #F0F0E1
menu.background #1E1628
menu.border #33999920
menu.foreground #E8E0F0
menu.selectionBackground #33999950
menu.selectionBorder #33999900
menu.selectionForeground #E8E0F0
menu.separatorBackground #33999930
menubar.selectionBackground #33999950
menubar.selectionBorder #33999900
menubar.selectionForeground #E8E0F0
merge.border #33999950
merge.commonContentBackground #CCCCCC20
merge.commonHeaderBackground #CCCCCC50
merge.currentContentBackground #33999920
merge.currentHeaderBackground #33999950
merge.incomingContentBackground #9B7ED920
merge.incomingHeaderBackground #9B7ED950
mergeEditor.change.background #33999920
mergeEditor.change.word.background #33999940
mergeEditor.changeBase.background #CCCCCC15
mergeEditor.changeBase.word.background #CCCCCC30
mergeEditor.conflict.handled.minimapOverViewRuler #5BBF7A
mergeEditor.conflict.handledFocused.border #5BBF7A
mergeEditor.conflict.handledUnfocused.border #5BBF7A50
mergeEditor.conflict.input1.background #33999920
mergeEditor.conflict.input2.background #9B7ED920
mergeEditor.conflict.unhandled.minimapOverViewRuler #F0F0E1
mergeEditor.conflict.unhandledFocused.border #F0F0E1
mergeEditor.conflict.unhandledUnfocused.border #F0F0E180
mergeEditor.conflictingLines.background #F0F0E120
minimap.background #271D3B
minimap.chatEditHighlight #33999940
minimap.errorHighlight #D96560
minimap.findMatchHighlight #33999980
minimap.foregroundOpacity #000000FF
minimap.infoHighlight #339999
minimap.selectionHighlight #33999950
minimap.selectionOccurrenceHighlight #33999940
minimap.warningHighlight #F0F0E1
minimapGutter.addedBackground #339999
minimapGutter.deletedBackground #D96560
minimapGutter.modifiedBackground #9B7ED9
minimapSlider.activeBackground #33999970
minimapSlider.background #33999930
minimapSlider.hoverBackground #33999950
multiDiffEditor.background #271D3B
multiDiffEditor.border #33999920
multiDiffEditor.headerBackground #1E1628
notebook.cellBorderColor #33999930
notebook.cellEditorBackground #1E1628
notebook.cellHoverBackground #332848
notebook.cellInsertionIndicator #339999
notebook.cellStatusBarItemHoverBackground #33999930
notebook.cellToolbarSeparator #33999920
notebook.editorBackground #271D3B
notebook.focusedCellBackground #2E2342
notebook.focusedCellBorder #339999
notebook.focusedEditorBorder #339999
notebook.inactiveFocusedCellBorder #33999950
notebook.inactiveSelectedCellBorder #33999930
notebook.outputContainerBackgroundColor #1A0F24
notebook.outputContainerBorderColor #33999920
notebook.selectedCellBackground #33999920
notebook.selectedCellBorder #33999980
notebook.symbolHighlightBackground #33999930
notebookEditorOverviewRuler.runningCellForeground #339999
notebookScrollbarSlider.activeBackground #33999970
notebookScrollbarSlider.background #33999930
notebookScrollbarSlider.hoverBackground #33999950
notebookStatusErrorIcon.foreground #D96560
notebookStatusRunningIcon.foreground #339999
notebookStatusSuccessIcon.foreground #5BBF7A
notificationCenter.border #33999920
notificationCenterHeader.background #1E1628
notificationCenterHeader.foreground #E8E0F0
notificationLink.foreground #339999
notifications.background #1E1628
notifications.border #33999920
notifications.foreground #E8E0F0
notificationsErrorIcon.foreground #D96560
notificationsInfoIcon.foreground #339999
notificationsWarningIcon.foreground #F0F0E1
notificationToast.border #33999920
outputView.background #1E1628
outputViewStickyScroll.background #1E1628
panel.background #1E1628
panel.border #33999920
panel.dropBorder #339999
panelInput.border #33999950
panelSection.border #33999920
panelSection.dropBackground #33999930
panelSectionHeader.background #27213580
panelSectionHeader.border #33999920
panelSectionHeader.foreground #339999
panelStickyScroll.background #1E1628
panelStickyScroll.border #33999920
panelStickyScroll.shadow #10182030
panelTitle.activeBorder #339999
panelTitle.activeForeground #339999
panelTitle.border #33999920
panelTitle.inactiveForeground #CCCCCC80
panelTitleBadge.background #339999
panelTitleBadge.foreground #E8E0F0
peekView.border #339999
peekViewEditor.background #271D3B
peekViewEditor.matchHighlightBackground #33999950
peekViewEditor.matchHighlightBorder #33999980
peekViewEditorGutter.background #271D3B
peekViewEditorStickyScroll.background #1E1628
peekViewEditorStickyScrollGutter.background #1E1628
peekViewResult.background #1E1628
peekViewResult.fileForeground #E8E0F0
peekViewResult.lineForeground #CCCCCC
peekViewResult.matchHighlightBackground #33999950
peekViewResult.selectionBackground #33999950
peekViewResult.selectionForeground #E8E0F0
peekViewTitle.background #101820
peekViewTitleDescription.foreground #CCCCCC
peekViewTitleLabel.foreground #339999
pickerGroup.border #33999930
pickerGroup.foreground #339999
ports.iconRunningProcessForeground #5BBF7A
problemsErrorIcon.foreground #D96560
problemsInfoIcon.foreground #339999
problemsWarningIcon.foreground #F0F0E1
profileBadge.background #339999
profileBadge.foreground #E8E0F0
profiles.sashBorder #339999
progressBar.background #339999
quickInput.background #1E1628
quickInput.border #33999930
quickInput.foreground #E8E0F0
quickInputList.focusBackground #33999940
quickInputList.focusForeground #E8E0F0
quickInputList.focusIconForeground #E8E0F0
quickInputList.hoverBackground #332848
quickInputTitle.background #2E2342
radio.activeBackground #339999
radio.activeBorder #339999
radio.activeForeground #E8E0F0
radio.inactiveBackground #3D2F54
radio.inactiveBorder #33999950
radio.inactiveForeground #CCCCCC
radio.inactiveHoverBackground #332848
sash.hoverBorder #339999
scmGraph.foreground1 #339999
scmGraph.foreground2 #9B7ED9
scmGraph.foreground3 #C3D7CD
scmGraph.foreground4 #F0F0E1
scmGraph.foreground5 #5BBF7A
scmGraph.historyItemBaseRefColor #C3D7CD
scmGraph.historyItemHoverAdditionsForeground #339999
scmGraph.historyItemHoverDeletionsForeground #D96560
scmGraph.historyItemHoverLabelForeground #E8E0F0
scmGraph.historyItemRefColor #339999
scmGraph.historyItemRemoteRefColor #9B7ED9
scrollbar.background #271D3B00
scrollbar.shadow #10182050
scrollbarSlider.activeBackground #33999970
scrollbarSlider.background #33999930
scrollbarSlider.hoverBackground #33999950
search.resultsInfoForeground #CCCCCC
searchEditor.findMatchBackground #33999940
searchEditor.findMatchBorder #33999980
searchEditor.textInputBorder #33999950
selection.background #33999950
settings.checkboxBackground #3D2F54
settings.checkboxBorder #33999950
settings.checkboxForeground #339999
settings.dropdownBackground #3D2F54
settings.dropdownBorder #33999950
settings.dropdownForeground #E8E0F0
settings.dropdownListBorder #33999930
settings.focusedRowBackground #33999915
settings.focusedRowBorder #33999940
settings.headerBorder #33999920
settings.headerForeground #E8E0F0
settings.modifiedItemIndicator #339999
settings.numberInputBackground #3D2F54
settings.numberInputBorder #33999950
settings.numberInputForeground #E8E0F0
settings.rowHoverBackground #33999915
settings.sashBorder #339999
settings.settingsHeaderHoverForeground #339999
settings.textInputBackground #3D2F54
settings.textInputBorder #33999950
settings.textInputForeground #E8E0F0
sideBar.background #1E1628
sideBar.border #33999920
sideBar.dropBackground #33999930
sideBar.foreground #E8E0F0
sideBarActivityBarTop.border #33999920
sideBarSectionHeader.background #27213580
sideBarSectionHeader.border #33999920
sideBarSectionHeader.foreground #339999
sideBarStickyScroll.background #1E1628
sideBarStickyScroll.border #33999920
sideBarStickyScroll.shadow #10182030
sideBarTitle.background #1E1628
sideBarTitle.border #33999920
sideBarTitle.foreground #339999
sideBySideEditor.horizontalBorder #33999920
sideBySideEditor.verticalBorder #33999920
simpleFindWidget.sashBorder #339999
statusBar.background #1A0F24
statusBar.border #1A0F24
statusBar.debuggingBackground #339999
statusBar.debuggingBorder #33999980
statusBar.debuggingForeground #E8E0F0
statusBar.focusBorder #339999
statusBar.foreground #E8E0F0
statusBar.noFolderBackground #1A0F24
statusBar.noFolderBorder #1A0F24
statusBar.noFolderForeground #E8E0F0
statusBarItem.activeBackground #33999950
statusBarItem.compactHoverBackground #33999940
statusBarItem.errorBackground #D96560
statusBarItem.errorForeground #E8E0F0
statusBarItem.errorHoverBackground #D96560CC
statusBarItem.errorHoverForeground #E8E0F0
statusBarItem.focusBorder #339999
statusBarItem.hoverBackground #33999930
statusBarItem.hoverForeground #E8E0F0
statusBarItem.offlineBackground #CCCCCC80
statusBarItem.offlineForeground #E8E0F0
statusBarItem.offlineHoverBackground #CCCCCC60
statusBarItem.offlineHoverForeground #E8E0F0
statusBarItem.prominentBackground #339999
statusBarItem.prominentForeground #E8E0F0
statusBarItem.prominentHoverBackground #2B8080
statusBarItem.prominentHoverForeground #E8E0F0
statusBarItem.remoteBackground #9B7ED9
statusBarItem.remoteForeground #E8E0F0
statusBarItem.remoteHoverBackground #9B7ED9CC
statusBarItem.remoteHoverForeground #E8E0F0
statusBarItem.warningBackground #F0F0E1
statusBarItem.warningForeground #1A0F24
statusBarItem.warningHoverBackground #F0F0E1CC
statusBarItem.warningHoverForeground #1A0F24
symbolIcon.arrayForeground #F0F0E1
symbolIcon.booleanForeground #F0F0E1
symbolIcon.classForeground #9B7ED9
symbolIcon.colorForeground #339999
symbolIcon.constantForeground #F0F0E1
symbolIcon.constructorForeground #339999
symbolIcon.enumeratorForeground #9B7ED9
symbolIcon.enumeratorMemberForeground #F0F0E1
symbolIcon.eventForeground #F0F0E1
symbolIcon.fieldForeground #339999
symbolIcon.fileForeground #CCCCCC
symbolIcon.folderForeground #339999
symbolIcon.functionForeground #339999
symbolIcon.interfaceForeground #9B7ED9
symbolIcon.keyForeground #339999
symbolIcon.keywordForeground #9B7ED9
symbolIcon.methodForeground #339999
symbolIcon.moduleForeground #339999
symbolIcon.namespaceForeground #339999
symbolIcon.nullForeground #CCCCCC80
symbolIcon.numberForeground #F0F0E1
symbolIcon.objectForeground #339999
symbolIcon.operatorForeground #339999
symbolIcon.packageForeground #339999
symbolIcon.propertyForeground #E8E0F0
symbolIcon.referenceForeground #339999
symbolIcon.snippetForeground #C3D7CD
symbolIcon.stringForeground #C3D7CD
symbolIcon.structForeground #9B7ED9
symbolIcon.textForeground #E8E0F0
symbolIcon.typeParameterForeground #9B7ED9
symbolIcon.unitForeground #F0F0E1
symbolIcon.variableForeground #E8E0F0
tab.activeBackground #271D3B
tab.activeBorder #339999
tab.activeBorderTop #33999900
tab.activeForeground #E8E0F0
tab.activeModifiedBorder #9B7ED9
tab.border #33999920
tab.dragAndDropBorder #339999
tab.hoverBackground #27213580
tab.hoverBorder #33999950
tab.hoverForeground #E8E0F0
tab.inactiveBackground #1E1628
tab.inactiveForeground #CCCCCC80
tab.inactiveModifiedBorder #9B7ED980
tab.lastPinnedBorder #33999940
tab.selectedBackground #271D3B
tab.selectedBorderTop #339999
tab.selectedForeground #E8E0F0
tab.unfocusedActiveBackground #271D3B
tab.unfocusedActiveBorder #33999980
tab.unfocusedActiveBorderTop #33999900
tab.unfocusedActiveForeground #E8E0F0CC
tab.unfocusedActiveModifiedBorder #9B7ED9CC
tab.unfocusedHoverBackground #27213560
tab.unfocusedHoverBorder #33999930
tab.unfocusedHoverForeground #E8E0F0CC
tab.unfocusedInactiveBackground #1E1628
tab.unfocusedInactiveForeground #CCCCCC60
tab.unfocusedInactiveModifiedBorder #9B7ED960
terminal.ansiBlack #101820
terminal.ansiBlue #9B7ED9
terminal.ansiBrightBlack #999999
terminal.ansiBrightBlue #9B7ED9
terminal.ansiBrightCyan #5BC5BC
terminal.ansiBrightGreen #78D65B
terminal.ansiBrightMagenta #D98FD9
terminal.ansiBrightRed #D96560
terminal.ansiBrightWhite #E8E0F0
terminal.ansiBrightYellow #E8D44D
terminal.ansiCyan #3AADAD
terminal.ansiGreen #5BBF7A
terminal.ansiMagenta #DA70D6
terminal.ansiRed #E87272
terminal.ansiWhite #E8E0F0
terminal.ansiYellow #E8C84D
terminal.background #271D3B
terminal.border #33999920
terminal.dropBackground #33999930
terminal.findMatchBackground #33999980
terminal.findMatchBorder #339999
terminal.findMatchHighlightBackground #33999950
terminal.findMatchHighlightBorder #33999980
terminal.foreground #E8E0F0
terminal.hoverHighlightBackground #33999930
terminal.inactiveSelectionBackground #33999930
terminal.initialHintForeground #CCCCCC80
terminal.selectionBackground #33999950
terminal.selectionForeground #E8E0F0
terminal.tab.activeBorder #339999
terminalCommandDecoration.defaultBackground #33999950
terminalCommandDecoration.errorBackground #E8727280
terminalCommandDecoration.successBackground #5BBF7A80
terminalCommandGuide.foreground #33999930
terminalCursor.background #271D3B
terminalCursor.foreground #339999
terminalOverviewRuler.border #33999920
terminalOverviewRuler.cursorForeground #339999
terminalOverviewRuler.findMatchForeground #339999CC
terminalStickyScroll.background #1E1628
terminalStickyScroll.border #33999920
terminalStickyScrollHover.background #332848
terminalSymbolIcon.aliasForeground #339999
terminalSymbolIcon.argumentForeground #F0F0E1
terminalSymbolIcon.branchForeground #5BBF7A
terminalSymbolIcon.commitForeground #339999
terminalSymbolIcon.fileForeground #CCCCCC
terminalSymbolIcon.flagForeground #F0F0E1
terminalSymbolIcon.folderForeground #339999
terminalSymbolIcon.inlineSuggestionForeground #CCCCCC80
terminalSymbolIcon.methodForeground #339999
terminalSymbolIcon.optionForeground #E8E0F0
terminalSymbolIcon.optionValueForeground #C3D7CD
terminalSymbolIcon.pullRequestDoneForeground #5BBF7A
terminalSymbolIcon.pullRequestForeground #339999
terminalSymbolIcon.remoteForeground #9B7ED9
terminalSymbolIcon.stashForeground #9B7ED9
terminalSymbolIcon.symbolicLinkFileForeground #33999980
terminalSymbolIcon.symbolicLinkFolderForeground #33999980
terminalSymbolIcon.symbolText #E8E0F0
terminalSymbolIcon.tagForeground #9B7ED9
testing.coverCountBadgeBackground #339999
testing.coverCountBadgeForeground #E8E0F0
testing.coveredBackground #5BBF7A15
testing.coveredBorder #5BBF7A40
testing.coveredGutterBackground #5BBF7A50
testing.iconErrored #D96560
testing.iconErrored.retired #D9656060
testing.iconFailed #D96560
testing.iconFailed.retired #D9656060
testing.iconPassed #5BBF7A
testing.iconPassed.retired #5BBF7A60
testing.iconQueued #F0F0E1
testing.iconQueued.retired #F0F0E160
testing.iconSkipped #CCCCCC80
testing.iconSkipped.retired #CCCCCC50
testing.iconUnset #CCCCCC80
testing.iconUnset.retired #CCCCCC50
testing.message.error.badgeBackground #D96560
testing.message.error.badgeBorder #D9656080
testing.message.error.badgeForeground #E8E0F0
testing.message.error.lineBackground #D9656015
testing.message.info.decorationForeground #339999
testing.message.info.lineBackground #33999915
testing.messagePeekBorder #339999
testing.messagePeekHeaderBackground #33999920
testing.peekBorder #D96560
testing.peekHeaderBackground #D9656020
testing.runAction #5BBF7A
testing.uncoveredBackground #D9656015
testing.uncoveredBorder #D9656040
testing.uncoveredBranchBackground #D9656030
testing.uncoveredGutterBackground #D9656050
textBlockQuote.background #2E2342
textBlockQuote.border #33999980
textCodeBlock.background #3D2F54
textLink.activeForeground #339999
textLink.foreground #339999CC
textPreformat.background #3D2F54
textPreformat.border #33999930
textPreformat.foreground #C3D7CD
textSeparator.foreground #33999930
titleBar.activeBackground #1A0F24
titleBar.activeForeground #E8E0F0
titleBar.border #1A0F24
titleBar.inactiveBackground #1A0F24
titleBar.inactiveForeground #CCCCCC80
toolbar.activeBackground #33999940
toolbar.hoverBackground #33999930
toolbar.hoverOutline #33999900
tree.inactiveIndentGuidesStroke #33999920
tree.indentGuidesStroke #33999940
tree.tableColumnsBorder #33999920
tree.tableOddRowsBackground #271D3B50
walkThrough.embeddedEditorBackground #1E1628
walkthrough.stepTitle.foreground #E8E0F0
welcomePage.background #271D3B
welcomePage.progress.background #3D2F54
welcomePage.progress.foreground #339999
welcomePage.tileBackground #1E1628
welcomePage.tileBorder #33999920
welcomePage.tileHoverBackground #332848
widget.border #33999930
widget.shadow #10182050
window.activeBorder #33999900
window.inactiveBorder #33999900 keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution #339999 —
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter #9B7ED9 —
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method #339999 —
meta.block variable.other #E8E0F0 —
support.other.variable, string.other.link #E8E0F0 —
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other #F0F0E1 —
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js #C3D7CD —
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types #339999 —
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 #339999 —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #E8E0F0 —
variable.language #9B7ED9 italic
entity.name.method.js #339999 italic
meta.class-method.js entity.name.function.js, variable.function.constructor #339999 —
entity.other.attribute-name #9B7ED9 —
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name #339999 italic
entity.other.attribute-name.class #339999 —
source.sass keyword.control #339999 —
constant.character.escape #339999 —
*url*, *link*, *uri* — underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #339999 italic
source.js constant.other.object.key.js string.unquoted.label.js #E8E0F0 italic
source.json meta.structure.dictionary.json support.type.property-name.json #339999 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #9B7ED9 —
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 #C3D7CD —
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 #339999 —
text.html.markdown, punctuation.definition.list_item.markdown #E8E0F0 —
text.html.markdown markup.inline.raw.markdown #9B7ED9 —
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown #339999 —
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown #339999 —
markup.italic #9B7ED9 italic
markup.bold, markup.bold string #9B7ED9 bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string #9B7ED9 bold
markup.underline #C3D7CD underline
markup.quote punctuation.definition.blockquote.markdown #339999 —
string.other.link.title.markdown #339999 —
string.other.link.description.title.markdown #9B7ED9 —
constant.other.reference.link.markdown #C3D7CD —
markup.raw.block.fenced.markdown #E8E0F0 —
punctuation.definition.fenced.markdown #E8E0F0 —
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end #E8E0F0 —
variable.language.fenced.markdown #339999 —
meta.separator #339999 bold
Open Editors fetchUser.ts index.ts README.md My-Project src components fetchUser.ts Button.tsx Modal.tsx hooks utils index.ts public package.json tsconfig.json README.md Outline fetchUser.ts
index.ts
README.md
src components fetchUser.ts fetchUser 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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 $
31
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}!`;
}