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.background #080808 activityBar.dropBackground #6C6F9380 activityBar.foreground #D5D8DAB3 activityBarBadge.background #E95378 activityBarBadge.foreground #06060C badge.background #2E303E tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment #BBBBBB4D italic constant.character.escape #25B0BCE6 — entity.name #FAC29AE6 — entity.name.function #FDB849 — entity.name.tag
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
dark-horizon-italic — Dark Horizon Italic
badge.foreground
#D5D8DA
breadcrumbPicker.background #232530
button.background #2E303E
debugToolBar.background #1C1E26
diffEditor.insertedTextBackground #09F7A01A
diffEditor.removedTextBackground #F43E5C1A
dropdown.background #232530
dropdown.listBackground #2E303E
editor.background #0e0e0e
editor.findMatchBackground #000000
editor.findMatchHighlightBackground #1b1b1b
editor.findRangeHighlightBackground #6C6F931A
editor.hoverHighlightBackground #6C6F934D
editor.inactiveSelectionBackground #352a3b
editor.lineHighlightBackground #080808
editor.rangeHighlightBackground #2E303E80
editor.selectionBackground #a42aeb3d
editor.selectionHighlightBackground #1b1b1b
editor.wordHighlightBackground #a42aeb3d
editor.wordHighlightStrongBackground #a42aeb3d
editorBracketMatch.background #6C6F9380
editorBracketMatch.border #6C6F9300
editorCodeLens.foreground #6C6F9380
editorCursor.background #1C1E26
editorCursor.foreground #FB8B24
editorError.foreground #F43E5C
editorGroup.border #1A1C23
editorGroup.dropBackground #6C6F934D
editorGroupHeader.tabsBackground #0e0e0e
editorGutter.addedBackground #09F7A0B3
editorGutter.deletedBackground #F43E5CB3
editorGutter.modifiedBackground #21BFC2B3
editorIndentGuide.activeBackground #2E303E
editorIndentGuide.background #1f1f1f57
editorLineNumber.activeForeground #D5D8DA80
editorLineNumber.foreground #D5D8DA1A
editorOverviewRuler.addedForeground #09F7A080
editorOverviewRuler.border #2E303EB3
editorOverviewRuler.bracketMatchForeground #D5D8DA80
editorOverviewRuler.deletedForeground #F43E5C80
editorOverviewRuler.errorForeground #F43E5CE6
editorOverviewRuler.findMatchForeground #6C6F93
editorOverviewRuler.modifiedForeground #21BFC280
editorOverviewRuler.warningForeground #27D79780
editorRuler.foreground #6C6F934D
editorSuggestWidget.highlightForeground #E95378
editorWarning.foreground #27D797B3
editorWhitespace.foreground #1f1f1f
editorWidget.background #141414
editorWidget.border #232530
errorForeground #F43E5C
extensionButton.prominentBackground #E95378
extensionButton.prominentHoverBackground #E9436D
focusBorder #1A1C23
foreground #D5D8DA
gitDecoration.addedResourceForeground #27D797B3
gitDecoration.deletedResourceForeground #F43E5C
gitDecoration.ignoredResourceForeground #D5D8DA4D
gitDecoration.modifiedResourceForeground #FAB38E
gitDecoration.untrackedResourceForeground #27D797
input.background #141414
inputOption.activeBorder #E9436D80
inputValidation.errorBackground #F43E5C80
inputValidation.errorBorder #F43E5C00
list.activeSelectionBackground #2E303E80
list.activeSelectionForeground #D5D8DA
list.dropBackground #6C6F9380
list.errorForeground #F43E5CE6
list.focusBackground #2E303E80
list.focusForeground #D5D8DA
list.highlightForeground #E95378
list.hoverBackground #2E303E80
list.hoverForeground #D5D8DA
list.inactiveFocusBackground #2E303E80
list.inactiveSelectionBackground #2E303E4D
list.inactiveSelectionForeground #D5D8DA
list.warningForeground #27D797B3
panelTitle.activeBorder #E95378
peekView.border #1A1C23
peekViewEditor.background #232530
peekViewEditor.matchHighlightBackground #6C6F9380
peekViewResult.background #232530
peekViewResult.matchHighlightBackground #6C6F9380
peekViewResult.selectionBackground #2E303E80
peekViewTitle.background #232530
pickerGroup.foreground #E95378E6
progressBar.background #E95378
scrollbar.shadow #16161C
scrollbarSlider.activeBackground #6C6F9380
scrollbarSlider.background #6C6F931A
scrollbarSlider.hoverBackground #6C6F934D
selection.background #6C6F9380
sideBar.background #0e0e0e
sideBar.dropBackground #6C6F934D
sideBar.foreground #D5D8DA80
sideBarSectionHeader.background #0e0e0e
sideBarSectionHeader.foreground #D5D8DAB3
statusBar.background #0e0e0e
statusBar.debuggingBackground #FAB38E
statusBar.debuggingForeground #06060C
statusBar.foreground #D5D8DA80
statusBar.noFolderBackground #1C1E26
statusBarItem.hoverBackground #2E303E
statusBarItem.prominentBackground #2E303E
statusBarItem.prominentHoverBackground #6C6F93
tab.activeBackground #0e0e0e
tab.activeBorder #E95378
tab.border #1C1E2600
tab.inactiveBackground #0e0e0e
terminal.ansiBlack #000000
terminal.ansiBlue #3333ff
terminal.ansiBrightBlack #7f7f7f
terminal.ansiBrightBlue #6666ff
terminal.ansiBrightCyan #66ffff
terminal.ansiBrightGreen #66ff66
terminal.ansiBrightMagenta #ff66ff
terminal.ansiBrightRed #ff6666
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #ffff66
terminal.ansiCyan #33ffff
terminal.ansiGreen #33ff33
terminal.ansiMagenta #ff33ff
terminal.ansiRed #ff3333
terminal.ansiWhite #ffffff
terminal.ansiYellow #ffff33
terminal.background #00000000
terminal.foreground #ff1b6e
terminal.selectionBackground #6C6F934D
terminalCursor.background #ffcc00
terminalCursor.foreground #069fff
textLink.activeForeground #E9436D
textLink.foreground #E95378
titleBar.activeBackground #0e0e0e
titleBar.inactiveBackground #1C1E26
walkThrough.embeddedEditorBackground #232530
widget.shadow #16161C #E95678E6
entity.name.type, storage.type.cs #FAC29AE6 italic
entity.other.attribute-name #46ACAD italic
entity.other.inherited-class #FAB795E6 italic
entity.other.attribute-name.id #25B0BCE6 italic
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #FAB795E6 italic
entity.name.variable, variable #E95678E6 italic
entity.name.type.class.ts, entity.name.type.interface.ts #E0AAFF italic
variable.other.constant.property.ts, variable.other.constant.object.property.ts #FFFFFF italic
keyword.other.unit #F09483E6 —
markup.quote #FAB795B3 italic
markup.heading, entity.name.section #E95678E6 —
markup.italic #25B0BCE6 italic
markup.inline.raw, markup.fenced_code.block #F09483E6 —
markup.underline.link #FAB795E6 italic
storage, keyword, keyword.operator, keyword.operator.new, keyword.operator.logical, keyword.operator.expression, keyword.operator.delete, variable.language #46ACAD italic
text.html.derivative #ced4da —
string.quoted, string.template, constant, string.quoted.double, string.quoted.single, string.quoted.double.ts, constant.numeric.decimal, constant.language.null #eaac8b —
string.other.link #F09483E6 —
support.function #25B0BCE6 italic
support.variable #E95678E6 italic
support.type.property-name, meta.object-literal.key #E95678E6 italic
support.type.property-name.css #d9d9d9 —
variable.parameter — italic
string.template meta.embedded #BBBBBB —
punctuation.definition.tag, punctuation.separator #ffffff9f —
punctuation.definition.template-expression #B877DBE6 —
punctuation.section.embedded #B877DBE6 —
punctuation.definition.list #F09483E6 —
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 } !` ;
}
dark-horizon-italic | Coding Theme