Skip to main content
VS Code preview Full workbench mockup using this variant's colors and tokenColors.
colors Workbench UI color keys from the theme JSON colors map.
activityBar.activeBorder #090909 activityBar.background #ffffff activityBar.border #ebebeb activityBar.foreground #090909 activityBar.inactiveForeground #a8a8a8 activityBarBadge.background #1749bd tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment, string.comment #747576 constant, variable.language, constant.character.escape, constant.numeric, support.constant, variable.other.property, entity.other.attribute-name #a31d8d — entity.name.function, string.regexp, support.function #5511bf — entity.name.function.definition, entity.name.method.definition, markup.heading #090909 bold
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Fleet Light Theme — Fleet Light Theme
activityBarBadge.foreground
#ffffff
badge.background #1749bd
badge.foreground #ffffff
breadcrumb.activeSelectionForeground #090909
breadcrumb.focusForeground #090909
breadcrumb.foreground #666666
breadcrumbPicker.background #ffffff
button.background #171717
button.foreground #ffffff
button.hoverBackground #171717
button.secondaryBackground #00000012
button.secondaryForeground #666666
button.secondaryHoverBackground #cccccc
checkbox.background #ffffff
checkbox.border #cccccc
commandCenter.activeBackground #00000012
commandCenter.activeBorder #ebebeb
commandCenter.background #ffffff
commandCenter.border #ebebeb
commandCenter.debuggingBackground #00000012
commandCenter.inactiveBorder #ebebeb
debugToolBar.background #ffffff
descriptionForeground #090909
diffEditor.insertedTextBackground #086e1412
diffEditor.removedTextBackground #c6212812
dropdown.background #ffffff
dropdown.border #cccccc
dropdown.foreground #666666
dropdown.listBackground #ffffff
editor.background #ffffff
editor.findMatchBackground #00000024
editor.findMatchHighlightBackground #00000012
editor.focusedStackFrameHighlightBackground #cccccc
editor.foldBackground #00000012
editor.foreground #090909
editor.inactiveSelectionBackground #00000008
editor.lineHighlightBackground #00000006
editor.lineHighlightBorder #00000012
editor.linkedEditingBackground #00000012
editor.selectionBackground #00000012
editor.selectionHighlightBackground #00000012
editor.selectionHighlightBorder #00000012
editor.stackFrameHighlightBackground #9e520025
editor.wordHighlightBackground #00000012
editor.wordHighlightBorder #ffffff00
editor.wordHighlightStrongBackground #ffffff00
editor.wordHighlightStrongBorder #ffffff00
editorBracketMatch.background #00000012
editorBracketMatch.border #ffffff00
editorCursor.foreground #090909
editorGroup.border #ebebeb
editorGroupHeader.tabsBackground #ffffff
editorGroupHeader.tabsBorder #ebebeb
editorGutter.addedBackground #086e14
editorGutter.deletedBackground #c62128
editorGutter.modifiedBackground #9e5200
editorHoverWidget.background #ffffff
editorHoverWidget.foreground #666666
editorIndentGuide.activeBackground1 #ebebeb
editorIndentGuide.background1 #ebebeb
editorInlayHint.background #ffffff
editorInlayHint.foreground #666666
editorLineNumber.activeForeground #666666
editorLineNumber.foreground #a8a8a8
editorOverviewRuler.border #ffffff
editorOverviewRuler.errorForeground #c62128
editorRuler.foreground #ebebeb
editorWhitespace.foreground #a8a8a8
editorWidget.background #ffffff
editorWidget.border #cccccc
errorForeground #c62128
errorLens.errorBackground #c6212812
errorLens.errorBackgroundLight #c6212812
errorLens.errorForeground #c62128
errorLens.errorForegroundLight #c62128
errorLens.hintBackground #005ee912
errorLens.hintBackgroundLight #005ee912
errorLens.hintForeground #005ee9
errorLens.hintForegroundLight #005ee9
errorLens.infoBackground #005ee912
errorLens.infoBackgroundLight #005ee912
errorLens.infoForeground #005ee9
errorLens.infoForegroundLight #005ee9
errorLens.warningBackground #9e520012
errorLens.warningBackgroundLight #9e520012
errorLens.warningForeground #9e520012
errorLens.warningForegroundLight #9e5200
focusBorder #ffffff00
foreground #666666
gitDecoration.addedResourceForeground #086e14
gitDecoration.conflictingResourceForeground #9e5200
gitDecoration.deletedResourceForeground #c62128
gitDecoration.ignoredResourceForeground #bbbbbb
gitDecoration.modifiedResourceForeground #9e5200
gitDecoration.submoduleResourceForeground #090909
gitDecoration.untrackedResourceForeground #086e14
icon.foreground #666666
input.background #ffffff
input.border #cccccc
input.foreground #666666
input.placeholderForeground #666666
list.activeSelectionBackground #00000012
list.activeSelectionForeground #090909
list.errorForeground #c62128
list.focusBackground #00000012
list.focusForeground #090909
list.highlightForeground #090909
list.hoverBackground #00000012
list.hoverForeground #090909
list.inactiveFocusBackground #00000012
list.inactiveSelectionBackground #00000012
list.inactiveSelectionForeground #666666
list.warningForeground #9e5200
minimap.selectionHighlight #00000012
notificationCenterHeader.background #ffffff
notificationCenterHeader.foreground #666666
notifications.background #ffffff
notifications.border #cccccc
notifications.foreground #090909
notificationsErrorIcon.foreground #c62128
notificationsInfoIcon.foreground #005ee9
notificationsWarningIcon.foreground #9e5200
panel.background #ffffff
panel.border #ebebeb
panelInput.border #cccccc
panelTitle.activeBorder #171717
panelTitle.activeForeground #090909
panelTitle.inactiveForeground #666666
peekView.border #cccccc
peekViewEditor.background #ffffff
peekViewEditor.matchHighlightBackground #9e520012
peekViewResult.background #ffffff
peekViewResult.matchHighlightBackground #9e520012
peekViewTitle.background #ffffff
pickerGroup.border #cccccc
pickerGroup.foreground #090909
progressBar.background #171717
quickInput.background #ffffff
quickInput.foreground #666666
scrollbar.shadow #ffffff00
scrollbarSlider.activeBackground #00000064
scrollbarSlider.background #00000032
scrollbarSlider.hoverBackground #00000064
selection.background #cccccc
settings.headerForeground #090909
settings.modifiedItemIndicator #171717
sideBar.background #ffffff
sideBar.border #ebebeb
sideBar.foreground #666666
sideBarSectionHeader.background #ffffff
sideBarSectionHeader.border #ebebeb
sideBarSectionHeader.foreground #666666
sideBarTitle.foreground #666666
statusBar.background #ffffff
statusBar.border #ebebeb
statusBar.debuggingBackground #171717
statusBar.debuggingForeground #ffffff
statusBar.foreground #666666
statusBar.noFolderBackground #ffffff
statusBarItem.prominentBackground #ffffff
tab.activeBackground #ffffff
tab.activeBorder #ffffff
tab.activeBorderTop #171717
tab.activeForeground #666666
tab.border #ebebeb
tab.hoverBackground #ffffff
tab.inactiveBackground #ffffff
tab.inactiveForeground #666666
tab.unfocusedActiveBorder #ffffff
tab.unfocusedActiveBorderTop #ffffff
tab.unfocusedHoverBackground #ffffff
terminal.ansiBlack #090909
terminal.ansiBlue #1749bd
terminal.ansiBrightBlack #666666
terminal.ansiBrightBlue #1749bd
terminal.ansiBrightCyan #027d70
terminal.ansiBrightGreen #086e14
terminal.ansiBrightMagenta #a31d8d
terminal.ansiBrightRed #c62128
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #9e5200
terminal.ansiCyan #027d70
terminal.ansiGreen #086e14
terminal.ansiMagenta #a31d8d
terminal.ansiRed #c62128
terminal.ansiWhite #cccccc
terminal.ansiYellow #9e5200
terminal.foreground #090909
terminal.selectionBackground #cccccc
textBlockQuote.background #ffffff
textBlockQuote.border #090909
textCodeBlock.background #ffffff
textLink.activeForeground #1d61ba
textLink.foreground #1d61ba
textPreformat.foreground #090909
textSeparator.foreground #666666
titleBar.activeBackground #ffffff
titleBar.activeForeground #666666
titleBar.border #ebebeb
titleBar.inactiveBackground #ffffff
titleBar.inactiveForeground #666666
tree.indentGuidesStroke #ebebeb string, string.quoted #086e14 —
entity.name.type, entity.name.class, support.type, entity.name.tag, support.class.component #1749bd —
variable.parameter, variable.other, punctuation, meta.delimiter #090909 —
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 } ! ` ;
}
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
src
components
fetchUser.ts
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...
main*
Button.tsx
fetchUser
31
~/my-project
$
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 } ! ` ;
}
Fleet Light Theme | Coding Theme