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.background #0F0F19 activityBar.border #303058 activityBar.foreground #EDEDFE activityBar.inactiveForeground #8C8CB8 activityBarBadge.background #00F59B activityBarBadge.foreground #0A0A12 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle emphasis — italic meta.import variable.other.readwrite, meta.import variable.other.readwrite.alias, meta.import variable.other, meta.import entity.name.namespace, meta.import support.class, entity.name.import #EFBF04 — strong — bold comment, comment.block, comment.line, punctuation.definition.comment #7575A3 italic string, string.quoted, string.unquoted
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Sunset Drive — Sunset Drive
breadcrumb.activeSelectionForeground
#EDEDFE
breadcrumb.foreground #8C8CB8
button.background #00F59B
button.border #303058
button.foreground #0A0A12
checkbox.border #303058
contrastActiveBorder #303058
contrastBorder #303058
descriptionForeground #BDBDE6
diffEditor.insertedLineBackground #00F59B1A
diffEditor.insertedTextBackground #00F59B33
diffEditor.insertedTextBorder #00000000
diffEditor.removedLineBackground #FF33661A
diffEditor.removedTextBackground #FF336633
diffEditor.removedTextBorder #00000000
dropdown.background #181824
dropdown.border #303058
editor.background #0F0F19
editor.findMatchBackground #FFEA0033
editor.findMatchHighlightBackground #FFEA0033
editor.foreground #EDEDFE
editor.inactiveSelectionBackground #2B2B4433
editor.lineHighlightBackground #181824
editor.selectionBackground #2B2B44
editor.selectionForeground #EDEDFE
editor.wordHighlightBackground #FFEA0017
editor.wordHighlightStrongBackground #FFEA0017
editorBracketMatch.background #3CFFED17
editorBracketMatch.border #3CFFED
editorCursor.foreground #00F59B
editorGroup.border #303058
editorGroupHeader.tabsBackground #0F0F19
editorGroupHeader.tabsBorder #303058
editorGutter.background #0F0F19
editorIndentGuide.activeBackground1 #202034
editorIndentGuide.background1 #181824
editorLineNumber.activeForeground #00F59B
editorLineNumber.foreground #8C8CB8
editorOverviewRuler.border #303058
editorRuler.foreground #5A5A88
editorSuggestWidget.background #181824
editorSuggestWidget.border #303058
editorSuggestWidget.foreground #EDEDFE
editorSuggestWidget.selectedBackground #202034
editorWhitespace.foreground #8C8CB833
editorWidget.background #181824
editorWidget.border #303058
extensionButton.background #00F59B
extensionButton.foreground #0A0A12
extensionButton.hoverBackground #3CFFED
extensionButton.prominentBackground #00F59B
extensionButton.prominentForeground #0A0A12
extensionButton.prominentHoverBackground #3CFFED
focusBorder #5A5A88
foreground #EDEDFE
gitDecoration.addedResourceForeground #00F59B
gitDecoration.conflictingResourceForeground #FFEA00
gitDecoration.deletedResourceForeground #FF3366
gitDecoration.ignoredResourceForeground #7575A3
gitDecoration.modifiedResourceForeground #33A1FF
gitDecoration.renamedResourceForeground #FF66F6
gitDecoration.untrackedResourceForeground #FFEA00
input.background #181824
input.border #303058
input.foreground #EDEDFE
inputOption.activeBorder #303058
inputValidation.errorBorder #FF3366
inputValidation.infoBorder #33A1FF
inputValidation.warningBorder #FFEA00
keybindingLabel.background #181824
keybindingLabel.border #303058
keybindingLabel.bottomBorder #303058
keybindingLabel.foreground #EDEDFE
list.activeSelectionBackground #202034
list.activeSelectionForeground #EDEDFE
list.focusBackground #202034
list.highlightForeground #3CFFED
list.hoverForeground #EDEDFE
list.inactiveSelectionBackground #202034
list.inactiveSelectionForeground #EDEDFE
listFilterWidget.background #181824
listFilterWidget.noMatchesOutline #FF3366
listFilterWidget.outline #303058
menu.background #0F0F19
menu.border #303058
menu.foreground #EDEDFE
notebook.outputContainerBackgroundColor #0F0F19
notebook.outputContainerBorderColor #0F0F19
notificationCenterHeader.background #0F0F19
notifications.background #0F0F19
notifications.border #303058
panel.background #0F0F19
panel.border #303058
panelSection.border #303058
panelSectionHeader.border #303058
panelTitle.activeBorder #00F59B
panelTitle.activeForeground #EDEDFE
panelTitle.inactiveForeground #8C8CB8
pickerGroup.border #303058
progressBar.background #00F59B
quickInput.background #0F0F19
sash.hoverBorder #303058
scrollbarSlider.activeBackground #8C8CB8
scrollbarSlider.background #30305880
scrollbarSlider.hoverBackground #8C8CB880
sideBar.background #0F0F19
sideBar.border #303058
sideBar.foreground #EDEDFE
sideBarSectionHeader.background #0F0F19
sideBarTitle.foreground #EDEDFE
statusBar.background #0F0F19
statusBar.border #303058
statusBar.foreground #EDEDFE
tab.activeBackground #0F0F19
tab.activeBorder #303058
tab.activeBorderTop #303058
tab.activeForeground #EDEDFE
tab.border #303058
tab.hoverBackground #202034
tab.inactiveBackground #181824
tab.inactiveForeground #BDBDE6
tab.unfocusedActiveBorder #303058
tab.unfocusedHoverBackground #202034
terminal.ansiBlack #0A0A12
terminal.ansiBlue #33A1FF
terminal.ansiBrightBlack #8C8CB8
terminal.ansiBrightBlue #66BBFF
terminal.ansiBrightCyan #66FFFF
terminal.ansiBrightGreen #33FFBB
terminal.ansiBrightMagenta #FF99FF
terminal.ansiBrightRed #FF5588
terminal.ansiBrightWhite #F8F8FF
terminal.ansiBrightYellow #FFEE44
terminal.ansiCyan #3CFFED
terminal.ansiGreen #00F59B
terminal.ansiMagenta #FF66F6
terminal.ansiRed #FF3366
terminal.ansiWhite #BDBDE6
terminal.ansiYellow #FFEA00
terminal.background #0F0F19
terminal.foreground #EDEDFE
terminal.selectionBackground #2B2B44
textLink.activeForeground #3CFFED
textLink.foreground #3CFFED
titleBar.activeBackground #0F0F19
titleBar.activeForeground #EDEDFE
titleBar.border #303058
titleBar.inactiveBackground #0F0F19d9
titleBar.inactiveForeground #8C8CB8
#FF66F6
string.regexp, string.regex #FF66F6 —
constant.character.escape, string.escape, string.special, string.special.symbol #FFEA00 —
constant.numeric, number, float #FFEA00 —
constant.language.boolean, constant.language.true, constant.language.false #FFEA00 —
variable, variable.other.readwrite #EDEDFE —
variable.language, variable.language.this, variable.builtin #33A1FF —
variable.parameter #BDBDE6 —
variable.other.member #EDEDFE —
constant, constant.other #FFEA00 —
meta.preprocessor, entity.name.function.preprocessor #00F59B —
keyword, keyword.control, keyword.type, storage.type #00F59B —
keyword.operator, operator #00F59B —
variable.other.property, support.type.property-name, meta.object-literal.key #3CFFED —
entity.name.function, entity.name.function.constructor #3CFFED —
meta.function-call, meta.method-call, support.function, entity.name.function.call, entity.name.function.method, variable.function #3CFFED —
entity.name.type, entity.name.class, support.class, support.type #33A1FF —
support.type.builtin, storage.type.builtin #33A1FF italic
entity.name.namespace, support.module, namespace #33A1FF italic
meta.decorator, entity.name.function.decorator, punctuation.decorator #FF66F6 —
entity.name.tag, tag #00F59B —
entity.other.attribute-name #3CFFED italic
punctuation.definition.tag #BDBDE6 —
punctuation, punctuation.separator, punctuation.accessor, punctuation.bracket #8C8CB8 —
punctuation.special, punctuation.special.symbol #33A1FF —
markup.heading #3CFFED bold
markup.underline.link, string.other.link #3CFFED —
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...
~/my-project
main*
Button.tsx
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 } ! ` ;
}
Sunset Drive | Coding Theme