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.activeBackground #ffffff00 activityBar.background #f7f7f5 activityBar.border #dededc activityBar.foreground #37352f activityBar.inactiveForeground #777572 activityBarBadge.background #f04842 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #777572 italic comment.block.preprocessor #777572 comment.documentation, comment.block.documentation, string.quoted.docstring.multi.python #007b28 italic invalid.illegal #a7251c — keyword.operator
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Notion Like Theme (Light) — NotionLikeTheme
activityBarBadge.foreground
#ffffff
badge.background #f04842
badge.foreground #ffffff
breadcrumb.background #ffffff
breadcrumb.focusForeground #37352f
breadcrumb.foreground #55534e
button.background #f7f7f5
button.border #dededc
button.foreground #37352f
button.hoverBackground #e8e8e6
button.secondaryBackground #55534e
button.secondaryForeground #ffffff
button.secondaryHoverBackground #37352f
debugToolBar.background #f7f7f5
debugToolBar.border #dededc
diffEditor.border #dededc
diffEditor.insertedTextBackground #e5fee9dd
diffEditor.insertedTextBorder #ffffff00
diffEditor.removedTextBackground #ffe1d5dd
diffEditor.removedTextBorder #ffffff00
editor.background #ffffff
editor.findMatchBackground #f2b82833
editor.findMatchBorder #ffffff00
editor.findMatchHighlightBackground #f2b82833
editor.findMatchHighlightBorder #f2b82899
editor.findRangeHighlightBackground #ee000d33
editor.findRangeHighlightBorder #ee000d99
editor.foldBackground #eafbffdd
editor.hoverHighlightBackground #f2b82833
editor.inactiveSelectionBackground #e7f3f899
editor.lineHighlightBackground #e8e8e6
editor.lineHighlightBorder #ffffff00
editor.rangeHighlightBackground #f2b82833
editor.rangeHighlightBorder #f9e6b1
editor.selectionBackground #eafbff
editor.selectionHighlightBackground #eafbff99
editor.selectionHighlightBorder #ffffff00
editor.wordHighlightBackground #ee000d33
editor.wordHighlightBorder #f9a3a8
editor.wordHighlightStrongBackground #ee000d33
editor.wordHighlightStrongBorder #ffffff00
editorBracketHighlight.foreground1 #d44c47
editorBracketHighlight.foreground2 #337ea9
editorBracketHighlight.foreground3 #448361
editorBracketHighlight.foreground4 #cb912f
editorBracketHighlight.foreground5 #9065b0
editorBracketHighlight.foreground6 #d9730d
editorBracketMatch.background #ffffff00
editorBracketMatch.border #777572
editorCodeLens.foreground #37352f
editorCursor.background #ffffff
editorCursor.foreground #37352f
editorError.background #ffffff00
editorError.border #ffffff00
editorError.foreground #ee000d
editorGroup.border #dededc
editorGroupHeader.border #ffffff00
editorGroupHeader.tabsBackground #f7f7f5
editorGroupHeader.tabsBorder #dededc
editorGutter.addedBackground #5ecc0c
editorGutter.background #ffffff
editorGutter.deletedBackground #ee000d
editorGutter.foldingControlForeground #37352f
editorGutter.modifiedBackground #f2b828
editorHint.border #ffffff00
editorHint.foreground #48ca80
editorHoverWidget.background #f7f7f5
editorHoverWidget.border #dededc
editorHoverWidget.foreground #37352f
editorIndentGuide.activeBackground1 #d44c47
editorIndentGuide.activeBackground2 #337ea9
editorIndentGuide.activeBackground3 #448361
editorIndentGuide.activeBackground4 #cb912f
editorIndentGuide.activeBackground5 #9065b0
editorIndentGuide.activeBackground6 #d9730d
editorIndentGuide.background1 #777572
editorIndentGuide.background2 #777572
editorIndentGuide.background3 #777572
editorIndentGuide.background4 #777572
editorIndentGuide.background5 #777572
editorIndentGuide.background6 #777572
editorInfo.background #ffffff00
editorInfo.border #ffffff00
editorInfo.foreground #32a5e4
editorLineNumber.activeForeground #37352f
editorLineNumber.foreground #777572
editorLink.activeForeground #4c6cc5
editorMarkerNavigation.background #ffffff
editorMarkerNavigationError.background #ee000d
editorMarkerNavigationInfo.background #32a5e4
editorMarkerNavigationWarning.background #f2b828
editorOverviewRuler.background #ffffff
editorOverviewRuler.border #ffffff00
editorRuler.foreground #ffffff00
editorSuggestWidget.background #f7f7f5
editorSuggestWidget.border #dededc
editorSuggestWidget.foreground #37352f
editorSuggestWidget.highlightForeground #4c6cc5
editorSuggestWidget.selectedBackground #eafbff
editorWarning.background #ffffff00
editorWarning.border #ffffff00
editorWarning.foreground #f2b828
editorWhitespace.foreground #777572
editorWidget.foreground #37352f
editorWidget.resizeBorder #777572
focusBorder #dededc
foreground #37352f
gitDecoration.addedResourceForeground #5ecc0c
gitDecoration.conflictingResourceForeground #7733d2
gitDecoration.deletedResourceForeground #ee000d
gitDecoration.ignoredResourceForeground #a6a299
gitDecoration.modifiedResourceForeground #d09300
gitDecoration.renamedResourceForeground #f2b828
gitDecoration.stageDeletedResourceForeground #ee000d
gitDecoration.stageModifiedResourceForeground #d09300
gitDecoration.submoduleResourceForeground #4c6cc5
gitDecoration.untrackedResourceForeground #007b28
input.background #ffffff
input.border #dededc
input.foreground #37352f
input.placeholderForeground #777572
inputOption.activeBackground #f7f7f5
inputOption.activeBorder #dededc
inputOption.activeForeground #37352f
list.activeSelectionBackground #e6e6e3
list.activeSelectionForeground #37352f
list.dropBackground #eafbff
list.focusBackground #eafbff
list.focusForeground #37352f
list.highlightForeground #4c6cc5
list.hoverBackground #efefed
list.hoverForeground #37352f
list.inactiveFocusBackground #e8e8e6
list.inactiveSelectionBackground #efeeee
list.inactiveSelectionForeground #37352f
listFilterWidget.background #f7f7f5
listFilterWidget.noMatchesOutline #f04842
listFilterWidget.outline #ffffff00
menu.background #ffffff
menu.border #dededc
menu.foreground #37352f
menu.selectionBackground #e8e8e6
menu.selectionBorder #dededc
menu.selectionForeground #37352f
menu.separatorBackground #dededc
menubar.selectionBackground #e8e8e6
menubar.selectionBorder #dededc
menubar.selectionForeground #37352f
merge.commonContentBackground #f1f1ef99
merge.commonHeaderBackground #a6a29999
merge.currentContentBackground #e5fee999
merge.currentHeaderBackground #edf3ec99
merge.incomingContentBackground #eafbff99
merge.incomingHeaderBackground #e7f3f899
notebook.cellBorderColor #ffffff00
notebook.cellEditorBackground #f7f7f5
notebook.focusedCellBorder #777572
notebook.focusedEditorBorder #ffffff00
notebook.selectedCellBackground #eafbff
notificationCenter.border #dededc
notificationCenterHeader.background #e8e8e6
notificationCenterHeader.foreground #37352f
notifications.background #f7f7f5
notifications.border #dededc
notifications.foreground #37352f
notificationsErrorIcon.foreground #ee000d
notificationsInfoIcon.foreground #32a5e4
notificationsWarningIcon.foreground #f2b828
notificationToast.border #dededc
outputView.background #ffffff
panel.background #f7f7f5
panel.border #dededc
panelTitle.activeBorder #37352f
panelTitle.activeForeground #37352f
panelTitle.inactiveForeground #37352f
peekView.border #dededc
peekViewEditor.background #ffffff
peekViewEditor.matchHighlightBackground #fff5d0
peekViewEditor.matchHighlightBorder #f2b828
peekViewEditorGutter.background #f7f7f5
peekViewResult.background #ffffff
peekViewResult.fileForeground #37352f
peekViewResult.lineForeground #37352f
peekViewResult.matchHighlightBackground #fff5d0
peekViewResult.selectionBackground #eafbff
peekViewResult.selectionForeground #4c6cc5
peekViewTitle.background #f7f7f5
peekViewTitleDescription.foreground #777572
peekViewTitleLabel.foreground #37352f
pickerGroup.border #dededc
pickerGroup.foreground #4c6cc5
progressBar.background #37352f
scrollbar.shadow #ffffff
scrollbarSlider.activeBackground #e6e6e3
scrollbarSlider.background #d3d1cbdd
scrollbarSlider.hoverBackground #efefed
selection.background #e7f3f8
sideBar.background #ffffff
sideBar.border #dededc
sideBar.foreground #37352f
sideBarSectionHeader.background #ffffff
sideBarSectionHeader.border #dededc
sideBarSectionHeader.foreground #37352f
sideBarTitle.background #ffffff
sideBarTitle.foreground #37352f
statusBar.background #f7f7f5
statusBar.border #dededc
statusBar.debuggingBackground #f2b828
statusBar.debuggingBorder #dededc
statusBar.debuggingForeground #ffffff
statusBar.foreground #37352f
statusBar.noFolderBackground #9950ff
statusBar.noFolderBorder #dededc
statusBar.noFolderForeground #ffffff
statusBarItem.hoverBackground #efefed
statusBarItem.remoteBackground #55534e
statusBarItem.remoteForeground #ffffff
tab.activeBackground #ffffff
tab.activeBorder #ffffff00
tab.activeBorderTop #37352f
tab.activeForeground #37352f
tab.border #dededc
tab.hoverBackground #efefed
tab.hoverBorder #dededc
tab.hoverForeground #777572
tab.inactiveBackground #e8e8e6
tab.inactiveForeground #55534e
terminal.ansiBlack #37352f
terminal.ansiBlue #4c6cc5
terminal.ansiBrightBlack #37352f
terminal.ansiBrightBlue #4c6cc5
terminal.ansiBrightCyan #32a5e4
terminal.ansiBrightGreen #007b28
terminal.ansiBrightMagenta #c14c8a
terminal.ansiBrightRed #a7251c
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #d09300
terminal.ansiCyan #32a5e4
terminal.ansiGreen #007b28
terminal.ansiMagenta #c14c8a
terminal.ansiRed #a7251c
terminal.ansiWhite #f7f7f5
terminal.ansiYellow #d09300
terminal.background #ffffff
terminal.border #dededc
terminal.foreground #37352f
terminal.selectionBackground #eafbff
terminal.selectionForeground #4c6cc5
terminalCursor.background #f7f7f5
terminalCursor.foreground #55534e
textLink.foreground #4c6cc5
titleBar.activeBackground #f7f7f5
titleBar.activeForeground #37352f
titleBar.border #dededc
titleBar.inactiveBackground #f7f7f5
titleBar.inactiveForeground #37352f
tree.indentGuidesStroke #dededc
widget.shadow #ffffff00 keyword, storage.type.function.python, storage.type.class.python #32a5e4 —
storage.type.class #32a5e4 bold
storage.type, support.type #d09300 —
constant.other.caps.python #48ca80 bold
constant.language, support.constant, variable.language, storage.modifier.const.cs #48ca80 —
variable, support.variable #7733d2 —
entity.name.function, support.function #ee000d —
meta.attribute.python #9065b0 —
meta.function-call.generic.python #d44c47 —
entity.name.type, entity.other.inherited-class, support.class, entity.name.type.class.python #ee000d bold
entity.name.exception #a7251c —
constant.numeric, constant.character, constant #d09300 —
constant.character.escape #37352f —
constant.other.symbol #d09300 —
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html #777572 —
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html #f2b828 —
meta.tag entity.other.attribute-name, entity.other.attribute-name.html #f2b828 italic
constant.character.entity, punctuation.definition.entity #d09300 —
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css #7733d2 —
meta.property-name, support.type.property-name #d09300 —
meta.property-value, meta.property-value constant.other, support.constant.property-value #007b28 —
keyword.other.important — bold
markup.output, markup.raw #37352f —
markup.underline — underline
markup.bold, markup.italic #007b28 —
keyword.operator.expression.new.cs — bold
keyword.preprocessor.region.cs, keyword.preprocessor.endregion.cs #c14c8a bold
meta.diff.range, meta.diff.index, meta.separator #434343 —
meta.diff.header.from-file #434343 —
meta.diff.header.to-file #434343 —
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 } ! ` ;
}
Notion Like Theme (Light) | Coding Theme