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.activeBorder #e5c100 activityBar.background #1c1c1c activityBar.border #272727 activityBar.foreground #aaaaaa activityBarBadge.background #e5c100 badge.background #272727 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment #676B79 italic keyword #FF75B5 — keyword.control, keyword.operator.new #FF75B5 — keyword.operator #E6E6E6 — keyword.operator.logical, keyword.operator.comparison
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
After Sunset Theme — After Sunset Theme
badge.foreground
#f8f8f2
breadcrumb.activeSelectionForeground #e5c100
breadcrumb.focusForeground #f8f8f2
breadcrumb.foreground #aaaaaa
breadcrumbPicker.background #1c1c1c
button.background #e6c200
button.hoverBackground #ccac00
debugExceptionWidget.border #e5c100
debugToolBar.background #272727
debugToolBar.border #272727
descriptionForeground #aaaaaa
dropdown.background #1c1c1c
dropdown.border #272727
dropdown.foreground #d4d4d4
dropdown.listBackground #1c1c1c
editor.background #1c1c1c
editor.findMatchBackground #e5c10090
editor.findMatchBorder #e5c10000
editor.findMatchHighlightBackground #e5c10030
editor.findMatchHighlightBorder #e5c10050
editor.findRangeHighlightBackground #e5c10080
editor.foreground #d4d4d4
editor.lineHighlightBackground #272727
editor.rangeHighlightBackground #e5c10020
editor.selectionBackground #444444
editor.selectionForeground #25313e
editor.selectionHighlightBackground #27272750
editor.selectionHighlightBorder #e5c1007a
editor.wordHighlightBackground #42557b30
editor.wordHighlightBorder #00000000
editor.wordHighlightStrongBackground #42557b30
editor.wordHighlightStrongBorder #00000000
editorBracketMatch.background #1c1c1c
editorBracketMatch.border #777777
editorCursor.foreground #e5c100
editorError.foreground #c42412
editorGroup.border #272727
editorGroup.dropBackground #1c1c1c
editorGroup.emptyBackground #1c1c1c
editorGroupHeader.tabsBackground #1c1c1c
editorGroupHeader.tabsBorder #272727
editorHint.foreground #e6db74
editorHoverWidget.background #1c1c1c
editorHoverWidget.border #e5c100
editorIndentGuide.activeBackground1 #b2cffb2a
editorIndentGuide.background1 #3a3a3a
editorLineNumber.activeForeground #e5c100
editorLineNumber.foreground #777777
editorMarkerNavigation.background #1f2330
editorOverviewRuler.border #b2cffb2a
editorOverviewRuler.selectionHighlightForeground #f39b35
editorPane.background #1f2330
editorRuler.foreground #c7adfb2f
editorSuggestWidget.background #272727
editorSuggestWidget.border #e5c100
editorSuggestWidget.foreground #e5c100
editorSuggestWidget.highlightForeground #777777
editorSuggestWidget.selectedBackground #272727
editorWarning.foreground #f39b35
editorWhitespace.foreground #272727
editorWidget.background #272727
editorWidget.border #e5c100
errorForeground #c42412
focusBorder #e5c10055
foreground #d4d4d4
input.background #1c1c1c
input.border #272727
input.foreground #aaaaaa
input.placeholderForeground #444444
inputOption.activeBorder #363c4c
inputValidation.errorBackground #1c1c1c
inputValidation.errorBorder #c42412
inputValidation.infoBackground #1c1c1c
inputValidation.infoBorder #919cb9
inputValidation.warningBackground #1c1c1c
inputValidation.warningBorder #f39b35
list.activeSelectionBackground #899bbf3a
list.dropBackground #f6f0ff15
list.errorForeground #e22813
list.focusBackground #899bbf30
list.focusForeground #f6f0ff
list.highlightForeground #f8f8f2
list.hoverBackground #919cb915
list.hoverForeground #f6f0ffea
list.inactiveSelectionBackground #899bbf2c
list.inactiveSelectionForeground #aaaaaa
list.warningForeground #f39b35
menu.background #1c1c1c
menu.foreground #d4d4d4
menu.selectionBackground #899bbf3a
menu.selectionBorder #0f13207a
menu.selectionForeground #f6f0ffea
menubar.selectionBackground #899bbf3a
menubar.selectionBorder #0f13200a
menubar.selectionForeground #aaaaaa
notificationCenter.border #e5c100
notificationCenterHeader.background #1f2330
notifications.border #e5c100
notificationToast.border #e5c100
panel.background #1c1c1c
panel.border #272727
panelTitle.activeBorder #e5c100
panelTitle.activeForeground #e5c100
panelTitle.inactiveForeground #aaaaaa
peekView.border #e5c100
peekViewEditor.background #1c1c1c
peekViewEditor.matchHighlightBackground #363c4c
peekViewResult.background #1c1c1c
peekViewResult.matchHighlightBackground #363c4c
peekViewResult.selectionBackground #35355190
peekViewTitle.background #1f2330
pickerGroup.border #b2cffb1a
pickerGroup.foreground #e5c100
progressBar.background #e5c100
scrollbar.shadow #1c1c1c
scrollbarSlider.activeBackground #555555
scrollbarSlider.background #444444
scrollbarSlider.hoverBackground #555555
selection.background #444444
settings.checkboxBackground #272727
settings.checkboxBorder #1c1c1c
settings.checkboxForeground #d4d4d4
settings.dropdownBackground #1c1c1c
settings.dropdownBorder #272727
settings.dropdownForeground #d4d4d4
settings.headerForeground #d4d4d4
settings.numberInputBackground #1c1c1c
settings.numberInputBorder #272727
settings.numberInputForeground #d4d4d4
settings.textInputBackground #1c1c1c
settings.textInputBorder #272727
settings.textInputForeground #d4d4d4
sideBar.background #1c1c1c
sideBar.border #272727
sideBar.dropBackground #363c4c5f
sideBar.foreground #aaaaaa
sideBarSectionHeader.background #1c1c1c
sideBarSectionHeader.foreground #aaaaaa
sideBarTitle.foreground #aaaaaa
statusBar.background #1c1c1c
statusBar.border #272727
statusBar.debuggingBackground #1c1c1c
statusBar.debuggingForeground #e6c200
statusBar.foreground #aaaaaa
statusBar.noFolderBackground #1c1c1c
statusBar.noFolderForeground #aaaaaa
tab.activeBackground #1c1c1c
tab.activeBorder #e5c100
tab.activeForeground #f1f1ef
tab.border #1c1c1c
tab.hoverBorder #e5c100
tab.inactiveBackground #1c1c1c
tab.inactiveForeground #d4d4d4
tab.unfocusedActiveBorder #272727
tab.unfocusedActiveForeground #777777
tab.unfocusedHoverBorder #777777
tab.unfocusedInactiveForeground #79839c
terminal.ansiBlack #1c1c1c
terminal.ansiBlue #00a7aa
terminal.ansiBrightBlack #555555
terminal.ansiBrightBlue #00a7aa
terminal.ansiBrightCyan #37e5e7
terminal.ansiBrightGreen #98e342
terminal.ansiBrightMagenta #ffb1f2
terminal.ansiBrightRed #fc4384
terminal.ansiBrightWhite #f1f1ef
terminal.ansiBrightYellow #e6db74
terminal.ansiCyan #37e5e7
terminal.ansiGreen #98e342
terminal.ansiMagenta #ffb1f2
terminal.ansiRed #fc4384
terminal.ansiWhite #d4d4d4
terminal.ansiYellow #e6db74
terminal.background #1c1c1c
terminal.foreground #cccccc
terminal.selectionBackground #42557b5a
terminalCursor.background #1c1c1c
terminalCursor.foreground #d4d4d4
textBlockQuote.background #919cb91c
textBlockQuote.border #e5c100
textLink.activeForeground #ffb1f2
textLink.foreground #e5c100
textPreformat.foreground #a06fca
textSeparator.foreground #919cb9
titleBar.activeBackground #272727
titleBar.activeForeground #d4d4d4
titleBar.border #272727
titleBar.inactiveBackground #444444
titleBar.inactiveForeground #777777
widget.shadow #1c1c1c #FFCC95
keyword.operator.misc, keyword.operator.sigil #FF75B5 —
constant.character.escape #45A9F9 —
variable.parameter #BBBBBB —
variable.other.constant, variable.language.this, variable.interpolation #FF9AC1 —
variable.other.object #FF9AC1 —
variable.other.property #E6E6E6 —
punctuation.definition.template-expression #FFCC95 —
entity.name.function #E5C100 —
entity.other.inherited-class #FF9AC1 —
entity.name.tag.yaml #FFCC95 —
meta.decorator punctuation.decorator #FFB86C —
meta.decorator variable #6FC1FF —
keyword.other.special-method #45A9F9 —
keyword.control.at-rule #B084EB —
keyword.other.important #FF4B82 —
variable.interpolation #FF75B5 —
entity.name.type #19f9d8 italic
meta.source.handlebars entity.name.tag #6FC1FF —
punctuation.definition.expression, punctuation.definition.subexpression, punctuation.definition.block.unescaped, punctuation.definition.tag #FFCC95 italic
entity.name.function.expression #FF75B5 —
entity.unescaped.expression #B084EB —
constant.other.symbol #19f9d8 —
entity.expression variable.parameter.name #FFB86C —
entity.expression variable.parameter.value #6FC1FF —
entity.expression support.function.builtin #FF9AC1 —
entity.name.tag.html #FFCC95 —
entity.other.attribute-name.handlebars #FFCC95 —
support.class.component #FF75B5 italic
entity.other.attribute-name #FFB86C —
punctuation.definition.bold.markdown #FFCC95 bold
markup.italic #FF9AC1 italic
punctuation.definition.italic.markdown #FF75B5 italic
punctuation.definition.heading #19f9d8 —
entity.name.section.markdown #BBBBBB —
markup.inline.raw #19f9d8 italic
beginning.punctuation.definition.list #FF75B5 —
markup.fenced_code.block.markdown punctuation.definition.markdown #757575 —
fenced_code.block.language #BBBBBB italic
string.other.link #BBBBBB —
meta.link.inline.markdown #45A9F9 italic
text.html.markdown punctuation.definition.string #FFCC95 —
meta.tag.structure.any.html, meta.tag.other.html, entity.name.tag.html, meta.tag.metadata.script.html, entity.name.tag.jade #FF2C6D —
entity.name.tag.inline.any.html, entity.name.tag.other.html, entity.name.tag.block.any.html, entity.name.tag.localname.xml #FF2C6D —
entity.name.tag.xml, meta.tag.xml #FF2C6D —
entity.name.tag.css #FF2C6D —
support.type.property-name.css #E6E6E6 —
entity.name.tag.reference.scss #FF2C6D —
keyword.other.unit.rem.css, keyword.other.unit.vh.css, keyword.other.unit.px.css, keyword.other.unit.em.css, keyword.other.unit.deg.css, keyword.other.unit.percentage.css #FFB86C —
string.regexp keyword, string.regexp keyword.control #FF75B5
string.regexp keyword.operator #FF9AC1 —
comment.block.documentation —
comment.block storage #FFCC95 —
comment.block storage.custom #FF9AC1 —
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 } !` ;
}
After Sunset Theme | Coding Theme