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 #C8102E activityBar.background #101820 activityBar.foreground #C8102E activityBar.inactiveForeground #A6192E activityBarBadge.background #A6192E badge.background #C8102E tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle token.error-token #C8102E — token.warn-token #F5DF4Dcc — string #F58C5895 — constant.character.escape, text.html constant.character.entity.named, punctuation.definition.entity.html #F58C5895 bold constant.language.boolean
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Warlord-Theme — warlord-theme
badge.foreground
#F2F0EB
button.background #C8102E
button.foreground #F2F0EB
debugConsole.errorForeground #A6192E
debugConsole.infoForeground #4B4F54
debugConsole.sourceForeground #F2F0EB
debugConsole.warningForeground #F5DF4D
debugConsoleInputIcon.foreground #F2F0EB
debugExceptionWidget.background #4B4F54
debugExceptionWidget.border #939597
debugToolBar.background #101820
diffEditor.insertedTextBackground #47A23F33
diffEditor.removedTextBackground #C8102E33
dropdown.background #101820
dropdown.foreground #101820
editor.background #101820
editor.findMatchBackground #A6192E80
editor.findMatchBorder #A6192E80
editor.findMatchHighlightBackground #C8102E80
editor.foreground #F2F0EB
editor.lineHighlightBorder #4B4F54
editor.rangeHighlightBackground #4B4F54
editor.selectionBackground #4D6995
editorCursor.background #101820
editorCursor.foreground #C8102E
editorGroup.dropBackground #C8102E80
editorGroupHeader.tabsBackground #101820
editorLightBulb.foreground #F5DF4D
editorLightBulbAutoFix.foreground #F5DF4D
editorLineNumber.activeForeground #C8102E
editorLineNumber.foreground #4B4F54
editorLink.activeForeground #C8102E
editorOverviewRuler.findMatchForeground #C8102E80
editorWidget.background #101820
editorWidget.foreground #F2F0EB
focusBorder #A6192E
foreground #F2F0EB
gitDecoration.addedResourceForeground #47A23F
gitDecoration.conflictingResourceForeground #4D6995
gitDecoration.deletedResourceForeground #C8102E
gitDecoration.ignoredResourceForeground #939597
gitDecoration.modifiedResourceForeground #F5DF4D
gitDecoration.renamedResourceForeground #F5DF4D
gitDecoration.stageDeletedResourceForeground #C8102E
gitDecoration.stageModifiedResourceForeground #F5DF4D
gitDecoration.submoduleResourceForeground #F2F0EB
gitDecoration.untrackedResourceForeground #47A23F
icon.foreground #A6192E
input.background #101820
input.border #4B4F54
inputOption.activeBorder #C8102E
list.activeSelectionBackground #C8102E80
list.activeSelectionForeground #F2F0EB
list.activeSelectionIconForeground #C8102E
list.hoverBackground #4B4F54
list.hoverForeground #939597
menu.background #101820
menu.foreground #F2F0EB
minimap.errorHighlight #C8102E
minimap.findMatchHighlight #4D6995
minimap.selectionHighlight #4D6995cc
minimap.warningHighlight #F5DF4Dcc
minimapGutter.addedBackground #47A23F
minimapGutter.deletedBackground #C8102E
minimapGutter.modifiedBackground #4D6995
panel.background #101820
panel.border #4B4F54
panelTitle.activeBorder #C8102E
panelTitle.inactiveForeground #F2F0EB80
peekView.border #4B4F54
peekViewEditor.background #101820
peekViewEditor.matchHighlightBackground #101820
peekViewEditor.matchHighlightBorder #C8102E
peekViewResult.background #101820
peekViewResult.matchHighlightBackground #101820
peekViewResult.selectionBackground #101820
peekViewTitle.background #101820
pickerGroup.border #4B4F54
pickerGroup.foreground #F2F0EB
scrollbarSlider.activeBackground #C8102E80
scrollbarSlider.background #A6192E40
scrollbarSlider.hoverBackground #C8102E60
selection.background #4D6995
settings.checkboxForeground #C8102E
sideBar.background #101820
sideBar.border #4B4F54
sideBarSectionHeader.background #101820
sideBarSectionHeader.border #C8102E
statusBar.background #A6192E
statusBar.debuggingBackground #C8102E
statusBar.debuggingForeground #F2F0EB
statusBarItem.activeBackground #C8102E80
statusBarItem.hoverBackground #C8102E
tab.activeBorder #C8102E
tab.border #101820
tab.hoverBorder #A6192E
tab.inactiveBackground #101820
terminal.border #C8102E
terminal.selectionBackground #4D6995
terminal.tab.activeBorder #C8102E
textBlockQuote.background #A6192E80
textBlockQuote.border #C8102E
textLink.activeForeground #C8102E
textLink.foreground #A6192E
textSeparator.foreground #C8102E
titleBar.activeBackground #101820
titleBar.activeForeground #F2F0EB
titleBar.border #4B4F54
titleBar.inactiveBackground #101820
toolbar.activeBackground #939597
toolbar.hoverBackground #4B4F54
toolbar.hoverOutline #101820
welcomePage.background #101820
welcomePage.progress.background #101820
welcomePage.progress.foreground #C8102E
welcomePage.tileShadow. #C8102E
widget.shadow #C8102E variable, support.variable, support.class, support.constant, meta.definition.variable entity.name.function #F2F0EB —
keyword, modifier, variable.language.this, support.type.object, constant.language #47A23F —
entity.name.function, support.function #A6192E —
storage.type, storage.modifier #C8102E bold
support.module, support.node #47A23F italic
entity.name.type, entity.other.inherited-class #A6192E bold
entity.name.type.class #A6192E bold
variable.object.property, meta.field.declaration entity.name.function #A6192E —
meta.definition.method entity.name.function #A6192E —
meta.function entity.name.function #A6192E —
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end #C8102E —
meta.embedded, source.groovy.embedded, meta.template.expression #F2F0EB —
entity.name.tag.yaml #47A23F —
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json #47A23F —
constant.language.json #C8102E —
entity.other.attribute-name.class #C8102E —
entity.other.attribute-name.id #47A23F —
source.css entity.name.tag #A6192E bold
support.type.property-name #47A23F90 bold
meta.tag, punctuation.definition.tag #C8102E —
entity.other.attribute-name #A6192E —
text.html.markdown meta.link.inline, meta.link.reference #47A23F underline
text.html.markdown beginning.punctuation.definition.list #C8102E —
markup.italic #47A23F italic
markup.bold markup.italic, markup.italic markup.bold #47A23F italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown #47A23F —
text.html.markdown markup.fenced_code.block.markdown #47A23F —
markup.inline.raw.string.markdown #47A23F —
keyword.other.definition.ini #47A23F —
entity.name.section.group-title.ini #C8102E —
source.cs meta.class.identifier storage.type #A6192E bold
source.cs meta.method.identifier entity.name.function #A6192E —
source.cs meta.method-call meta.method, source.cs entity.name.function #A6192E —
source.cs storage.type #A6192E bold
source.cs meta.method.return-type #A6192E —
source.cs meta.preprocessor #C8102E —
source.cs entity.name.type.namespace #47A23F —
source.python entity.name.function.decorator, source.python meta.function.decorator support.type #47A23F —
source.python meta.function-call.generic #A6192E —
source.python support.type #A6192E —
source.python variable.parameter.function.language #F2F0EB —
source.python meta.function.parameters variable.parameter.function.language.special.self #C8102E —
string.quoted.docstring.multi.python #939597 italic
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 } !` ;
}
Warlord-Theme | Coding Theme