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.activeBackground #33548D activityBar.activeBorder #47BFEE activityBar.background #232937 activityBar.foreground #ABABAB activityBar.inactiveForeground #ABABAB activityBarBadge.background #47BFEE tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle source.ignore, keyword.other.definition #A9DEF9 — storage, storage.type #6A76DF italic keyword.control #C678DD italic string #D19A66 italic string.regexp
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Leone Dark | Coding Theme
activityBarBadge.foreground #33548D
button.background #33548D
button.foreground #D7DAE0
button.secondaryBackground #404754
button.secondaryForeground #D7DAE0
debugToolBar.background #212530
diffEditor.insertedTextBackground #00809b33
dropdown.background #2E343F
dropdown.border #333944
editor.background #212530
editor.findMatchBackground #000
editor.findMatchBorder #E5C07B
editor.findMatchHighlightBackground #000
editor.findMatchHighlightBorder #D19A66
editor.foreground #ABABAB
editor.lineHighlightBackground #2C313C
editor.selectionBackground #455368
editor.selectionForeground #F0F
editor.selectionHighlightBackground #2C313C
editor.selectionHighlightBorder #00000000
editor.wordHighlightBackground #00000000
editor.wordHighlightBorder #455368
editor.wordHighlightStrongBackground #00000000
editor.wordHighlightStrongBorder #47BFEE
editorBracketMatch.background #000
editorBracketMatch.border #000
editorCursor.background #FFFFFFC9
editorCursor.foreground #528BFF
editorError.foreground #C24038
editorGroup.border #181A1F
editorGroup.dropBackground #00000060
editorGroup.emptyBackground #181A1F
editorGroupHeader.tabsBackground #1C202B
editorGutter.addedBackground #50AF8E
editorGutter.deletedBackground #E05561
editorGutter.modifiedBackground #518EC7
editorHoverWidget.background #212530
editorHoverWidget.border #181A1F
editorIndentGuide.activeBackground1 #C8C8C859
editorIndentGuide.background1 #2C313C
editorInlayHint.background #67769630
editorInlayHint.foreground #65738B
editorLineNumber.activeForeground #33548D
editorLineNumber.foreground #455368
editorMarkerNavigation.background #212530
editorRuler.foreground #ABB2BF26
editorSuggestWidget.background #212530
editorSuggestWidget.border #181A1F
editorSuggestWidget.selectedBackground #2C313C
editorWarning.foreground #D19A66
editorWhitespace.foreground #00000020
editorWidget.background #212530
focusBorder #252A35
gitDecoration.deletedResourceForeground #FF616E
gitDecoration.ignoredResourceForeground #343E50
gitDecoration.modifiedResourceForeground #61AFEF
gitDecoration.untrackedResourceForeground #7CCA8D
input.background #2C313C
inputOption.activeForeground #47BFEE
list.activeSelectionBackground #383E4A
list.activeSelectionForeground #FFF
list.focusBackground #383E4A
list.focusForeground #ABABAB
list.highlightForeground #47BFEE
list.hoverBackground #292d37
list.hoverForeground #ABABAB
list.inactiveSelectionBackground #2C313A
list.inactiveSelectionForeground #D7DAE0
list.warningForeground #D19A66
menu.foreground #C8C8C8
panelSectionHeader.background #212530
peekViewEditor.background #1B1D23
peekViewEditor.matchHighlightBackground #29244B
peekViewResult.background #20252E
sash.hoverBorder #33548D
scrollbarSlider.activeBackground #747D9180
scrollbarSlider.background #4E566660
scrollbarSlider.hoverBackground #5A637580
sideBar.background #1C202B
sideBar.border #252A35
sideBar.foreground #5F6A79
sideBarSectionHeader.background #2E343F
sideBarSectionHeader.border #252A35
statusBar.background #33548D
statusBar.debuggingBackground #50AF8E
statusBar.debuggingBorder #32746D
statusBar.debuggingForeground #000000
statusBar.foreground #E7E7E7
statusBar.noFolderBackground #212530
statusBarItem.hoverBackground #2C313A
statusBarItem.remoteBackground #4D78CC
statusBarItem.remoteForeground #F8FAFD
tab.activeBackground #252A35
tab.activeBorderTop #47BFEE
tab.activeForeground #DCDCDC
tab.border #212530
tab.hoverBackground #2A2F3A
tab.inactiveBackground #2E343F
tab.unfocusedHoverBackground #323842
terminal.ansiBlack #3F4451
terminal.ansiBlue #61AFEF
terminal.ansiBrightBlack #4F5666
terminal.ansiBrightBlue #47BFEE
terminal.ansiBrightCyan #4CD1E0
terminal.ansiBrightGreen #A5E075
terminal.ansiBrightMagenta #DE73FF
terminal.ansiBrightRed #FF616E
terminal.ansiBrightWhite #D7DAE0
terminal.ansiBrightYellow #F0A45D
terminal.ansiCyan #56B6C2
terminal.ansiGreen #50AF8E
terminal.ansiMagenta #C162DE
terminal.ansiRed #E06C75
terminal.ansiWhite #E6E6E6
terminal.ansiYellow #E5C07B
terminal.background #212530
terminal.border #373E49
terminal.foreground #ABB2BF
terminal.selectionBackground #ABB2BF30
textLink.foreground #61AFEF
titleBar.activeBackground #212530
titleBar.activeForeground #E7E7E7
titleBar.inactiveBackground #373E49
titleBar.inactiveForeground #E7E7E7 #56B6C2
entity.name.function #61AFEF —
entity.name.namespace #7CCA8D —
meta.class entity.name.type.class, meta.class entity.name.function, new.expr entity.name.function, new.expr support.class #4CD1E0 —
entity.name.type.interface, entity.name.type.alias, entity.name.type.enum #2EA7B7 —
variable.other.readwrite.alias, meta.type.annotation entity.name.type, meta.type.parameters entity.name.type, meta.return.type entity.name.type, entity.other.inherited-class, meta.object.member variable.other.readwrite, entity.name.type.rust #9FA0FF —
entity.name.type.struct #E5C07B —
constant.language, support.type.builtin #6A76DF —
variable, expression.ng variable.other.readwrite, support.type.property-name, meta.object-literal.key, variable.other.rust, variable.other.readwrite, keyword.key #A9DEF9 —
punctuation.support.type.property-name #6A76DF —
meta.ng-binding.event expression.ng variable.other.readwrite #A9DEF9 —
variable.other.constant, support.variable.property #E5C07B —
variable.other.readwrite #A9DEF9 —
variable.language #E06C75 —
variable.parameter #99CABB italic
comment, punctuation.definition.comment #5F6A79 —
source.rust meta.attribute.rust punctuation.definition.attribute.rust #47BFEE —
source.rust meta.attribute.rust #6A76DF —
keyword.operator.new, keyword.operator.expression #C678DD —
keyword.operator.type, meta.brace.round, punctuation.accessor #CACACA —
keyword.other.unit #2EA7B7 —
meta.brace.round, punctuation.accessor #ABABAB —
punctuation.definition.template-expression, punctuation.section.embedded.rust #C678DD —
punctuation.section.embedded.rust #E5C07B —
support.type.primitive #98C379 —
support.class.builtin, meta.block entity.name.type #E06C75 —
meta.class support.class.error #E06C75 —
entity.name.tag support.class.component #FF616E —
entity.other.attribute-name, punctuation.definition.ng-binding-name #98C379 italic
entity.other.attribute-name.id #E5C07B —
entity.other.attribute-name.class, punctuation.definition.entity #7CCA8D —
meta.at-rule.apply.tailwind entity.other.attribute-name.class #9FA0FF —
entity.other.ng-binding-name #50AF8E —
punctuation.definition.string, string.quoted.double punctuation.definition.block, text.html.derivative punctuation.definition.block #99582A —
support.type.object.module #E5C07B —
support.constant.property-value #6A76DF —
support.constant.font-name, meta.property-value #E5C07B —
punctuation.definition.keyword #C678DD —
support.type.vendored #7CCA8D —
constant.character.entity #6A76DF —
source.python support.type, support.function.builtin #2EA7B7 italic
source.python meta.function, source.python meta.function-call.generic #61AFEF —
meta.function-call #E5C07B —
markup.heading.markdown, markup.heading entity.name #61AFEF —
punctuation.definition.heading.markdown #455368 —
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 } ! ` ;
}