Skip to main content
Home Theme VS Code Tasmania A professional theme for Visual Studio Code featuring Tasmania's iconic blue and forest green colour palette.
Tasmania | Coding Theme
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 #005A9630 activityBar.activeBackground #1A5C3A15 activityBar.activeBorder #1A5C3A activityBar.activeFocusBorder #1A5C3A activityBar.background #F5F5F5 activityBar.border #1A5C3A30 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #6E6F74 italic variable, string constant.other.placeholder #0B1218 — constant.other.color #005A96 — invalid, invalid.illegal #E22339 — 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}!`;
}
Tasmania — Tasmania Light main*
0 1
Copilot
Ln 5, Col 12
Spaces: 2
UTF-8
LF
TypeScript
Light+
activityBar.dropBorder #1A5C3A
activityBar.foreground #0B1218
activityBar.inactiveForeground #44444470
activityBarBadge.background #005A96
activityBarBadge.foreground #FFFFFF
activityBarTop.activeBackground #1A5C3A15
activityBarTop.activeBorder #1A5C3A
activityBarTop.background #F5F5F5
activityBarTop.dropBorder #1A5C3A
activityBarTop.foreground #0B1218
activityBarTop.inactiveForeground #44444470
activityErrorBadge.background #E22339
activityErrorBadge.foreground #FFFFFF
activityWarningBadge.background #B38800
activityWarningBadge.foreground #FFFFFF
agentSessionReadIndicator.foreground #005A96
agentSessionSelectedBadge.border #005A9640
agentSessionSelectedUnfocusedBadge.border #0B121840
agentStatusIndicator.background #EBEBEB
aiCustomizationManagement.sashBorder #005A96
badge.background #005A96
badge.foreground #FFFFFF
banner.background #005A96
banner.foreground #FFFFFF
banner.iconForeground #FFFFFF
breadcrumb.activeSelectionForeground #005A96
breadcrumb.background #FFFFFF
breadcrumb.focusForeground #0B1218
breadcrumb.foreground #78797E
breadcrumbPicker.background #FFFFFF
button.background #005A96
button.border #005A9600
button.foreground #FFFFFF
button.hoverBackground #004678
button.secondaryBackground #EBEBEB
button.secondaryBorder #005A9640
button.secondaryForeground #0B1218
button.secondaryHoverBackground #E0E0E0
button.separator #FFFFFF40
charts.blue #005A96
charts.foreground #0B1218
charts.green #2E7A58
charts.lines #78797E
charts.orange #006A8F
charts.purple #1A5C3A
charts.red #E22339
charts.yellow #B38800
chat.avatarBackground #005A96
chat.avatarForeground #FFFFFF
chat.checkpointSeparator #005A9630
chat.editedFileForeground #005A96
chat.inputWorkingBorderColor1 #005A96
chat.inputWorkingBorderColor2 #004678
chat.inputWorkingBorderColor3 #005A96
chat.linesAddedForeground #2E7A58CC
chat.linesRemovedForeground #E22339CC
chat.requestBackground #F5F5F5
chat.requestBorder #005A9630
chat.requestBubbleBackground #F5F5F5E6
chat.requestBubbleHoverBackground #E0E0E0E6
chat.requestCodeBorder #005A9620
chat.slashCommandBackground #005A96
chat.slashCommandForeground #FFFFFF
chat.thinkingShimmer #005A9630
chatManagement.sashBorder #005A96
checkbox.background #FFFFFF
checkbox.border #005A9650
checkbox.disabled.background #F5F5F5
checkbox.disabled.foreground #78797E
checkbox.foreground #005A96
checkbox.selectBackground #FFFFFF
checkbox.selectBorder #005A96
commandCenter.activeBackground #0B121825
commandCenter.activeBorder #0B121850
commandCenter.activeForeground #0B1218
commandCenter.background #0B121815
commandCenter.border #0B121830
commandCenter.debuggingBackground #2E7A5820
commandCenter.foreground #0B1218
commandCenter.inactiveBorder #0B121815
commandCenter.inactiveForeground #44444470
commentsView.resolvedIcon #2E7A58
commentsView.unresolvedIcon #B38800
contrastActiveBorder #005A9600
contrastBorder #005A9600
debugConsole.errorForeground #E22339
debugConsole.infoForeground #5B9BD5
debugConsole.sourceForeground #78797E
debugConsole.warningForeground #B38800
debugConsoleInputIcon.foreground #005A96
debugExceptionWidget.background #E2233915
debugExceptionWidget.border #E2233960
debugIcon.breakpointCurrentStackframeForeground #B38800
debugIcon.breakpointDisabledForeground #78797E
debugIcon.breakpointForeground #E22339
debugIcon.breakpointStackframeForeground #2E7A58
debugIcon.breakpointUnverifiedForeground #B38800
debugIcon.continueForeground #2E7A58
debugIcon.disconnectForeground #E22339
debugIcon.pauseForeground #B38800
debugIcon.restartForeground #2E7A58
debugIcon.startForeground #2E7A58
debugIcon.stepBackForeground #005A96
debugIcon.stepIntoForeground #005A96
debugIcon.stepOutForeground #005A96
debugIcon.stepOverForeground #005A96
debugIcon.stopForeground #E22339
debugTokenExpression.boolean #006A8F
debugTokenExpression.error #E22339
debugTokenExpression.name #1A5C3A
debugTokenExpression.number #006A8F
debugTokenExpression.string #0A690D
debugTokenExpression.type #1A5C3A
debugTokenExpression.value #0A690D
debugToolBar.background #FFFFFF
debugView.exceptionLabelBackground #E22339
debugView.exceptionLabelForeground #FFFFFF
debugView.stateLabelBackground #005A96
debugView.stateLabelForeground #FFFFFF
debugView.valueChangedHighlight #005A9660
descriptionForeground #78797E
diffEditor.border #1A5C3A20
diffEditor.diagonalFill #78797E15
diffEditor.insertedLineBackground #2E7A5810
diffEditor.insertedTextBackground #2E7A5820
diffEditor.insertedTextBorder #2E7A5850
diffEditor.move.border #005A9660
diffEditor.moveActive.border #005A96
diffEditor.removedLineBackground #E2233910
diffEditor.removedTextBackground #E2233920
diffEditor.removedTextBorder #E2233950
diffEditor.unchangedCodeBackground #FFFFFF80
diffEditor.unchangedRegionBackground #F5F5F5
diffEditor.unchangedRegionForeground #78797E
diffEditor.unchangedRegionShadow #0B121815
diffEditorGutter.insertedLineBackground #2E7A5820
diffEditorGutter.removedLineBackground #E2233920
diffEditorOverview.insertedForeground #2E7A5860
diffEditorOverview.removedForeground #E2233960
disabledForeground #78797E
dropdown.background #FFFFFF
dropdown.border #005A9650
dropdown.foreground #0B1218
dropdown.listBackground #FFFFFF
editor.background #FFFFFF
editor.compositionBorder #005A96
editor.findMatchBackground #005A9650
editor.findMatchBorder #005A96
editor.findMatchForeground #0B1218
editor.findMatchHighlightBackground #005A9630
editor.findMatchHighlightBorder #005A9660
editor.findMatchHighlightForeground #0B1218
editor.findRangeHighlightBackground #005A9615
editor.findRangeHighlightBorder #005A9600
editor.focusedStackFrameHighlightBackground #2E7A5820
editor.foldBackground #005A9610
editor.foldPlaceholderForeground #78797E
editor.foreground #0B1218
editor.hoverHighlightBackground #005A9615
editor.inactiveLineHighlightBackground #F5F5F580
editor.inactiveSelectionBackground #005A9620
editor.inlineValuesBackground #005A9610
editor.inlineValuesForeground #78797E
editor.lineHighlightBackground #F5F5F5
editor.lineHighlightBorder #005A9610
editor.linkedEditingBackground #005A9620
editor.placeholder.foreground #78797E
editor.rangeHighlightBackground #005A9610
editor.rangeHighlightBorder #005A9600
editor.selectionBackground #005A9630
editor.selectionForeground #0B1218
editor.selectionHighlightBackground #005A9620
editor.selectionHighlightBorder #005A9640
editor.stackFrameHighlightBackground #B3880020
editor.symbolHighlightBackground #005A9620
editor.symbolHighlightBorder #005A9640
editor.wordHighlightBackground #005A9620
editor.wordHighlightBorder #005A9640
editor.wordHighlightStrongBackground #005A9630
editor.wordHighlightStrongBorder #005A9660
editor.wordHighlightTextBackground #005A9615
editor.wordHighlightTextBorder #005A9630
editorActionList.background #FFFFFF
editorActionList.focusBackground #005A9630
editorActionList.focusForeground #0B1218
editorActionList.foreground #0B1218
editorBracketHighlight.foreground1 #005A96
editorBracketHighlight.foreground2 #1A5C3A
editorBracketHighlight.foreground3 #B38800
editorBracketHighlight.foreground4 #0A690D
editorBracketHighlight.foreground5 #5B9BD5
editorBracketHighlight.foreground6 #006A8F
editorBracketHighlight.unexpectedBracket.foreground #E22339
editorBracketMatch.border #005A9660
editorBracketMatch.foreground #005A96
editorBracketPairGuide.activeBackground1 #005A9680
editorBracketPairGuide.activeBackground2 #1A5C3A80
editorBracketPairGuide.activeBackground3 #B3880080
editorBracketPairGuide.activeBackground4 #0A690D80
editorBracketPairGuide.activeBackground5 #5B9BD580
editorBracketPairGuide.activeBackground6 #006A8F80
editorBracketPairGuide.background1 #005A9640
editorBracketPairGuide.background2 #1A5C3A40
editorBracketPairGuide.background3 #B3880040
editorBracketPairGuide.background4 #0A690D40
editorBracketPairGuide.background5 #5B9BD540
editorBracketPairGuide.background6 #006A8F40
editorCodeLens.foreground #78797E
editorCommentsWidget.rangeActiveBackground #005A9615
editorCommentsWidget.rangeBackground #005A9608
editorCommentsWidget.replyInputBackground #FFFFFF
editorCommentsWidget.resolvedBorder #2E7A5850
editorCommentsWidget.unresolvedBorder #B38800
editorCursor.background #FFFFFF
editorCursor.foreground #005A96
editorError.background #E2233910
editorError.border #E2233900
editorError.foreground #E22339
editorGhostText.background #005A9600
editorGhostText.border #005A9600
editorGhostText.foreground #0B121866
editorGroup.border #1A5C3A20
editorGroup.dropBackground #005A9620
editorGroup.dropIntoPromptBackground #FFFFFF
editorGroup.dropIntoPromptBorder #005A9650
editorGroup.dropIntoPromptForeground #0B1218
editorGroup.emptyBackground #FFFFFF
editorGroup.focusedEmptyBorder #005A9640
editorGroupHeader.border #1A5C3A15
editorGroupHeader.noTabsBackground #FFFFFF
editorGroupHeader.tabsBackground #F5F5F5
editorGroupHeader.tabsBorder #1A5C3A20
editorGutter.addedBackground #2E7A58
editorGutter.addedSecondaryBackground #2E7A5860
editorGutter.background #FFFFFF
editorGutter.commentDraftGlyphForeground #005A9680
editorGutter.commentGlyphForeground #005A96
editorGutter.commentRangeForeground #78797E40
editorGutter.commentUnresolvedGlyphForeground #B38800
editorGutter.deletedBackground #E22339
editorGutter.deletedSecondaryBackground #E2233960
editorGutter.foldingControlForeground #78797E
editorGutter.itemBackground #FFFFFF
editorGutter.itemGlyphForeground #005A96
editorGutter.modifiedBackground #005A96
editorGutter.modifiedSecondaryBackground #005A9660
editorHint.border #2E7A5800
editorHint.foreground #2E7A58
editorHoverWidget.background #FFFFFF
editorHoverWidget.border #005A9650
editorHoverWidget.foreground #0B1218
editorHoverWidget.highlightForeground #005A96
editorHoverWidget.statusBarBackground #F5F5F5
editorIndentGuide.activeBackground1 #005A96
editorIndentGuide.activeBackground2 #1A5C3A
editorIndentGuide.activeBackground3 #B38800
editorIndentGuide.activeBackground4 #0A690D
editorIndentGuide.activeBackground5 #5B9BD5
editorIndentGuide.activeBackground6 #006A8F
editorIndentGuide.background1 #005A9620
editorIndentGuide.background2 #1A5C3A20
editorIndentGuide.background3 #B3880020
editorIndentGuide.background4 #0A690D20
editorIndentGuide.background5 #5B9BD520
editorIndentGuide.background6 #006A8F20
editorInfo.background #5B9BD510
editorInfo.border #5B9BD500
editorInfo.foreground #5B9BD5
editorInlayHint.background #F5F5F5
editorInlayHint.foreground #44444470
editorInlayHint.parameterBackground #F5F5F5
editorInlayHint.parameterForeground #44444470
editorInlayHint.typeBackground #F5F5F5
editorInlayHint.typeForeground #0B1218
editorLightBulb.foreground #B38800
editorLightBulbAi.foreground #005A96
editorLightBulbAutoFix.foreground #2E7A58
editorLineNumber.activeForeground #005A96
editorLineNumber.dimmedForeground #78797E50
editorLineNumber.foreground #1A5C3A
editorLink.activeForeground #005A96
editorMarkerNavigation.background #FFFFFF
editorMarkerNavigationError.background #E2233920
editorMarkerNavigationError.headerBackground #E2233915
editorMarkerNavigationInfo.background #5B9BD520
editorMarkerNavigationInfo.headerBackground #5B9BD515
editorMarkerNavigationWarning.background #B3880020
editorMarkerNavigationWarning.headerBackground #B3880015
editorMinimap.inlineChatInserted #2E7A5830
editorMinimap.inlineChatRemoved #E2233930
editorMultiCursor.primary.background #FFFFFF
editorMultiCursor.primary.foreground #005A96
editorMultiCursor.secondary.background #FFFFFF
editorMultiCursor.secondary.foreground #1A5C3A
editorOverviewRuler.addedForeground #2E7A58
editorOverviewRuler.background #FFFFFF
editorOverviewRuler.border #005A9620
editorOverviewRuler.bracketMatchForeground #005A9660
editorOverviewRuler.commentDraftForeground #005A9650
editorOverviewRuler.commentForeground #005A9630
editorOverviewRuler.commentUnresolvedForeground #B3880060
editorOverviewRuler.commonContentForeground #78797E40
editorOverviewRuler.currentContentForeground #2E7A5860
editorOverviewRuler.deletedForeground #E22339
editorOverviewRuler.errorForeground #E22339
editorOverviewRuler.findMatchForeground #005A96CC
editorOverviewRuler.incomingContentForeground #005A9660
editorOverviewRuler.infoForeground #5B9BD5
editorOverviewRuler.inlineChatInserted #2E7A5860
editorOverviewRuler.inlineChatRemoved #E2233960
editorOverviewRuler.modifiedForeground #005A96
editorOverviewRuler.rangeHighlightForeground #005A9699
editorOverviewRuler.selectionHighlightForeground #005A9699
editorOverviewRuler.warningForeground #B38800
editorOverviewRuler.wordHighlightForeground #005A9699
editorOverviewRuler.wordHighlightStrongForeground #005A96CC
editorOverviewRuler.wordHighlightTextForeground #005A9660
editorPane.background #FFFFFF
editorRuler.foreground #E0E0E030
editorSnippetFinalTabstopHighlightBackground #2E7A5820
editorSnippetFinalTabstopHighlightBorder #2E7A5800
editorSnippetTabstopHighlightBackground #005A9620
editorSnippetTabstopHighlightBorder #005A9600
editorStickyScroll.background #F5F5F5
editorStickyScroll.border #1A5C3A15
editorStickyScroll.shadow #0B121815
editorStickyScrollGutter.background #F5F5F5
editorStickyScrollHover.background #E0E0E0
editorSuggestWidget.background #FFFFFF
editorSuggestWidget.border #005A9650
editorSuggestWidget.focusHighlightForeground #005A96
editorSuggestWidget.foreground #0B1218
editorSuggestWidget.highlightForeground #005A96
editorSuggestWidget.selectedBackground #005A9650
editorSuggestWidget.selectedForeground #0B1218
editorSuggestWidget.selectedIconForeground #0B1218
editorSuggestWidgetStatus.foreground #78797E
editorUnicodeHighlight.background #B3880015
editorUnicodeHighlight.border #B38800
editorUnnecessaryCode.border #78797E40
editorUnnecessaryCode.opacity #00000077
editorWarning.background #B3880010
editorWarning.border #B3880000
editorWarning.foreground #B38800
editorWhitespace.foreground #E0E0E050
editorWidget.background #FFFFFF
editorWidget.border #005A9650
editorWidget.foreground #0B1218
editorWidget.resizeBorder #005A96
errorForeground #E22339
extensionBadge.remoteBackground #005A96
extensionBadge.remoteForeground #FFFFFF
extensionButton.background #005A96
extensionButton.border #005A9600
extensionButton.foreground #FFFFFF
extensionButton.hoverBackground #004678
extensionButton.prominentBackground #005A96
extensionButton.prominentForeground #FFFFFF
extensionButton.prominentHoverBackground #004678
extensionButton.separator #FFFFFF40
extensionIcon.preReleaseForeground #005A96
extensionIcon.privateForeground #78797E
extensionIcon.sponsorForeground #1A5C3A
extensionIcon.starForeground #B38800
extensionIcon.verifiedForeground #2E7A58
focusBorder #005A96
foreground #0B1218
gauge.background #FFFFFF
gauge.border #005A9620
gauge.errorBackground #E2233920
gauge.errorForeground #E22339
gauge.foreground #0B1218
gauge.warningBackground #B3880020
gauge.warningForeground #B38800
git.blame.editorDecorationForeground #78797E80
gitDecoration.addedResourceForeground #2E7A58
gitDecoration.conflictingResourceForeground #B38800
gitDecoration.deletedResourceForeground #E22339
gitDecoration.ignoredResourceForeground #78797E
gitDecoration.modifiedResourceForeground #005A96
gitDecoration.renamedResourceForeground #005A96
gitDecoration.stageDeletedResourceForeground #E22339CC
gitDecoration.stageModifiedResourceForeground #005A96CC
gitDecoration.submoduleResourceForeground #006A8F
gitDecoration.untrackedResourceForeground #2E7A58
icon.foreground #005A96
inlineChat.background #F5F5F5
inlineChat.border #005A9630
inlineChat.foreground #0B1218
inlineChat.shadow #0B121820
inlineChatDiff.inserted #2E7A5820
inlineChatDiff.removed #E2233915
inlineChatInput.background #FFFFFF
inlineChatInput.border #005A9650
inlineChatInput.focusBorder #005A96
inlineChatInput.placeholderForeground #44444470
inlineEdit.gutterIndicator.background #FFFFFF
inlineEdit.gutterIndicator.primaryBackground #005A9615
inlineEdit.gutterIndicator.primaryBorder #005A96
inlineEdit.gutterIndicator.primaryForeground #005A96
inlineEdit.gutterIndicator.secondaryBackground #1A5C3A15
inlineEdit.gutterIndicator.secondaryBorder #1A5C3A
inlineEdit.gutterIndicator.secondaryForeground #1A5C3A
inlineEdit.gutterIndicator.successfulBackground #2E7A5815
inlineEdit.gutterIndicator.successfulBorder #2E7A58
inlineEdit.gutterIndicator.successfulForeground #2E7A58
inlineEdit.modifiedBackground #005A9610
inlineEdit.modifiedBorder #005A9640
inlineEdit.modifiedChangedLineBackground #005A9615
inlineEdit.modifiedChangedTextBackground #005A9625
inlineEdit.originalBackground #E2233908
inlineEdit.originalBorder #E2233925
inlineEdit.originalChangedLineBackground #E2233910
inlineEdit.originalChangedTextBackground #E2233920
inlineEdit.tabWillAcceptModifiedBorder #2E7A5860
inlineEdit.tabWillAcceptOriginalBorder #E2233940
input.background #FFFFFF
input.border #005A9650
input.foreground #0B1218
input.placeholderForeground #78797E
inputOption.activeBackground #005A9630
inputOption.activeBorder #005A96
inputOption.activeForeground #0B1218
inputOption.hoverBackground #005A9615
inputValidation.errorBackground #E2233915
inputValidation.errorBorder #E22339
inputValidation.errorForeground #E22339
inputValidation.infoBackground #5B9BD515
inputValidation.infoBorder #5B9BD5
inputValidation.infoForeground #5B9BD5
inputValidation.warningBackground #B3880015
inputValidation.warningBorder #B38800
inputValidation.warningForeground #B38800
interactive.activeCodeBorder #005A96
interactive.inactiveCodeBorder #005A9620
keybindingLabel.background #005A9615
keybindingLabel.border #005A9630
keybindingLabel.bottomBorder #005A9650
keybindingLabel.foreground #0B1218
keybindingTable.headerBackground #F5F5F5
keybindingTable.rowsBackground #F5F5F580
list.activeSelectionBackground #005A9640
list.activeSelectionForeground #FFFFFF
list.activeSelectionIconForeground #FFFFFF
list.deemphasizedForeground #78797E
list.dropBackground #005A9620
list.dropBetweenBackground #005A96
list.errorForeground #E22339
list.filterMatchBorder #005A9660
list.focusAndSelectionOutline #005A96
list.focusBackground #005A9630
list.focusForeground #0B1218
list.focusHighlightForeground #005A96
list.focusOutline #005A9660
list.highlightForeground #005A96
list.hoverBackground #005A9615
list.hoverForeground #0B1218
list.inactiveFocusBackground #005A9615
list.inactiveFocusOutline #005A9640
list.inactiveSelectionBackground #005A9620
list.inactiveSelectionForeground #0B1218
list.inactiveSelectionIconForeground #0B1218
list.invalidItemForeground #E22339
list.warningForeground #B38800
listFilterWidget.background #FFFFFF
listFilterWidget.noMatchesOutline #E22339
listFilterWidget.outline #005A96
listFilterWidget.shadow #0B121830
markdownAlert.caution.foreground #E22339
markdownAlert.important.foreground #1A5C3A
markdownAlert.note.foreground #5B9BD5
markdownAlert.tip.foreground #2E7A58
markdownAlert.warning.foreground #B38800
mcpIcon.starForeground #B38800
menu.background #FFFFFF
menu.border #005A9630
menu.foreground #0B1218
menu.selectionBackground #005A9630
menu.selectionBorder #005A9600
menu.selectionForeground #0B1218
menu.separatorBackground #005A9620
menubar.selectionBackground #005A9630
menubar.selectionBorder #005A9600
menubar.selectionForeground #0B1218
merge.border #005A9650
merge.commonContentBackground #78797E15
merge.commonHeaderBackground #78797E30
merge.currentContentBackground #2E7A5820
merge.currentHeaderBackground #2E7A5850
merge.incomingContentBackground #005A9620
merge.incomingHeaderBackground #005A9650
mergeEditor.change.background #005A9615
mergeEditor.change.word.background #005A9630
mergeEditor.changeBase.background #78797E10
mergeEditor.changeBase.word.background #78797E20
mergeEditor.conflict.handled.minimapOverViewRuler #2E7A58
mergeEditor.conflict.handledFocused.border #2E7A58
mergeEditor.conflict.handledUnfocused.border #2E7A5840
mergeEditor.conflict.input1.background #2E7A5815
mergeEditor.conflict.input2.background #005A9615
mergeEditor.conflict.unhandled.minimapOverViewRuler #B38800
mergeEditor.conflict.unhandledFocused.border #B38800
mergeEditor.conflict.unhandledUnfocused.border #B3880060
mergeEditor.conflictingLines.background #B3880015
minimap.background #FFFFFF
minimap.chatEditHighlight #005A9630
minimap.errorHighlight #E22339
minimap.findMatchHighlight #005A9680
minimap.foregroundOpacity #000000FF
minimap.infoHighlight #5B9BD5
minimap.selectionHighlight #005A9650
minimap.selectionOccurrenceHighlight #005A9630
minimap.warningHighlight #B38800
minimapGutter.addedBackground #2E7A58
minimapGutter.deletedBackground #E22339
minimapGutter.modifiedBackground #005A96
minimapSlider.activeBackground #005A9670
minimapSlider.background #005A9630
minimapSlider.hoverBackground #005A9650
multiDiffEditor.background #FFFFFF
multiDiffEditor.border #1A5C3A20
multiDiffEditor.headerBackground #F5F5F5
notebook.cellBorderColor #1A5C3A20
notebook.cellEditorBackground #FFFFFF
notebook.cellHoverBackground #E0E0E0
notebook.cellInsertionIndicator #005A96
notebook.cellStatusBarItemHoverBackground #005A9620
notebook.cellToolbarSeparator #1A5C3A15
notebook.editorBackground #FFFFFF
notebook.focusedCellBackground #F5F5F5
notebook.focusedCellBorder #005A96
notebook.focusedEditorBorder #005A96
notebook.inactiveFocusedCellBorder #005A9640
notebook.inactiveSelectedCellBorder #005A9620
notebook.outputContainerBackgroundColor #F5F5F5
notebook.outputContainerBorderColor #1A5C3A15
notebook.selectedCellBackground #005A9615
notebook.selectedCellBorder #005A9660
notebook.symbolHighlightBackground #005A9620
notebookEditorOverviewRuler.runningCellForeground #005A96
notebookScrollbarSlider.activeBackground #005A9670
notebookScrollbarSlider.background #005A9630
notebookScrollbarSlider.hoverBackground #005A9650
notebookStatusErrorIcon.foreground #E22339
notebookStatusRunningIcon.foreground #005A96
notebookStatusSuccessIcon.foreground #2E7A58
notificationCenter.border #005A9620
notificationCenterHeader.background #F5F5F5
notificationCenterHeader.foreground #0B1218
notificationLink.foreground #005A96
notifications.background #FFFFFF
notifications.border #005A9620
notifications.foreground #0B1218
notificationsErrorIcon.foreground #E22339
notificationsInfoIcon.foreground #5B9BD5
notificationsWarningIcon.foreground #B38800
notificationToast.border #005A9620
outputView.background #F5F5F5
outputViewStickyScroll.background #F5F5F5
panel.background #F5F5F5
panel.border #1A5C3A20
panel.dropBorder #1A5C3A
panelInput.border #005A9650
panelSection.border #1A5C3A20
panelSection.dropBackground #005A9620
panelSectionHeader.background #1A5C3A15
panelSectionHeader.border #1A5C3A20
panelSectionHeader.foreground #004678
panelStickyScroll.background #F5F5F5
panelStickyScroll.border #1A5C3A15
panelStickyScroll.shadow #0B121815
panelTitle.activeBorder #1A5C3A
panelTitle.activeForeground #1A5C3A
panelTitle.border #1A5C3A15
panelTitle.inactiveForeground #44444460
panelTitleBadge.background #005A96
panelTitleBadge.foreground #FFFFFF
peekView.border #005A96
peekViewEditor.background #162028
peekViewEditor.matchHighlightBackground #005A9650
peekViewEditor.matchHighlightBorder #005A9680
peekViewEditorGutter.background #162028
peekViewEditorStickyScroll.background #162028
peekViewEditorStickyScrollGutter.background #162028
peekViewResult.background #0B1218
peekViewResult.fileForeground #FFFFFF
peekViewResult.lineForeground #A0B8C8
peekViewResult.matchHighlightBackground #005A9650
peekViewResult.selectionBackground #005A9650
peekViewResult.selectionForeground #FFFFFF
peekViewTitle.background #060A0E
peekViewTitleDescription.foreground #A0B8C8
peekViewTitleLabel.foreground #005A96
pickerGroup.border #005A9620
pickerGroup.foreground #005A96
ports.iconRunningProcessForeground #2E7A58
problemsErrorIcon.foreground #E22339
problemsInfoIcon.foreground #5B9BD5
problemsWarningIcon.foreground #B38800
profileBadge.background #005A96
profileBadge.foreground #FFFFFF
profiles.sashBorder #005A96
progressBar.background #005A96
quickInput.background #FFFFFF
quickInput.border #005A9625
quickInput.foreground #0B1218
quickInputList.focusBackground #005A9630
quickInputList.focusForeground #0B1218
quickInputList.focusIconForeground #0B1218
quickInputList.hoverBackground #E0E0E0
quickInputTitle.background #F5F5F5
radio.activeBackground #005A96
radio.activeBorder #005A96
radio.activeForeground #FFFFFF
radio.inactiveBackground #FFFFFF
radio.inactiveBorder #005A9640
radio.inactiveForeground #0B1218
radio.inactiveHoverBackground #E0E0E0
sash.hoverBorder #005A96
scmGraph.foreground1 #005A96
scmGraph.foreground2 #1A5C3A
scmGraph.foreground3 #0A690D
scmGraph.foreground4 #B38800
scmGraph.foreground5 #2E7A58
scmGraph.historyItemBaseRefColor #0A690D
scmGraph.historyItemHoverAdditionsForeground #2E7A58
scmGraph.historyItemHoverDeletionsForeground #E22339
scmGraph.historyItemHoverLabelForeground #0B1218
scmGraph.historyItemRefColor #005A96
scmGraph.historyItemRemoteRefColor #1A5C3A
scrollbar.background #FFFFFF00
scrollbar.shadow #0B121850
scrollbarSlider.activeBackground #005A9670
scrollbarSlider.background #005A9630
scrollbarSlider.hoverBackground #005A9650
search.resultsInfoForeground #78797E
searchEditor.findMatchBackground #005A9630
searchEditor.findMatchBorder #005A9660
searchEditor.textInputBorder #005A9650
selection.background #005A9650
settings.checkboxBackground #FFFFFF
settings.checkboxBorder #005A9650
settings.checkboxForeground #005A96
settings.dropdownBackground #FFFFFF
settings.dropdownBorder #005A9650
settings.dropdownForeground #0B1218
settings.dropdownListBorder #005A9620
settings.focusedRowBackground #005A9610
settings.focusedRowBorder #005A9630
settings.headerBorder #1A5C3A15
settings.headerForeground #0B1218
settings.modifiedItemIndicator #005A96
settings.numberInputBackground #FFFFFF
settings.numberInputBorder #005A9650
settings.numberInputForeground #0B1218
settings.rowHoverBackground #005A9610
settings.sashBorder #005A96
settings.settingsHeaderHoverForeground #005A96
settings.textInputBackground #FFFFFF
settings.textInputBorder #005A9650
settings.textInputForeground #0B1218
sideBar.background #F5F5F5
sideBar.border #1A5C3A30
sideBar.dropBackground #005A9620
sideBar.foreground #0B1218
sideBarActivityBarTop.border #1A5C3A20
sideBarSectionHeader.background #1A5C3A15
sideBarSectionHeader.border #1A5C3A20
sideBarSectionHeader.foreground #004678
sideBarStickyScroll.background #F5F5F5
sideBarStickyScroll.border #1A5C3A15
sideBarStickyScroll.shadow #0B121815
sideBarTitle.background #F5F5F5
sideBarTitle.border #1A5C3A15
sideBarTitle.foreground #1A5C3A
sideBySideEditor.horizontalBorder #1A5C3A20
sideBySideEditor.verticalBorder #1A5C3A20
simpleFindWidget.sashBorder #005A96
statusBar.background #005A96
statusBar.border #004678
statusBar.debuggingBackground #2E7A58
statusBar.debuggingBorder #2E7A58CC
statusBar.debuggingForeground #FFFFFF
statusBar.focusBorder #005A96
statusBar.foreground #FFFFFF
statusBar.noFolderBackground #004678
statusBar.noFolderBorder #004678
statusBar.noFolderForeground #FFFFFF
statusBarItem.activeBackground #00467880
statusBarItem.compactHoverBackground #00467860
statusBarItem.errorBackground #E22339
statusBarItem.errorForeground #FFFFFF
statusBarItem.errorHoverBackground #E22339CC
statusBarItem.errorHoverForeground #FFFFFF
statusBarItem.focusBorder #005A96
statusBarItem.hoverBackground #00467880
statusBarItem.hoverForeground #FFFFFF
statusBarItem.offlineBackground #78797E
statusBarItem.offlineForeground #FFFFFF
statusBarItem.offlineHoverBackground #78797ECC
statusBarItem.offlineHoverForeground #FFFFFF
statusBarItem.prominentBackground #005A96
statusBarItem.prominentForeground #FFFFFF
statusBarItem.prominentHoverBackground #004678
statusBarItem.prominentHoverForeground #FFFFFF
statusBarItem.remoteBackground #005A96
statusBarItem.remoteForeground #FFFFFF
statusBarItem.remoteHoverBackground #005A96CC
statusBarItem.remoteHoverForeground #FFFFFF
statusBarItem.warningBackground #B38800
statusBarItem.warningForeground #FFFFFF
statusBarItem.warningHoverBackground #B38800CC
statusBarItem.warningHoverForeground #FFFFFF
symbolIcon.arrayForeground #006A8F
symbolIcon.booleanForeground #006A8F
symbolIcon.classForeground #1A5C3A
symbolIcon.colorForeground #005A96
symbolIcon.constantForeground #006A8F
symbolIcon.constructorForeground #005A96
symbolIcon.enumeratorForeground #1A5C3A
symbolIcon.enumeratorMemberForeground #006A8F
symbolIcon.eventForeground #B38800
symbolIcon.fieldForeground #005A96
symbolIcon.fileForeground #78797E
symbolIcon.folderForeground #005A96
symbolIcon.functionForeground #005A96
symbolIcon.interfaceForeground #1A5C3A
symbolIcon.keyForeground #005A96
symbolIcon.keywordForeground #1A5C3A
symbolIcon.methodForeground #005A96
symbolIcon.moduleForeground #005A96
symbolIcon.namespaceForeground #005A96
symbolIcon.nullForeground #78797E
symbolIcon.numberForeground #006A8F
symbolIcon.objectForeground #005A96
symbolIcon.operatorForeground #005A96
symbolIcon.packageForeground #005A96
symbolIcon.propertyForeground #0B1218
symbolIcon.referenceForeground #005A96
symbolIcon.snippetForeground #0A690D
symbolIcon.stringForeground #0A690D
symbolIcon.structForeground #1A5C3A
symbolIcon.textForeground #0B1218
symbolIcon.typeParameterForeground #1A5C3A
symbolIcon.unitForeground #006A8F
symbolIcon.variableForeground #0B1218
tab.activeBackground #FFFFFF
tab.activeBorder #1A5C3A
tab.activeBorderTop #1A5C3A00
tab.activeForeground #0B1218
tab.activeModifiedBorder #005A96
tab.border #1A5C3A20
tab.dragAndDropBorder #1A5C3A
tab.hoverBackground #F5F5F5
tab.hoverBorder #1A5C3A40
tab.hoverForeground #0B1218
tab.inactiveBackground #F5F5F5
tab.inactiveForeground #44444470
tab.inactiveModifiedBorder #005A9660
tab.lastPinnedBorder #1A5C3A30
tab.selectedBackground #FFFFFF
tab.selectedBorderTop #1A5C3A
tab.selectedForeground #0B1218
tab.unfocusedActiveBackground #FFFFFF
tab.unfocusedActiveBorder #1A5C3A60
tab.unfocusedActiveBorderTop #1A5C3A00
tab.unfocusedActiveForeground #0B1218CC
tab.unfocusedActiveModifiedBorder #005A96CC
tab.unfocusedHoverBackground #F5F5F5
tab.unfocusedHoverBorder #1A5C3A30
tab.unfocusedHoverForeground #0B1218CC
tab.unfocusedInactiveBackground #F5F5F5
tab.unfocusedInactiveForeground #44444450
tab.unfocusedInactiveModifiedBorder #005A9650
terminal.ansiBlack #0B1218
terminal.ansiBlue #005A96
terminal.ansiBrightBlack #78797E
terminal.ansiBrightBlue #004678
terminal.ansiBrightCyan #5B9BD5
terminal.ansiBrightGreen #2E7A58
terminal.ansiBrightMagenta #3D2860
terminal.ansiBrightRed #8A1220
terminal.ansiBrightWhite #FFFFFF
terminal.ansiBrightYellow #FFCC2C
terminal.ansiCyan #006A8F
terminal.ansiGreen #0A690D
terminal.ansiMagenta #5A3D80
terminal.ansiRed #E22339
terminal.ansiWhite #FFFFFF
terminal.ansiYellow #B38800
terminal.background #FFFFFF
terminal.border #1A5C3A20
terminal.dropBackground #005A9620
terminal.findMatchBackground #005A9660
terminal.findMatchBorder #005A96
terminal.findMatchHighlightBackground #005A9640
terminal.findMatchHighlightBorder #005A9680
terminal.foreground #0B1218
terminal.hoverHighlightBackground #005A9620
terminal.inactiveSelectionBackground #005A9620
terminal.initialHintForeground #78797E
terminal.selectionBackground #005A9640
terminal.selectionForeground #0B1218
terminal.tab.activeBorder #1A5C3A
terminalCommandDecoration.defaultBackground #005A9640
terminalCommandDecoration.errorBackground #E2233960
terminalCommandDecoration.successBackground #2E7A5860
terminalCommandGuide.foreground #005A9620
terminalCursor.background #FFFFFF
terminalCursor.foreground #005A96
terminalOverviewRuler.border #1A5C3A20
terminalOverviewRuler.cursorForeground #005A96
terminalOverviewRuler.findMatchForeground #005A96CC
terminalStickyScroll.background #F5F5F5
terminalStickyScroll.border #1A5C3A15
terminalStickyScrollHover.background #E0E0E0
terminalSymbolIcon.aliasForeground #005A96
terminalSymbolIcon.argumentForeground #006A8F
terminalSymbolIcon.branchForeground #2E7A58
terminalSymbolIcon.commitForeground #005A96
terminalSymbolIcon.fileForeground #78797E
terminalSymbolIcon.flagForeground #B38800
terminalSymbolIcon.folderForeground #005A96
terminalSymbolIcon.inlineSuggestionForeground #78797E
terminalSymbolIcon.methodForeground #005A96
terminalSymbolIcon.optionForeground #0B1218
terminalSymbolIcon.optionValueForeground #0A690D
terminalSymbolIcon.pullRequestDoneForeground #2E7A58
terminalSymbolIcon.pullRequestForeground #005A96
terminalSymbolIcon.remoteForeground #1A5C3A
terminalSymbolIcon.stashForeground #005A96
terminalSymbolIcon.symbolicLinkFileForeground #005A9680
terminalSymbolIcon.symbolicLinkFolderForeground #005A9680
terminalSymbolIcon.symbolText #0B1218
terminalSymbolIcon.tagForeground #1A5C3A
testing.coverCountBadgeBackground #005A96
testing.coverCountBadgeForeground #FFFFFF
testing.coveredBackground #2E7A5810
testing.coveredBorder #2E7A5830
testing.coveredGutterBackground #2E7A5840
testing.iconErrored #E22339
testing.iconErrored.retired #E2233950
testing.iconFailed #E22339
testing.iconFailed.retired #E2233950
testing.iconPassed #2E7A58
testing.iconPassed.retired #2E7A5850
testing.iconQueued #B38800
testing.iconQueued.retired #B3880050
testing.iconSkipped #78797E
testing.iconSkipped.retired #78797E50
testing.iconUnset #78797E
testing.iconUnset.retired #78797E50
testing.message.error.badgeBackground #E22339
testing.message.error.badgeBorder #E2233960
testing.message.error.badgeForeground #FFFFFF
testing.message.error.lineBackground #E2233910
testing.message.info.decorationForeground #5B9BD5
testing.message.info.lineBackground #5B9BD510
testing.messagePeekBorder #5B9BD5
testing.messagePeekHeaderBackground #5B9BD515
testing.peekBorder #E22339
testing.peekHeaderBackground #E2233915
testing.runAction #2E7A58
testing.uncoveredBackground #E2233910
testing.uncoveredBorder #E2233930
testing.uncoveredBranchBackground #E2233920
testing.uncoveredGutterBackground #E2233940
textBlockQuote.background #F5F5F5
textBlockQuote.border #005A9660
textCodeBlock.background #F5F5F5
textLink.activeForeground #005A96
textLink.foreground #005A96
textPreformat.background #F5F5F5
textPreformat.border #005A9620
textPreformat.foreground #0A690D
textSeparator.foreground #005A9620
titleBar.activeBackground #F5F5F5
titleBar.activeForeground #0B1218
titleBar.border #1A5C3A30
titleBar.inactiveBackground #F5F5F5
titleBar.inactiveForeground #44444470
toolbar.activeBackground #005A9630
toolbar.hoverBackground #005A9620
toolbar.hoverOutline #005A9600
tree.inactiveIndentGuidesStroke #1A5C3A15
tree.indentGuidesStroke #1A5C3A30
tree.tableColumnsBorder #1A5C3A15
tree.tableOddRowsBackground #F5F5F580
walkThrough.embeddedEditorBackground #F5F5F5
walkthrough.stepTitle.foreground #0B1218
welcomePage.background #FFFFFF
welcomePage.progress.background #F5F5F5
welcomePage.progress.foreground #005A96
welcomePage.tileBackground #F5F5F5
welcomePage.tileBorder #1A5C3A15
welcomePage.tileHoverBackground #E0E0E0
widget.border #005A9620
widget.shadow #0B121830
window.activeBorder #005A9600
window.inactiveBorder #005A9600 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 #005A96 —
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter #1A5C3A —
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method #005A96 —
meta.block variable.other #0B1218 —
support.other.variable, string.other.link #0B1218 —
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other #006A8F —
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 #0A690D —
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 #005A96 —
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 #005A96 —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #0B1218 —
variable.language #1A5C3A italic
entity.name.method.js #005A96 italic
meta.class-method.js entity.name.function.js, variable.function.constructor #005A96 —
entity.other.attribute-name #1A5C3A —
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name #005A96 italic
entity.other.attribute-name.class #005A96 —
source.sass keyword.control #005A96 —
constant.character.escape #0A690D —
*url*, *link*, *uri* — underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #005A96 italic
source.js constant.other.object.key.js string.unquoted.label.js #0B1218 italic
source.json meta.structure.dictionary.json support.type.property-name.json #005A96 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #1A5C3A —
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 #0A690D —
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 #006A8F —
text.html.markdown, punctuation.definition.list_item.markdown #0B1218 —
text.html.markdown markup.inline.raw.markdown #1A5C3A —
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown #005A96 —
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown #005A96 —
markup.italic #1A5C3A italic
markup.bold, markup.bold string #1A5C3A 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 #1A5C3A bold
markup.underline #0A690D underline
markup.quote punctuation.definition.blockquote.markdown #5B9BD5 —
string.other.link.title.markdown #005A96 —
string.other.link.description.title.markdown #1A5C3A —
constant.other.reference.link.markdown #0A690D —
markup.raw.block.fenced.markdown #0B1218 —
punctuation.definition.fenced.markdown #0B1218 —
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end #0B1218 —
variable.language.fenced.markdown #005A96 —
meta.separator #005A96 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}!`;
}