Skip to main content
Invictus | Coding 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 #c9d1d9 activityBar.background #12181F activityBar.border #30363d activityBar.foreground #c9d1d9 activityBar.inactiveForeground #6B7280 activityBarBadge.background #000000 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment, string.comment #656f79 — constant, entity.name.constant, variable.other.constant, variable.language, entity #7DD3FC — entity.name.tag.css #F2926F — support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded #A78BFA —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
activityBarBadge.foreground
#f0f6fc
badge.background #000000
badge.foreground #ffffff
breadcrumb.activeSelectionForeground #8b949e
breadcrumb.focusForeground #c9d1d9
breadcrumb.foreground #8b949e
breadcrumbPicker.background #12181F
button.background #2563EB
button.foreground #ffffff
button.hoverBackground #0d419d
checkbox.background #12181F
checkbox.border #30363d
debugToolBar.background #21262d
descriptionForeground #8b949e
diffEditor.insertedTextBackground #2ea04333
diffEditor.removedTextBackground #da363333
dropdown.background #12181F
dropdown.border #30363d
dropdown.foreground #c9d1d9
dropdown.listBackground #191E24
editor.background #12181F
editor.findMatchBackground #ffd33d44
editor.findMatchHighlightBackground #ffd33d22
editor.focusedStackFrameHighlightBackground #bb880088
editor.foldBackground #0f141b
editor.foreground #c9d1d9
editor.inactiveSelectionBackground #3392ff22
editor.lineHighlightBackground #0f141b
editor.selectionBackground #3392ff44
editor.selectionHighlightBackground #17e5e633
editor.selectionHighlightBorder #17e5e600
editor.stackFrameHighlightBackground #aa770077
editor.wordHighlightBackground #17e5e600
editor.wordHighlightBorder #17e5e699
editor.wordHighlightStrongBackground #17e5e600
editor.wordHighlightStrongBorder #17e5e666
editorBracketMatch.background #17e5e650
editorBracketMatch.border #17e5e600
editorCursor.foreground #79b8ff
editorGroup.border #30363d
editorGroupHeader.tabsBackground #12181F
editorGroupHeader.tabsBorder #30363d
editorGutter.addedBackground #4ADE8095
editorGutter.deletedBackground #EF444495
editorGutter.modifiedBackground #FBBF2495
editorIndentGuide.activeBackground #384049
editorIndentGuide.background #252a2f
editorLineNumber.activeForeground #788695
editorLineNumber.foreground #50595e
editorOverviewRuler.border #30363d
editorSuggestWidget.selectedBackground #0c2d6b
editorWhitespace.foreground #6e7681
editorWidget.background #191E24
errorForeground #f85149
focusBorder #388bfd
foreground #c9d1d9
gitDecoration.addedResourceForeground #4ADE80
gitDecoration.conflictingResourceForeground #FBBF24
gitDecoration.deletedResourceForeground #F87171
gitDecoration.ignoredResourceForeground #484f58
gitDecoration.modifiedResourceForeground #FBBF24
gitDecoration.submoduleResourceForeground #8b949e
gitDecoration.untrackedResourceForeground #4ADE80
input.background #12181F
input.border #30363d
input.foreground #c9d1d9
input.placeholderForeground #484f58
list.activeSelectionBackground #1a1f25
list.activeSelectionForeground #c9d1d9
list.focusBackground #101316
list.hoverBackground #181F26
list.hoverForeground #c9d1d9
list.inactiveFocusBackground #1a1f25
list.inactiveSelectionBackground #181F26
list.inactiveSelectionForeground #c9d1d9
menu.background #191E24
notificationCenterHeader.background #191E24
notificationCenterHeader.foreground #6e7681
notifications.background #191E24
notifications.border #30363d
notifications.foreground #8b949e
notificationsErrorIcon.foreground #f85149
notificationsInfoIcon.foreground #58a6ff
notificationsWarningIcon.foreground #f0883e
panel.background #12181F
panel.border #30363d
panelInput.border #30363d
panelTitle.activeBorder #c9d1d9
panelTitle.activeForeground #c9d1d9
panelTitle.inactiveForeground #8b949e
peekViewEditor.background #11171f88
peekViewEditor.matchHighlightBackground #ffd33d33
peekViewResult.background #12181F
peekViewResult.matchHighlightBackground #ffd33d33
pickerGroup.border #12181F
pickerGroup.foreground #8b949e
progressBar.background #1f6feb
quickInput.background #191E24
quickInput.foreground #8b949e
scrollbar.shadow #00000088
scrollbarSlider.activeBackground #484f5888
scrollbarSlider.background #484f5833
scrollbarSlider.hoverBackground #484f5844
settings.headerForeground #b7bec5
settings.modifiedItemIndicator #2563EB
sideBar.background #12181F
sideBar.border #30363d
sideBar.foreground #747c8b
sideBarSectionHeader.background #12181F
sideBarSectionHeader.border #30363d
sideBarSectionHeader.foreground #dce2e7
sideBarTitle.foreground #dce2e7
statusBar.background #12181F
statusBar.border #30363d
statusBar.debuggingBackground #da3633
statusBar.debuggingForeground #f0f6fc
statusBar.foreground #9CA3AF
statusBar.noFolderBackground #12181F
statusBarItem.prominentBackground #161b22
tab.activeBackground #12181F
tab.activeBorder #191E24
tab.activeBorderTop #12181F
tab.activeForeground #c9d1d9
tab.border #30363d
tab.hoverBackground #25282E
tab.inactiveBackground #12181F
tab.inactiveForeground #6B7280
tab.unfocusedActiveBorder #070d1a
tab.unfocusedActiveBorderTop #070d1a
tab.unfocusedHoverBackground #161b22
terminal.ansiBlue #818CF8
terminal.ansiBrightBlue #818CF8
terminal.ansiBrightCyan #818CF8
terminal.ansiBrightGreen #34D399
terminal.ansiBrightMagenta #FDBA74
terminal.ansiBrightRed #F43F5E
terminal.ansiCyan #818CF8
terminal.ansiGreen #F472B6
terminal.ansiMagenta #FDBA74
terminal.ansiRed #F43F5E
terminal.ansiYellow #A78BFA
terminal.background #12181F
terminal.foreground #9CA3AF
textBlockQuote.background #06090f
textBlockQuote.border #3b434b
textCodeBlock.background #f0f6fc26
textLink.activeForeground #58a6ff
textLink.foreground #58a6ff
textPreformat.foreground #8b949e
textSeparator.foreground #21262d
titleBar.activeBackground #12181F
titleBar.activeForeground #8b949e
titleBar.border #30363d
titleBar.inactiveBackground #12181F
titleBar.inactiveForeground #8b949e
tree.indentGuidesStroke #384049
welcomePage.buttonBackground #21262d
welcomePage.buttonHoverBackground #30363d entity.other.attribute-name.class.css
keyword.control.at-rule.media.css, keyword.control.at-rule.media.scss, keyword.control.at-rule.font-face.css #FFA95C —
keyword.operator.logical.scss #FFA95C —
entity.other.attribute-name.js #FB7185 —
entity.other.attribute-name.jsx, entity.other.attribute-name.tsx #FB7185 —
entity.other.attribute-name.pseudo-class.css #d2a8ee —
keyword.operator.ternary.js, keyword.operator.ternary.ts #79C0FF —
keyword.operator.assignment.jsx #79C0FF —
keyword.operator.arithmetic.tsx, keyword.operator.relational.tsx, keyword.operator.ternary.tsx #79C0FF —
punctuation.accessor.optional.tsx #79C0FF —
punctuation.separator.key-value.ts #79C0FF —
keyword.operator.comparison.ts #79C0FF —
keyword.operator.arithmetic.ts, keyword.operator.relational.ts #79C0FF —
keyword.operator.logical.ts #79C0FF —
storage.type.function.arrow.ts #79C0FF —
keyword.operator.increment.ts #79C0FF —
keyword.operator.assignment.ts #79C0FF —
keyword.operator.type.annotation.ts, keyword.operator.type.ts, keyword.operator.type.annotation.tsx, keyword.operator.type.tsx #79C0FF —
entity.name.type.interface #FDBA74 —
entity.name.type.class #FDBA74 —
entity.name.type, entity.name.type.alias.ts #FDBA74 —
support.type.graphql, meta.type.interface.graphql #A78BFA —
keyword.operator.spread.js #C9D1D9 —
keyword.operator.rest.js, meta.parameter.object-binding-pattern.js, keyword.operator.rest.ts #C9D1D9 —
variable.object.property.js, variable #7DD3FC —
variable.other.readwrite.alias.js #C9D1D9 —
variable.other.readwrite.alias.tsx #C9D1D9 —
entity.name, meta.export.default, meta.definition.variable #C9D1D9 —
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression #C9D1D9 —
keyword.other.unit #C9D1D9 —
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent #C9D1D9 —
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color #C9D1D9 —
support.function.transform.css, support.function.url.css, support.function.misc.css, meta.function.variable.css #FFA95C —
support.constant.vendored.property-value.css #FFA95C —
support.function.gradient.css #FFA95C —
entity.name.function #A78BFA —
entity.name.function.tsx #A78BFA —
support.function.js #A78BFA —
support.function.ts #A78BFA —
support.function.tsx #A78BFA —
support.class.component #A78BFA —
entity.other.attribute-name.html #FB7185 —
storage, storage.type #FB7185 —
support.type.object.module.js #FDBA74 —
storage.type.function.arrow.js #79C0FF —
storage.type.function.arrow.tsx #79C0FF —
keyword.operator.assignment.tsx #79C0FF —
keyword.operator.logical.tsx #79C0FF —
keyword.operator.logical.js, keyword.operator.relational.js, keyword.operator.relational.js.jsx #79C0FF —
variable.other.constant.object.tsx #C9D1D9 —
keyword.operator.spread.tsx, keyword.operator.spread.ts #C9D1D9 —
support.type.property-name.json #FB7185 —
constant.language.json #A78BFA —
storage.modifier.package, storage.modifier.import, storage.type.java #C9D1D9 —
string, punctuation.definition.string, string punctuation.section.embedded source #F2926F —
string.template.js #F2926F —
meta.property-name #79C0FF —
variable.other.constant.object.js #C9D1D9 —
variable.other.constant.object.ts, variable.other.constant.ts #C9D1D9 —
constant.numeric.decimal.js, constant.numeric.decimal.ts, constant.numeric.decimal.tsx #79C0FF —
variable.other.property.js, variable.other.property.ts, variable.other.property.tsx #7DD3FC —
variable.other.object.property.js #7DD3FC —
keyword.operator.assignment.compound.js #79C0FF —
keyword.operator.assignment.js, meta.var.expr.js, keyword.operator.comparison.js, keyword.operator.arithmetic.js #79C0FF —
punctuation.definition.parameters.begin.js, punctuation.definition.parameters.end.js, meta.brace.round.js #C9D1D9 —
support.variable.js, variable.other.object.js, support.variable.ts #C9D1D9 —
invalid.broken #FFA198 italic
invalid.deprecated #FFA198 italic
invalid.illegal #FFA198 italic
invalid.unimplemented #FFA198 italic
carriage-return #0D1117 italic underline
source.regexp, string.regexp #7DD3FC —
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition #7DD3FC —
string.regexp constant.character.escape #7EE787 bold
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.begin.tsx, punctuation.definition.template-expression.end.tsx #79C0FF —
meta.module-reference #79C0FF —
punctuation.definition.list.begin.markdown #F2926F —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown #F472B6 —
markup.heading, markup.heading entity.name #818CF8 bold
markup.italic #C9D1D9 italic
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted #FFA198 —
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted #7EE787 —
markup.changed, punctuation.definition.changed #FFA657 —
markup.ignored, markup.untracked #161B22 —
meta.diff.range #D2A8FF bold
meta.separator #79C0FF bold
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote #8B949E —
brackethighlighter.unmatched #FFA198 —
constant.other.reference.link, string.other.link #F472B6 underline
constant.language.boolean.true.js, constant.language.boolean.false.js, constant.language.boolean.true.ts, constant.language.boolean.false.ts, constant.language.boolean.true.tsx, constant.language.boolean.false.tsx #FB7185 —
token.error-token #F44747 —
token.debug-token #B267E6 —
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 } !` ;
}