Skip to main content
Home Theme VS Code Next.js Docs Code Theme The Beautiful theme used in code blocks of Next.js Docs by Vercel
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 #0078d4 activityBar.background #000000 activityBar.border #2e2e2e activityBar.foreground #ededed activityBar.inactiveForeground #a0a0a0 activityBarBadge.background #5cc2b2 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment #888888 — comment.block.documentation, comment.block.documentation variable.other #888888 — comment.block.documentation entity.name.type #43AAF9 — comment.block.documentation storage.type #DCE3EA — string, punctuation.definition.string.template
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Next.js Docs Code Theme — Next.js Docs Code Theme
activityBarBadge.foreground
#000000
badge.background #5cc2b2
badge.foreground #000000
breadcrumb.activeSelectionForeground #ededed
breadcrumb.background #0a0a0a
breadcrumb.focusForeground #ededed
breadcrumb.foreground #a0a0a0
button.background #5cc2b2
button.border #ffffff12
button.foreground #000000
button.hoverBackground #5cc2b2bb
button.secondaryBackground #3a3d41
button.secondaryForeground #ffffff
button.secondaryHoverBackground #45494e
checkbox.background #3c3c3c
checkbox.border #00000000
checkbox.foreground #cccccc
debugExceptionWidget.background #000000
debugExceptionWidget.border #2e2e2e
debugToolBar.background #000000
debugToolBar.border #2e2e2e
descriptionForeground #8b949e
diffEditor.border #444444
diffEditor.insertedLineBackground #23863633
diffEditor.insertedTextBackground #9bb95533
diffEditor.removedLineBackground #da363333
diffEditor.removedTextBackground #ff000033
dropdown.background #3c3c3c
dropdown.border #00000000
dropdown.foreground #cccccc
dropdown.listBackground #313131
editor.background #0a0a0a
editor.findMatchBackground #515c6a
editor.findMatchBorder #4598f7
editor.findMatchHighlightBackground #ea5c0055
editor.findMatchHighlightBorder #ffffff00
editor.findRangeHighlightBackground #3a3d4166
editor.findRangeHighlightBorder #ffffff00
editor.foldBackground #264f784d
editor.foreground #ededed
editor.hoverHighlightBackground #264f7840
editor.inactiveSelectionBackground #3a3d41
editor.lineHighlightBackground #ffffff0a
editor.lineHighlightBorder #282828
editor.rangeHighlightBackground #ffffff0b
editor.rangeHighlightBorder #ffffff00
editor.selectionBackground #ffffff24
editor.selectionHighlightBackground #add6ff26
editor.selectionHighlightBorder #495f77
editor.wordHighlightBackground #575757b8
editor.wordHighlightStrongBackground #004972b8
editorBracketHighlight.foreground1 #dce3ea
editorBracketHighlight.foreground2 #dce3ea
editorBracketHighlight.foreground3 #dce3ea
editorBracketMatch.background #0064001a
editorBracketMatch.border #888888
editorCodeLens.foreground #999999
editorCursor.background #000000
editorCursor.foreground #aeafad
editorError.background #b73a3400
editorError.border #ffffff00
editorError.foreground #f48771
editorGroup.border #444444
editorGroup.emptyBackground #0a0a0a
editorGroupHeader.tabsBackground #0a0a0a
editorGroupHeader.tabsBorder #ffffff15
editorGutter.addedBackground #587c0c
editorGutter.background #0a0a0a
editorGutter.commentRangeForeground #c5c5c5
editorGutter.deletedBackground #94151b
editorGutter.foldingControlForeground #c5c5c5
editorGutter.modifiedBackground #0c7d9d
editorHoverWidget.background #000000
editorHoverWidget.border #2e2e2e
editorHoverWidget.foreground #a0a0a0
editorIndentGuide.activeBackground1 #707070
editorIndentGuide.background1 #2e2e2e
editorInfo.background #4490bf00
editorInfo.border #4490bf00
editorInfo.foreground #75beff
editorInlayHint.background #8b949e33
editorInlayHint.foreground #8b949e
editorInlayHint.typeBackground #8b949e33
editorInlayHint.typeForeground #8b949e
editorLineNumber.activeForeground #c6c6c6
editorLineNumber.foreground #858585
editorLink.activeForeground #4e94ce
editorMarkerNavigation.background #000000
editorMarkerNavigationError.background #f48771
editorMarkerNavigationInfo.background #75beff
editorMarkerNavigationWarning.background #cca700
editorOverviewRuler.background #25252500
editorOverviewRuler.border #7f7f7f4d
editorRuler.foreground #5a5a5a
editorSuggestWidget.background #000000
editorSuggestWidget.border #2e2e2e
editorSuggestWidget.foreground #a0a0a0
editorSuggestWidget.highlightForeground #5cc2b2
editorSuggestWidget.selectedBackground #282828
editorWarning.background #a9904000
editorWarning.border #ffffff00
editorWarning.foreground #cca700
editorWhitespace.foreground #e3e4e229
editorWidget.background #000000
editorWidget.foreground #a0a0a0
editorWidget.resizeBorder #2e2e2e
errorForeground #f85149
focusBorder #5cc2b2
foreground #a0a0a0
gitDecoration.addedResourceForeground #40c458
gitDecoration.conflictingResourceForeground #8484f5
gitDecoration.deletedResourceForeground #f04343
gitDecoration.ignoredResourceForeground #777777
gitDecoration.modifiedResourceForeground #fdca7d
gitDecoration.stageDeletedResourceForeground #f04343
gitDecoration.stageModifiedResourceForeground #fdca7d
gitDecoration.submoduleResourceForeground #60adf5
gitDecoration.untrackedResourceForeground #99dbb0
icon.foreground #a0a0a0
input.background #3c3c3c
input.border #00000000
input.foreground #cccccc
input.placeholderForeground #a6a6a6
inputOption.activeBackground #ffffff24
inputOption.activeBorder #007acc00
inputOption.activeForeground #ffffff
keybindingLabel.foreground #cccccc
list.activeSelectionBackground #ffffff24
list.activeSelectionForeground #ededed
list.activeSelectionIconForeground #ffffff
list.dropBackground #ffffff12
list.focusBackground #ffffff24
list.focusForeground #ededed
list.highlightForeground #5cc2b2
list.hoverBackground #ffffff12
list.hoverForeground #ededed
list.inactiveSelectionBackground #ffffff12
list.inactiveSelectionForeground #ededed
listFilterWidget.background #2e2e2e
listFilterWidget.noMatchesOutline #ff2424
listFilterWidget.outline #5cc2b2
menu.background #000000
menu.border #2e2e2e
menu.foreground #a0a0a0
menu.selectionBackground #ffffff12
menu.selectionBorder #00000000
menu.selectionForeground #ededed
menu.separatorBackground #2e2e2e
menubar.selectionBackground #ffffff12
menubar.selectionBorder #2e2e2e
menubar.selectionForeground #ededed
merge.commonContentBackground #282828
merge.commonHeaderBackground #383838
merge.currentContentBackground #27403b
merge.currentHeaderBackground #367366
merge.incomingContentBackground #28384b
merge.incomingHeaderBackground #395f8f
minimap.background #0a0a0a
minimap.errorHighlight #f48771
minimap.findMatchHighlight #515c6a
minimap.selectionHighlight #ffffff24
minimap.warningHighlight #cca700
minimapGutter.addedBackground #587c0c
minimapGutter.deletedBackground #94151b
minimapGutter.modifiedBackground #0c7d9d
notificationCenter.border #2e2e2e
notificationCenterHeader.background #000000
notificationCenterHeader.foreground #ededed
notifications.background #000000
notifications.border #2e2e2e
notifications.foreground #a0a0a0
notificationsErrorIcon.foreground #f48771
notificationsInfoIcon.foreground #75beff
notificationsWarningIcon.foreground #cca700
notificationToast.border #2e2e2e
panel.background #000000
panel.border #2e2e2e
panelInput.border #ffffff15
panelSection.border #80808059
panelTitle.activeBorder #e7e7e7
panelTitle.activeForeground #e7e7e7
panelTitle.inactiveForeground #e7e7e799
peekView.border #5cc2b2
peekViewEditor.background #00322a
peekViewEditor.matchHighlightBackground #ff8f0099
peekViewEditor.matchHighlightBorder #ee931e
peekViewEditorGutter.background #00322a
peekViewResult.background #000000
peekViewResult.fileForeground #ededed
peekViewResult.lineForeground #a0a0a0
peekViewResult.matchHighlightBackground #ea5c004d
peekViewResult.selectionBackground #3399ff33
peekViewResult.selectionForeground #ffffff
peekViewTitle.background #00000000
peekViewTitleDescription.foreground #ccccccb3
peekViewTitleLabel.foreground #ffffff
pickerGroup.border #2e2e2e
pickerGroup.foreground #5cc2b2
ports.iconRunningProcessForeground #369432
progressBar.background #5cc2b2
quickInput.background #1f1f1f
quickInput.foreground #cccccc
scrollbar.shadow #000000
scrollbarSlider.activeBackground #bfbfbf66
scrollbarSlider.background #79797966
scrollbarSlider.hoverBackground #646464b3
selection.background #ffffff24
settings.dropdownBackground #313131
settings.dropdownBorder #ffffff1f
settings.focusedRowBackground #ffffff07
settings.headerForeground #a0a0a0
settings.modifiedItemIndicator #bb800966
sideBar.background #000000
sideBar.border #2e2e2e
sideBar.dropBackground #ffffff12
sideBar.foreground #a0a0a0
sideBarSectionHeader.background #00000000
sideBarSectionHeader.border #00000000
sideBarSectionHeader.foreground #ededed
sideBarTitle.foreground #a0a0a0
statusBar.background #000000
statusBar.border #2e2e2e
statusBar.debuggingBackground #cb6308
statusBar.debuggingForeground #ffffff
statusBar.foreground #a0a0a0
statusBar.noFolderBackground #000000
statusBar.noFolderBorder #2e2e2e
statusBar.noFolderForeground #a0a0a0
statusBarItem.activeBackground #ffffff25
statusBarItem.focusBorder #0078d4
statusBarItem.hoverBackground #ffffff12
statusBarItem.prominentBackground #6e768166
statusBarItem.remoteBackground #000000
statusBarItem.remoteForeground #ffffff
tab.activeBackground #000000
tab.activeBorder #00000000
tab.activeBorderTop #00000000
tab.activeForeground #ffffff
tab.border #2e2e2e
tab.hoverBackground #1f1f1f
tab.hoverForeground #ffffff
tab.inactiveBackground #0a0a0a
tab.inactiveForeground #ffffff80
tab.lastPinnedBorder #cccccc33
tab.unfocusedActiveBorder #1f1f1f
tab.unfocusedActiveBorderTop #ffffff15
tab.unfocusedHoverBackground #6e76811a
terminal.ansiBlack #000000
terminal.ansiBlue #2472c8
terminal.ansiBrightBlack #666666
terminal.ansiBrightBlue #3b8eea
terminal.ansiBrightCyan #29b8db
terminal.ansiBrightGreen #23d18b
terminal.ansiBrightMagenta #d670d6
terminal.ansiBrightRed #f14c4c
terminal.ansiBrightWhite #e5e5e5
terminal.ansiBrightYellow #f5f543
terminal.ansiCyan #11a8cd
terminal.ansiGreen #0dbc79
terminal.ansiMagenta #bc3fbc
terminal.ansiRed #cd3131
terminal.ansiWhite #e5e5e5
terminal.ansiYellow #e5e510
terminal.border #80808059
terminal.foreground #cccccc
terminal.inactiveSelectionBackground #3a3d41
terminal.selectionBackground #ffffff40
terminal.tab.activeBorder #0078d4
terminalCursor.background #ffffff24
terminalCursor.foreground #ffffff
textBlockQuote.background #010409
textBlockQuote.border #ffffff14
textCodeBlock.background #6e768166
textLink.activeForeground #40a6ff
textLink.foreground #3794ff
textSeparator.foreground #21262d
titleBar.activeBackground #000000
titleBar.activeForeground #a0a0a0
titleBar.border #2e2e2e
titleBar.inactiveBackground #2e2e2e
titleBar.inactiveForeground #a0a0a0
tree.indentGuidesStroke #2e2e2e
walkThrough.embeddedEditorBackground #00000050
welcomePage.progress.foreground #0078d4
welcomePage.tileBackground #ffffff0f
widget.border #ffffff15
widget.shadow #00000080 constant.language #43AAF9 —
constant.character, constant.other #43AAF9 —
variable.language.this #43AAF9 —
keyword, keyword.operator.new, storage.modifier.async, keyword.operator.less #DD4F7D
punctuation.definition.comment #888888 —
punctuation.definition.tag #DCE3EA —
string.quoted punctuation.definition.string #2fbb70 —
string.regexp, string.regexp punctuation.definition.string #2fbb70 —
entity.name.class #43AAF9 italic
entity.name.function, meta.require, support.function.any-method, variable.function, support.function.builtin.python, meta.function-call.generic.python #d200ee italic
keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.relational, keyword.operator.increment, keyword.operator.decrement, keyword.operator.logical, keyword.operator.comparison, keyword.operator.ternary, keyword.operator.expression #f7017b —
variable.parameter #e9eadc —
source.css.scss, source.css #2fbb70 —
entity.other.attribute-name #d200ee —
support.function, support.variable.dom #d200ee —
invalid.deprecated #E34234 —
meta.diff, meta.diff.header #718493 —
constant.numeric.line-number.find-in-files - match — —
entity.name.filename.find-in-files #E6DB74 —
meta.property-value, support.constant.property-value, constant.other.color #9FBDE0 —
meta.property-value punctuation.separator.key-value #DCE3EA —
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as #DD4F7D —
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin #DD4F7D —
meta.object-literal.key #DD4F7D —
variable.parameter.function.coffee #9FBDE0 —
markup.deleted.git_gutter #E61F44 —
markup.inserted.git_gutter — —
markup.changed.git_gutter #d200ee —
meta.template.expression #9FBDE0 —
variable.other.constant.property, keyword.operator.ternary, keyword.operator.expression.typeof #B267E6 —
entity.name.type, support.type.python #d200ee —
token.error-token #F44747 —
token.debug-token #B267E6 —
entity.name.tag.tsx, entity.name.tag.js.jsx, entity.name.tag.html, entity.name.tag.xml, entity.name.tag.script.html.vue, entity.name.tag.template.html.vue, entity.name.tag.style.html.vue, entity.name.tag.style.html.vue, entity.name.tag.script.html, entity.name.tag.template.html, entity.name.tag.style.html, entity.name.tag.block.any.html #2ed07f —
support.class.component.tsx, support.class.component.jsx #43AAF9 italic
support.type.primitive.tsx, support.type.primitive.ts #43AAF9 —
storage.modifier.tsx #DD4F7D —
entity.other.inherited-class.tsx #d200ee —
meta.object.member variable.other.readwrite.tsx #DCE3EA —
meta.structure.dictionary.json string.quoted.double.json #DCE3EA —
meta.structure.dictionary.value.json string.quoted.double.json #2fbb70 —
meta.structure.dictionary.json, punctuation.definition.string #2fbb70 —
meta.structure.dictionary.json, support.type.property-name.json #DD4F7D —
punctuation.definition.list.begin.markdown, punctuation.definition.list.begin.mdx, punctuation.definition.list.end.markdown, punctuation.definition.list.end.mdx, punctuation.definition.quote.begin.markdown, punctuation.definition.quote.begin.mdx, punctuation.definition.quote.end.markdown, punctuation.definition.quote.end.mdx, meta.separator.markdown, meta.separator.mdx, markup.inline.raw.string.markdown, markup.raw.code.text.mdx #d200ee —
entity.name.section.markdown, entity.name.section.mdx #43AAF9 —
punctuation.definition.heading.markdown, punctuation.definition.heading.mdx #DD4F7D —
markup.raw.inline.markdown, markup.raw.inline.mdx #9FBDE0 —
punctuation.definition..markdown, punctuation.definition..mdx, punctuation.definition.italic.markdown, punctuation.definition.italic.mdx, punctuation.definition.entity #DD4F7D —
punctuation.definition.string.begin.markdown, punctuation.definition.string.begin.mdx, punctuation.definition.string.end.markdown, punctuation.definition.string.end.mdx #DD4F7D —
punctuation.definition.metadata.markdown, punctuation.definition.metadata.mdx #DD4F7D —
markup.underline.link.markdown, markup.underline.link.image.markdown, string.other.link.destination.mdx, meta.image.inline.markdown, meta.image.inline.mdx #DD4F7D —
markup..markdown, string.other.strong.asterisk.mdx, markup.italic.markdown, markup.italic.mdx #DD4F7D —
markup.italic.markdown, markup.italic.mdx — —
markup..markdown, markup..mdx — —
markup.raw.block.markdown, markup.raw.block.mdx #9FBDE0 —
keyword.other.rust #B267E6 —
keyword.other.fn.rust #DD4F7D —
punctuation.section.embedded.begin.php, keyword.other.class.php #DD4F7D —
support.class.php #DCE3EA —
keyword.other.definition.ini #43AAF9 —
support.type.primitive.prisma #d200ee —
support.constant.constant.prisma #DD4F7D —
variable.language.relations.prisma #2fbb70 —
entity.name.tag.yaml #DD4F7D —
keyword.other.package.java, keyword.other.import.java #DD4F7D
storage.modifier.package.java #d200ee —
storage.modifier.import.java #DCE3EA —
punctuation.separator.java #DD4F7D —
keyword.other.declaration-specifier.swift, keyword.other.declaration-specifier.accessibility.swift #DD4F7D
support.type.swift, meta.function-result.swift, variable.language.swift, keyword.operator.custom.infix.swift #43AAF9 —
variable.parameter.function.swift #DCE3EA —
entity.name.function.swift #43AAF9
variable.parameter.function.swift, meta.parameter-clause.swift #DCE3EA —
support.function.go #43AAF9
keyword.operator.address.go, keyword.operator.pointer.go #43AAF9 —
keyword.channel.go #B267E6 —
storage.type.numeric.go, storage.type.string.go, storage.type.error.go, storage.type.boolean.go, storage.type.byte.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.complex.go #d200ee —
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
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...
main*
Button.tsx
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 } !` ;
}
Next.js Docs Code Theme | Coding Theme