Skip to main content
Home Theme VS Code Quiet Canvas Minimal, quiet, and distraction-less theme for VS Code
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.activeBackground #00000000 activityBar.background #fcfcfd activityBar.border #00000000 activityBar.foreground #1c2024 activityBar.inactiveForeground #8b8d98 activityBarBadge.background #86ead4 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #8b8d98 italic keyword, storage.type, storage.modifier #60646c — variable, string, punctuation.definition.variable #1c2024 — constant.numeric, constant.language, constant.character, constant.other #1c2024 — entity.name.type, entity.name.class, support.type, support.class
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Quiet Canvas — Quiet Canvas — Light Quiet Canvas | Coding Theme
activityBarBadge.foreground #000000
badge.background #86ead4
badge.foreground #000000
breadcrumb.activeSelectionForeground #7e808a
breadcrumb.background #fcfcfd
breadcrumb.focusForeground #7e808a
breadcrumb.foreground #8b8d98
button.background #86ead4
button.foreground #000000
button.hoverBackground #7fe1cc
button.secondaryBackground #f2f2f5
button.secondaryForeground #1c2024
button.secondaryHoverBackground #ebebef
checkbox.background #f2f2f5
checkbox.border #d3d4db
checkbox.foreground #60646c
debugExceptionWidget.background #f9f9fb
debugExceptionWidget.border #dddde3
debugToolBar.background #f9f9fb
debugToolBar.border #dddde3
diffEditor.border #00000000
diffEditor.insertedTextBackground #ccebd7
diffEditor.insertedTextBorder #00000000
diffEditor.removedTextBackground #fdd8d8
diffEditor.removedTextBorder #00000000
dropdown.background #f2f2f5
dropdown.border #d3d4db
dropdown.foreground #60646c
editor.background #fcfcfd
editor.findMatchBackground #ccf7ec
editor.findMatchBorder #00000000
editor.findMatchHighlightBackground #ccf7ec
editor.findMatchHighlightBorder #87d0bf
editor.findRangeHighlightBackground #ddfbf3
editor.findRangeHighlightBorder #00000000
editor.foldBackground #f2f2f5
editor.foreground #7e808a
editor.hoverHighlightBackground #ccf7ec
editor.inactiveSelectionBackground #f2f2f5
editor.lineHighlightBackground #f2f2f5
editor.lineHighlightBorder #d3d4db
editor.rangeHighlightBackground #ccf7ec
editor.rangeHighlightBorder #00000000
editor.selectionBackground #ebebef
editor.selectionHighlightBackground #ebebef
editor.selectionHighlightBorder #87d0bf
editor.wordHighlightBackground #ccf7ec
editor.wordHighlightBorder #87d0bf
editor.wordHighlightStrongBackground #345364b8
editor.wordHighlightStrongBorder #51bda7
editorBracketMatch.background #ebebef
editorBracketMatch.border #00000000
editorCodeLens.foreground #8b8d98
editorCursor.background #fcfcfd
editorCursor.foreground #1c2024
editorError.background #00000000
editorError.border #00000000
editorError.foreground #c62a2f
editorGroup.border #00000000
editorGroup.emptyBackground #fcfcfd
editorGroupHeader.tabsBackground #fcfcfd
editorGroupHeader.tabsBorder #00000000
editorGutter.addedBackground #30a46c
editorGutter.background #fcfcfd
editorGutter.commentRangeForeground #8b8d98
editorGutter.deletedBackground #e5484d
editorGutter.foldingControlForeground #b9bbc6
editorGutter.modifiedBackground #0091ff
editorHoverWidget.background #f2f2f5
editorHoverWidget.border #d3d4db
editorHoverWidget.foreground #60646c
editorIndentGuide.activeBackground1 #00000000
editorIndentGuide.background1 #00000000
editorInfo.background #00000000
editorInfo.border #00000000
editorInfo.foreground #0b68cb
editorLineNumber.activeForeground #1c2024
editorLineNumber.foreground #b9bbc6
editorLink.activeForeground #27756a
editorMarkerNavigation.background #f9f9fb
editorMarkerNavigationError.background #e5484d
editorMarkerNavigationInfo.background #0091ff
editorMarkerNavigationWarning.background #fbe32d
editorOverviewRuler.background #fcfcfd
editorOverviewRuler.border #00000000
editorRuler.foreground #f2f2f5
editorSuggestWidget.background #f2f2f5
editorSuggestWidget.border #d3d4db
editorSuggestWidget.foreground #60646c
editorSuggestWidget.highlightForeground #27756a
editorSuggestWidget.selectedBackground #e4e4e9
editorWarning.background #00000000
editorWarning.border #00000000
editorWarning.foreground #775f28
editorWhitespace.foreground #e3e4e229
editorWidget.background #fcfcfd
editorWidget.foreground #60646c
editorWidget.resizeBorder #86ead4
focusBorder #51bda7
foreground #60646c
gitDecoration.addedResourceForeground #18794e
gitDecoration.conflictingResourceForeground #c794f9
gitDecoration.deletedResourceForeground #c62a2f
gitDecoration.ignoredResourceForeground #8b8d98
gitDecoration.modifiedResourceForeground #775f28
gitDecoration.stageDeletedResourceForeground #c62a2f
gitDecoration.stageModifiedResourceForeground #775f28
gitDecoration.submoduleResourceForeground #0b68cb
gitDecoration.untrackedResourceForeground #18794e
icon.foreground #60646c
input.background #f2f2f5
input.border #d3d4db
input.foreground #60646c
input.placeholderForeground #8b8d98
inputOption.activeBackground #bbeee2
inputOption.activeBorder #51bda7
inputOption.activeForeground #27756a
list.activeSelectionBackground #e4e4e9
list.activeSelectionForeground #1c2024
list.dropBackground #ebebef
list.focusBackground #e4e4e9
list.focusForeground #ff3434
list.highlightForeground #27756a
list.hoverBackground #ebebef
list.hoverForeground #1c2024
list.inactiveSelectionBackground #f2f2f5
list.inactiveSelectionForeground #60646c
listFilterWidget.background #f2f2f5
listFilterWidget.noMatchesOutline #f3aeaf
listFilterWidget.outline #d3d4db
menu.background #f9f9fb
menu.border #00000000
menu.foreground #60646c
menu.selectionBackground #e4e4e9
menu.selectionBorder #00000000
menu.selectionForeground #1c2024
menu.separatorBackground #dddde3
menubar.selectionBackground #f9f9fb
menubar.selectionBorder #00000000
menubar.selectionForeground #1c2024
merge.commonContentBackground #f2f2f5
merge.commonHeaderBackground #f9f9fb
merge.currentContentBackground #e9f9ee
merge.currentHeaderBackground #f2fcf5
merge.incomingContentBackground #edf6ff
merge.incomingHeaderBackground #f5faff
minimap.background #fcfcfd
minimap.errorHighlight #c62a2f
minimap.findMatchHighlight #ccf7ec
minimap.selectionHighlight #ebebef
minimap.warningHighlight #775f28
minimapGutter.addedBackground #30a46c
minimapGutter.deletedBackground #e5484d
minimapGutter.modifiedBackground #0091ff
notificationCenter.border #dddde3
notificationCenterHeader.background #fcfcfd
notificationCenterHeader.foreground #843333
notifications.background #f9f9fb
notifications.border #dddde3
notifications.foreground #60646c
notificationsErrorIcon.foreground #e5484d
notificationsInfoIcon.foreground #0091ff
notificationsWarningIcon.foreground #fbe32d
notificationToast.border #dddde3
panel.background #fcfcfd
panel.border #00000000
panelSection.border #00000000
panelTitle.activeBorder #00000000
panelTitle.activeForeground #1c2024
panelTitle.inactiveForeground #8b8d98
peekView.border #d3d4db
peekViewEditor.background #f9f9fb
peekViewEditor.matchHighlightBackground #ccf7ec
peekViewEditor.matchHighlightBorder #87d0bf
peekViewEditorGutter.background #fcfcfd
peekViewResult.background #f9f9fb
peekViewResult.fileForeground #60646c
peekViewResult.lineForeground #1c2024
peekViewResult.matchHighlightBackground #ccf7ec
peekViewResult.selectionBackground #e4e4e9
peekViewResult.selectionForeground #6f1919
peekViewTitle.background #fcfcfd
peekViewTitleDescription.foreground #60646c
peekViewTitleLabel.foreground #1c2024
pickerGroup.border #dddde3
pickerGroup.foreground #27756a
progressBar.background #86ead4
scrollbar.shadow #00000022
scrollbarSlider.activeBackground #e4e4e9
scrollbarSlider.background #f2f2f5
scrollbarSlider.hoverBackground #646464b3
selection.background #ebebef
settings.focusedRowBackground #ffffff07
settings.headerForeground #60646c
sideBar.background #fcfcfd
sideBar.border #00000000
sideBar.dropBackground #ebebef
sideBar.foreground #60646c
sideBarSectionHeader.background #00000000
sideBarSectionHeader.border #00000000
sideBarSectionHeader.foreground #60646c
sideBarTitle.foreground #60646c
statusBar.background #fcfcfd
statusBar.border #fcfcfd
statusBar.debuggingBackground #1c2024
statusBar.debuggingBorder #fcfcfd
statusBar.debuggingForeground #fcfcfd
statusBar.foreground #60646c
statusBar.noFolderBackground #68217a
statusBar.noFolderBorder #fcfcfd
statusBar.noFolderForeground #60646c
statusBarItem.activeBackground #FFFFFF25
statusBarItem.hoverBackground #ebebef
statusBarItem.remoteBackground #86ead4
statusBarItem.remoteForeground #000000
tab.activeBackground #fcfcfd
tab.activeBorder #00000000
tab.activeBorderTop #00000000
tab.activeForeground #1c2024
tab.border #00000000
tab.hoverBackground #00000000
tab.hoverBorder #00000000
tab.hoverForeground #1c2024
tab.inactiveBackground #fcfcfd
tab.inactiveForeground #8b8d98
terminal.ansiBlack #ebebef
terminal.ansiBlue #5eb0ef
terminal.ansiBrightBlack #dddde3
terminal.ansiBrightBlue #0b68cb
terminal.ansiBrightCyan #0c7792
terminal.ansiBrightGreen #18794e
terminal.ansiBrightMagenta #c41c87
terminal.ansiBrightRed #c62a2f
terminal.ansiBrightWhite #1c2024
terminal.ansiBrightYellow #775f28
terminal.ansiCyan #3db9cf
terminal.ansiGreen #5bb98c
terminal.ansiMagenta #e38ec3
terminal.ansiRed #eb9091
terminal.ansiWhite #60646c
terminal.ansiYellow #c9aa45
terminal.border #00000000
terminal.foreground #60646c
terminal.selectionBackground #ebebef
terminalCursor.background #8b8d98
terminalCursor.foreground #1c2024
textLink.foreground #27756a
titleBar.activeBackground #fcfcfd
titleBar.activeForeground #8b8d98
titleBar.border #00000000
titleBar.inactiveBackground #fcfcfd
titleBar.inactiveForeground #60646c
tree.indentGuidesStroke #00000000
walkThrough.embeddedEditorBackground #00000050
widget.shadow #0000002b entity.name.function, support.function, punctuation.definition.function #27756a —
markup.heading #1c2024 bold
markup.italic #1c2024 italic
markup.underline.link #27756a underline
entity.name.tag.yaml #27756a —
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
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 }!` ;
}