Skip to main content
The requested theme was not found on this page; showing the first available theme.
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 #f9826c activityBar.background #24292e activityBar.border #1b1f23 activityBar.foreground #e1e4e8 activityBar.inactiveForeground #6a737d activityBarBadge.background #0366d6 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment, string.comment #6a737d — constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language #79b8ff — entity, entity.name #b392f0 — variable.parameter.function #e1e4e8 — entity.name.tag
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Datarose: GitHub Theme — GitHub Dark Datarose: GitHub Theme | Coding Theme
activityBarBadge.foreground
#fff
badge.background #044289
badge.foreground #c8e1ff
breadcrumb.activeSelectionForeground #d1d5da
breadcrumb.focusForeground #e1e4e8
breadcrumb.foreground #959da5
breadcrumbPicker.background #2b3036
button.background #176f2c
button.foreground #dcffe4
button.hoverBackground #22863a
button.secondaryBackground #444d56
button.secondaryForeground #fff
button.secondaryHoverBackground #586069
checkbox.background #444d56
checkbox.border #1b1f23
debugToolBar.background #2b3036
descriptionForeground #959da5
diffEditor.insertedTextBackground #28a74530
diffEditor.removedTextBackground #d73a4930
dropdown.background #2f363d
dropdown.border #1b1f23
dropdown.foreground #e1e4e8
dropdown.listBackground #24292e
editor.background #24292e
editor.findMatchBackground #ffd33d44
editor.findMatchHighlightBackground #ffd33d22
editor.focusedStackFrameHighlightBackground #2b6a3033
editor.foldBackground #58606915
editor.foreground #e1e4e8
editor.inactiveSelectionBackground #3392FF22
editor.lineHighlightBackground #2b3036
editor.linkedEditingBackground #3392FF22
editor.selectionBackground #3392FF44
editor.selectionHighlightBackground #17E5E633
editor.selectionHighlightBorder #17E5E600
editor.stackFrameHighlightBackground #C6902625
editor.wordHighlightBackground #17E5E600
editor.wordHighlightBorder #17E5E699
editor.wordHighlightStrongBackground #17E5E600
editor.wordHighlightStrongBorder #17E5E666
editorBracketHighlight.foreground1 #79b8ff
editorBracketHighlight.foreground2 #ffab70
editorBracketHighlight.foreground3 #b392f0
editorBracketHighlight.foreground4 #79b8ff
editorBracketHighlight.foreground5 #ffab70
editorBracketHighlight.foreground6 #b392f0
editorBracketMatch.background #17E5E650
editorBracketMatch.border #17E5E600
editorCursor.foreground #c8e1ff
editorError.foreground #f97583
editorGroup.border #1b1f23
editorGroupHeader.tabsBackground #1f2428
editorGroupHeader.tabsBorder #1b1f23
editorGutter.addedBackground #28a745
editorGutter.deletedBackground #ea4a5a
editorGutter.modifiedBackground #2188ff
editorIndentGuide.activeBackground #444d56
editorIndentGuide.background #2f363d
editorLineNumber.activeForeground #e1e4e8
editorLineNumber.foreground #444d56
editorOverviewRuler.border #1b1f23
editorWarning.foreground #ffea7f
editorWhitespace.foreground #444d56
editorWidget.background #1f2428
errorForeground #f97583
focusBorder #005cc5
foreground #d1d5da
gitDecoration.addedResourceForeground #34d058
gitDecoration.conflictingResourceForeground #ffab70
gitDecoration.deletedResourceForeground #ea4a5a
gitDecoration.ignoredResourceForeground #6a737d
gitDecoration.modifiedResourceForeground #79b8ff
gitDecoration.submoduleResourceForeground #6a737d
gitDecoration.untrackedResourceForeground #34d058
input.background #2f363d
input.border #1b1f23
input.foreground #e1e4e8
input.placeholderForeground #959da5
list.activeSelectionBackground #39414a
list.activeSelectionForeground #e1e4e8
list.focusBackground #044289
list.hoverBackground #282e34
list.hoverForeground #e1e4e8
list.inactiveFocusBackground #1d2d3e
list.inactiveSelectionBackground #282e34
list.inactiveSelectionForeground #e1e4e8
notificationCenterHeader.background #24292e
notificationCenterHeader.foreground #959da5
notifications.background #2f363d
notifications.border #1b1f23
notifications.foreground #e1e4e8
notificationsErrorIcon.foreground #ea4a5a
notificationsInfoIcon.foreground #79b8ff
notificationsWarningIcon.foreground #ffab70
panel.background #1f2428
panel.border #1b1f23
panelInput.border #2f363d
panelTitle.activeBorder #f9826c
panelTitle.activeForeground #e1e4e8
panelTitle.inactiveForeground #959da5
peekViewEditor.background #1f242888
peekViewEditor.matchHighlightBackground #ffd33d33
peekViewResult.background #1f2428
peekViewResult.matchHighlightBackground #ffd33d33
pickerGroup.border #444d56
pickerGroup.foreground #e1e4e8
progressBar.background #0366d6
quickInput.background #24292e
quickInput.foreground #e1e4e8
scrollbar.shadow #0008
scrollbarSlider.activeBackground #6a737d88
scrollbarSlider.background #6a737d33
scrollbarSlider.hoverBackground #6a737d44
settings.headerForeground #e1e4e8
settings.modifiedItemIndicator #0366d6
sideBar.background #1f2428
sideBar.border #1b1f23
sideBar.foreground #d1d5da
sideBarSectionHeader.background #1f2428
sideBarSectionHeader.border #1b1f23
sideBarSectionHeader.foreground #e1e4e8
sideBarTitle.foreground #e1e4e8
statusBar.background #24292e
statusBar.border #1b1f23
statusBar.debuggingBackground #931c06
statusBar.debuggingForeground #fff
statusBar.foreground #d1d5da
statusBar.noFolderBackground #24292e
statusBarItem.prominentBackground #282e34
statusBarItem.remoteBackground #24292e
statusBarItem.remoteForeground #d1d5da
tab.activeBackground #24292e
tab.activeBorder #24292e
tab.activeBorderTop #f9826c
tab.activeForeground #e1e4e8
tab.border #1b1f23
tab.hoverBackground #24292e
tab.inactiveBackground #1f2428
tab.inactiveForeground #959da5
tab.unfocusedActiveBorder #24292e
tab.unfocusedActiveBorderTop #1b1f23
tab.unfocusedHoverBackground #24292e
terminal.ansiBlack #586069
terminal.ansiBlue #2188ff
terminal.ansiBrightBlack #959da5
terminal.ansiBrightBlue #79b8ff
terminal.ansiBrightCyan #56d4dd
terminal.ansiBrightGreen #85e89d
terminal.ansiBrightMagenta #b392f0
terminal.ansiBrightRed #f97583
terminal.ansiBrightWhite #fafbfc
terminal.ansiBrightYellow #ffea7f
terminal.ansiCyan #39c5cf
terminal.ansiGreen #34d058
terminal.ansiMagenta #b392f0
terminal.ansiRed #ea4a5a
terminal.ansiWhite #d1d5da
terminal.ansiYellow #ffea7f
terminal.foreground #d1d5da
terminal.tab.activeBorder #f9826c
terminalCursor.background #586069
terminalCursor.foreground #79b8ff
textBlockQuote.background #24292e
textBlockQuote.border #444d56
textCodeBlock.background #2f363d
textLink.activeForeground #c8e1ff
textLink.foreground #79b8ff
textPreformat.foreground #d1d5da
textSeparator.foreground #586069
titleBar.activeBackground #24292e
titleBar.activeForeground #e1e4e8
titleBar.border #1b1f23
titleBar.inactiveBackground #1f2428
titleBar.inactiveForeground #959da5
tree.indentGuidesStroke #2f363d
welcomePage.buttonBackground #2f363d
welcomePage.buttonHoverBackground #444d56 storage, storage.type #f97583 —
storage.modifier.package, storage.modifier.import, storage.type.java #e1e4e8 —
string, punctuation.definition.string, string punctuation.section.embedded source #9ecbff —
meta.property-name #79b8ff —
invalid.broken #fdaeb7 italic
invalid.deprecated #fdaeb7 italic
invalid.illegal #fdaeb7 italic
invalid.unimplemented #fdaeb7 italic
carriage-return #24292e italic underline
source.regexp, string.regexp #dbedff —
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition #dbedff —
string.regexp constant.character.escape #85e89d bold
meta.module-reference #79b8ff —
punctuation.definition.list.begin.markdown #ffab70 —
markup.heading, markup.heading entity.name #79b8ff bold
markup.italic #e1e4e8 italic
markup.underline — underline
markup.strikethrough — strikethrough
markup.inline.raw #79b8ff —
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted #fdaeb7 —
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted #85e89d —
markup.changed, punctuation.definition.changed #ffab70 —
markup.ignored, markup.untracked #2f363d —
meta.diff.range #b392f0 bold
meta.separator #79b8ff bold
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote #d1d5da —
brackethighlighter.unmatched #fdaeb7 —
constant.other.reference.link, string.other.link #dbedff underline
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 }!` ;
}
Ln 5, Col 12
Spaces: 2
UTF-8
LF
TypeScript
Dark+
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
Button.tsx
Modal.tsx
hooks
utils
index.ts
public
README.md
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
31
32
33
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 $
package.json
tsconfig.json
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 }!` ;
}