Skip to main content
Home Theme VS Code VitePress Theme (unofficial) Theme based on the Vite documentation.
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.background #161618 activityBar.border #161618 activityBar.foreground #FFFFF5 activityBarBadge.background #646CFF activityBarBadge.foreground #161618 badge.background #16161830 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle Global settings #A6ACCD — string #C3E88D — punctuation, constant.other.symbol #89DDFF — constant.character.escape, text.html constant.character.entity.named #A6ACCD — constant.language.boolean
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
VitePress Theme (unofficial) — VitePress Theme Vite Dark
badge.foreground
#646CFF
breadcrumb.activeSelectionForeground #BCC0FF
breadcrumb.background #1E1E20
breadcrumb.focusForeground #BCC0FF
breadcrumb.foreground #9499FF
breadcrumbPicker.background #1E1E20
button.background #646CFF
contrastBorder #454CE100
debugToolBar.background #161618
diffEditor.insertedTextBackground #F1BF6515
diffEditor.removedTextBackground #C3E88D20
dropdown.background #161618
dropdown.border #FFFFFF10
editor.background #1E1E20
editor.findMatchBackground #EAB3080D
editor.findMatchBorder #EAB30880
editor.findMatchHighlightBackground #646CFF04
editor.findMatchHighlightBorder #646CFF
editor.foreground #FFFFF5
editor.lineHighlightBackground #16161880
editor.selectionBackground #747BFF30
editor.selectionHighlightBackground #454CE16b
editor.selectionHighlightBorder #747BFFf0
editorBracketMatch.background #EAB3080D
editorBracketMatch.border #EAB30880
editorCursor.foreground #FFCB6B
editorError.foreground #F0717870
editorGroup.border #16161830
editorGroupHeader.tabsBackground #1E1E20
editorGutter.addedBackground #F1BF6560
editorGutter.deletedBackground #C3E88D60
editorGutter.modifiedBackground red
editorHoverWidget.background #161618
editorHoverWidget.border #FFFFFF10
editorIndentGuide.activeBackground #313136
editorIndentGuide.background #31313670
editorInfo.foreground #747BFF70
editorLineNumber.activeForeground #FFFFF5
editorLineNumber.foreground #FFFFF550
editorLink.activeForeground #FFFFF5
editorMarkerNavigation.background #FFFFF505
editorOverviewRuler.border #16161800
editorOverviewRuler.errorForeground #C3E88D40
editorOverviewRuler.findMatchForeground #454CE1
editorOverviewRuler.infoForeground #747BFF40
editorOverviewRuler.warningForeground #FFCB6B70
editorRuler.foreground #313136
editorSuggestWidget.background #161618
editorSuggestWidget.border #FFFFFF10
editorSuggestWidget.foreground #FFFFF5
editorSuggestWidget.highlightForeground #FFCB6B
editorSuggestWidget.selectedBackground #454CE120
editorWarning.foreground #F1BF65
editorWhitespace.foreground #FFFFF540
editorWidget.background #161618
editorWidget.border #FFCB6B
editorWidget.resizeBorder #454CE1
extensionButton.prominentBackground #F1BF6590
extensionButton.prominentHoverBackground #C3E88D
focusBorder #FFFFFF00
gitDecoration.conflictingResourceForeground #FFCB6B90
gitDecoration.deletedResourceForeground #F0717890
gitDecoration.ignoredResourceForeground #EBEBF561
gitDecoration.modifiedResourceForeground #FFFFF5DB
gitDecoration.untrackedResourceForeground #EBEBF599
input.background #1E1E20
input.border #FFFFFF10
input.foreground #FFFFF5
input.placeholderForeground #FFFFF560
inputOption.activeBackground #FFFFF530
inputOption.activeBorder #FFFFF530
inputValidation.errorBorder #C3E88D50
inputValidation.infoBorder #747BFF50
inputValidation.warningBorder #FFCB6B50
list.activeSelectionBackground #161618
list.activeSelectionForeground #646CFF
list.focusBackground #1E1E20
list.focusForeground #747BFF
list.highlightForeground #454CE1
list.hoverBackground #313136
list.hoverForeground #FFFFFF
list.inactiveSelectionBackground #16161830
list.inactiveSelectionForeground #646CFF
list.warningForeground #FFCB6B
listFilterWidget.background #16161830
listFilterWidget.noMatchesOutline #16161830
listFilterWidget.outline #16161830
menu.background #242531
menu.border #646CFF
menu.foreground #FFFFF5
menu.selectionBackground #1E1E20
menu.selectionBorder #16161830
menu.selectionForeground #FFFFF5
menu.separatorBackground #FFFFF5
menubar.selectionBackground #1E1E20
menubar.selectionBorder #454CE150
menubar.selectionForeground #FFFFF5
minimap.background #1E1E20
minimapGutter.addedBackground #C3E88D
minimapGutter.deletedBackground #FFCB6B
minimapGutter.modifiedBackground #F1BF65
minimapSlider.activeBackground #454CE150
minimapSlider.background #50505830
minimapSlider.hoverBackground #50505850
notificationLink.foreground #454CE1
notifications.background #161618
notifications.foreground #FFFFF5
panel.background #1E1E20
panel.border #52525952
panelTitle.activeBorder #454CE1
panelTitle.activeForeground #FFFFF5
panelTitle.inactiveForeground #EBEBF599
peekView.border #646CFF
peekViewEditor.background #FFFFF505
peekViewEditor.matchHighlightBackground #454CE150
peekViewEditorGutter.background #FFFFF505
peekViewResult.background #FFFFF505
peekViewResult.matchHighlightBackground #454CE150
peekViewResult.selectionBackground #454CE170
peekViewTitle.background #FFFFF505
peekViewTitleDescription.foreground #FFFFF560
pickerGroup.foreground #454CE1
progressBar.background #454CE1
scrollbar.shadow #16161880
scrollbarSlider.activeBackground #454CE150
scrollbarSlider.background #50505830
scrollbarSlider.hoverBackground #50505850
selection.background #454CE1
settings.checkboxBackground #161618
settings.checkboxForeground #FFFFF5
settings.dropdownBackground #161618
settings.dropdownForeground #FFFFF5
settings.headerForeground #454CE1
settings.modifiedItemIndicator #454CE1
settings.numberInputBackground #161618
settings.numberInputForeground #FFFFF5
settings.textInputBackground #161618
settings.textInputForeground #FFFFF5
sideBar.background #161618
sideBar.border #52525900
sideBar.foreground #EBEBF599
sideBarSectionHeader.background #161618
sideBarSectionHeader.border #16161860
sideBarSectionHeader.foreground #FFFFF5DB
sideBarTitle.foreground #FFFFF5
statusBar.background #454CE1
statusBar.border #16161860
statusBar.debuggingBackground #FFCB6B
statusBar.debuggingForeground #161618
statusBar.foreground #FFFFF5
statusBar.noFolderBackground #161618
statusBarItem.hoverBackground #454CE120
tab.activeBackground #242531
tab.activeBorder #454CE1
tab.activeForeground #FFFFF5
tab.activeModifiedBorder #454CE1
tab.border #161618
tab.inactiveBackground #1E1E20
tab.inactiveForeground #FFFFF5AF
tab.unfocusedActiveBackground #454CE140
tab.unfocusedActiveBorder #454CE1
tab.unfocusedActiveForeground #FFFFF5
tab.unfocusedInactiveBackground #454CE110
tab.unfocusedInactiveForeground #FFFFF57F
terminal.ansiBlack #000000
terminal.ansiBlue #82AAFF
terminal.ansiBrightBlack #676E95
terminal.ansiBrightBlue #82AAFF
terminal.ansiBrightCyan #89DDFF
terminal.ansiBrightGreen #C3E88D
terminal.ansiBrightMagenta #C792EA
terminal.ansiBrightRed #F07178
terminal.ansiBrightWhite #FFFFFF
terminal.ansiBrightYellow #FFCB6B
terminal.ansiCyan #89DDFF
terminal.ansiGreen #C3E88D
terminal.ansiMagenta #C792EA
terminal.ansiRed #F07178
terminal.ansiWhite #FFFFFF
terminal.ansiYellow #FFCB6B
terminalCursor.background #161618
terminalCursor.foreground #FFCB6B
textLink.activeForeground #9499FF
textLink.foreground #646CFF
titleBar.activeBackground #161618
titleBar.activeForeground #FFFFF5
titleBar.border #16161860
titleBar.inactiveBackground #161618
titleBar.inactiveForeground #FFFFF580
tree.indentGuidesStroke #313136
widget.shadow #16161830 variable, variable.parameter, support.variable, variable.language, support.constant, meta.definition.variable entity.name.function, meta.function-call.arguments #A6ACCD —
keyword, modifier, variable.language.this, support.type.object, constant.language #89DDFF —
entity.name.function, support.function #82AAFF —
storage.type, storage.modifier, storage.control #C792EA —
support.module, support.node #F07178 italic
support.type, constant.other.key #FFCB6B —
entity.name.type, entity.other.inherited-class, entity.other #FFCB6B —
comment punctuation.definition.comment, string.quoted.docstring #676E95 italic
entity.name, entity.name.type.class, support.type, support.class, meta.use #FFCB6B —
variable.object.property, meta.field.declaration entity.name.function #F07178 —
meta.definition.method entity.name.function #F07178 —
meta.function entity.name.function #82AAFF —
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end #89DDFF —
meta.embedded, source.groovy.embedded, meta.template.expression #A6ACCD —
entity.name.tag.yaml #F07178 —
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json #F07178 —
constant.language.json #89DDFF —
entity.other.attribute-name.class #FFCB6B —
entity.other.attribute-name.id #F78C6C —
source.css entity.name.tag #FFCB6B —
support.type.property-name.css #B2CCD6 —
meta.tag, punctuation.definition.tag #89DDFF —
entity.other.attribute-name #C792EA —
punctuation.definition.entity.html #A6ACCD —
text.html.markdown meta.link.inline, meta.link.reference #F07178 —
text.html.markdown beginning.punctuation.definition.list #89DDFF —
markup.italic #F07178 italic
markup.bold markup.italic, markup.italic markup.bold #F07178 italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown #C3E88D —
markup.inline.raw.string.markdown #C3E88D —
keyword.other.definition.ini #F07178 —
entity.name.section.group-title.ini #89DDFF —
source.cs meta.class.identifier storage.type #FFCB6B —
source.cs meta.method.identifier entity.name.function #F07178 —
source.cs meta.method-call meta.method, source.cs entity.name.function #82AAFF —
source.cs storage.type #FFCB6B —
source.cs meta.method.return-type #FFCB6B —
source.cs meta.preprocessor #676E95 —
source.cs entity.name.type.namespace #A6ACCD —
meta.jsx.children, SXNested #A6ACCD —
support.class.component #FFCB6B —
source.cpp meta.block variable.other #A6ACCD —
source.python meta.member.access.python #F07178 —
source.python meta.function-call.python, meta.function-call.arguments #82AAFF —
entity.name.function.call #82AAFF —
source.php support.other.namespace, source.php meta.use support.class #A6ACCD —
constant.keyword #89DDFF italic
entity.name.function #82AAFF —
markup.underline — underline
keyword.control #89DDFF italic
variable.parameter — italic
variable.parameter.function.language.special.self.python #F07178 italic
constant.character.format.placeholder.other.python #F78C6C —
markup.quote #89DDFF italic
markup.fenced_code.block #A6ACCD90 —
punctuation.definition.quote #FF9CAC —
meta.structure.dictionary.json support.type.property-name.json #C792EA —
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #FFCB6B —
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 #F78C6C —
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 #F07178 —
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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #916B53 —
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 meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #82AAFF —
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 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 #FF9CAC —
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 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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #C792EA —
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 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 meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #C3E88D —
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 } ! ` ;
}
VitePress Theme (unofficial) | Coding Theme