Skip to main content
Aldrico's | 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 #e6b450b3 activityBar.background #000000 activityBar.border #1e232b activityBar.foreground #565b66cc activityBar.inactiveForeground #565b6699 activityBarBadge.background #e6b450 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle — #bfbdb6 — comment #acb6bf8c italic string, constant.other.symbol #aad94c — string.regexp, constant.character, constant.other #95e6cb — constant.numeric
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
activityBarBadge.foreground
#000000
badge.background #e6b45033
badge.foreground #e6b450
button.background #e6b450
button.foreground #000000
button.hoverBackground #e1af4b
button.secondaryBackground #565b6633
button.secondaryForeground #bfbdb6
button.secondaryHoverBackground #565b6680
debugConsoleInputIcon.foreground #e6b450
debugExceptionWidget.background #0f131a
debugExceptionWidget.border #1e232b
debugIcon.breakpointDisabledForeground #f2966880
debugIcon.breakpointForeground #f29668
debugToolBar.background #0f131a
descriptionForeground #bfbdb6
diffEditor.diagonalFill #1e232b
diffEditor.insertedTextBackground #7fd9621f
diffEditor.removedTextBackground #f26d781f
dropdown.background #000000
dropdown.border #565b6645
dropdown.foreground #bfbdb6
editor.background #000000
editor.findMatchBackground #6c5980
editor.findMatchBorder #6c5980
editor.findMatchHighlightBackground #6c598066
editor.findMatchHighlightBorder #5f4c7266
editor.findRangeHighlightBackground #6c598040
editor.foreground #bfbdb6
editor.inactiveSelectionBackground #409fff21
editor.lineHighlightBackground #131721
editor.rangeHighlightBackground #6c598033
editor.selectionBackground #409fff4d
editor.selectionHighlightBackground #7fd96226
editor.selectionHighlightBorder #7fd96200
editor.snippetTabstopHighlightBackground #7fd96233
editor.wordHighlightBackground #73b8ff14
editor.wordHighlightBorder #73b8ff80
editor.wordHighlightStrongBackground #7fd96214
editor.wordHighlightStrongBorder #7fd96280
editorBracketMatch.background #6c73804d
editorBracketMatch.border #6c73804d
editorCodeLens.foreground #acb6bf8c
editorCursor.foreground #e6b450
editorError.foreground #d95757
editorGroup.background #0f131a
editorGroup.border #1e232b
editorGroupHeader.noTabsBackground #000000
editorGroupHeader.tabsBackground #000000
editorGroupHeader.tabsBorder #1e232b
editorGutter.addedBackground #7fd962cc
editorGutter.deletedBackground #f26d78cc
editorGutter.modifiedBackground #73b8ffcc
editorHoverWidget.background #000000
editorHoverWidget.border #1e232b
editorIndentGuide.activeBackground #6c738080
editorIndentGuide.background #6c738033
editorLineNumber.activeForeground #6c7380e6
editorLineNumber.foreground #6c738099
editorLink.activeForeground #e6b450
editorMarkerNavigation.background #0f131a
editorOverviewRuler.addedForeground #7fd962
editorOverviewRuler.border #1e232b
editorOverviewRuler.bracketMatchForeground #6c7380b3
editorOverviewRuler.deletedForeground #f26d78
editorOverviewRuler.errorForeground #d95757
editorOverviewRuler.findMatchForeground #6c5980
editorOverviewRuler.modifiedForeground #73b8ff
editorOverviewRuler.warningForeground #e6b450
editorOverviewRuler.wordHighlightForeground #73b8ff66
editorOverviewRuler.wordHighlightStrongForeground #7fd96266
editorRuler.foreground #6c738033
editorSuggestWidget.background #0f131a
editorSuggestWidget.border #1e232b
editorSuggestWidget.highlightForeground #e6b450
editorSuggestWidget.selectedBackground #47526640
editorWarning.foreground #e6b450
editorWhitespace.foreground #6c738099
editorWidget.background #000000
editorWidget.border #1e232b
errorForeground #d95757
extensionButton.prominentBackground #e6b450
extensionButton.prominentForeground #000000
extensionButton.prominentHoverBackground #e1af4b
focusBorder #e6b450b3
foreground #bfbdb6
gitDecoration.conflictingResourceForeground
gitDecoration.deletedResourceForeground #f26d78b3
gitDecoration.ignoredResourceForeground #565b6680
gitDecoration.modifiedResourceForeground #73b8ffb3
gitDecoration.submoduleResourceForeground #d2a6ffb3
gitDecoration.untrackedResourceForeground #7fd962b3
icon.foreground #bfbdb6
input.background #000000
input.border #565b6645
input.foreground #bfbdb6
input.placeholderForeground #565b6680
inputOption.activeBackground #e6b45033
inputOption.activeBorder #e6b4504d
inputOption.activeForeground #e6b450
inputValidation.errorBackground #000000
inputValidation.errorBorder #d95757
inputValidation.infoBackground #000000
inputValidation.infoBorder #39bae6
inputValidation.warningBackground #000000
inputValidation.warningBorder #ffb454
keybindingLabel.background #565b661a
keybindingLabel.border #bfbdb61a
keybindingLabel.bottomBorder #bfbdb61a
keybindingLabel.foreground #bfbdb6
list.activeSelectionBackground #47526640
list.activeSelectionForeground #bfbdb6
list.deemphasizedForeground #d95757
list.errorForeground #d95757
list.filterMatchBackground #5f4c7266
list.filterMatchBorder #6c598066
list.focusBackground #47526640
list.focusForeground #bfbdb6
list.focusOutline #47526640
list.highlightForeground #e6b450
list.hoverBackground #47526640
list.inactiveSelectionBackground #47526633
list.inactiveSelectionForeground #bfbdb6
list.invalidItemForeground #565b664d
listFilterWidget.background #0f131a
listFilterWidget.noMatchesOutline #d95757
listFilterWidget.outline #e6b450
minimap.background #000000
minimap.errorHighlight #d95757
minimap.findMatchHighlight #6c5980
minimap.selectionHighlight #409fff4d
minimapGutter.addedBackground #7fd962
minimapGutter.deletedBackground #f26d78
minimapGutter.modifiedBackground #73b8ff
panel.background #000000
panel.border #1e232b
panelTitle.activeBorder #e6b450
panelTitle.activeForeground #bfbdb6
panelTitle.inactiveForeground #bfbdb6
peekView.border #47526640
peekViewEditor.background #000000
peekViewEditor.matchHighlightBackground #6c598066
peekViewEditor.matchHighlightBorder #5f4c7266
peekViewResult.background #000000
peekViewResult.fileForeground #bfbdb6
peekViewResult.lineForeground #bfbdb6
peekViewResult.matchHighlightBackground #6c598066
peekViewResult.selectionBackground #47526640
peekViewTitle.background #47526640
peekViewTitleDescription.foreground #bfbdb6
peekViewTitleLabel.foreground #bfbdb6
pickerGroup.border #1e232b
pickerGroup.foreground #565b6680
progressBar.background #e6b450
scrollbar.shadow #1e232b00
scrollbarSlider.activeBackground #565b66b3
scrollbarSlider.background #565b6666
scrollbarSlider.hoverBackground #565b6699
selection.background #409fff4d
settings.headerForeground #bfbdb6
settings.modifiedItemIndicator #73b8ff
sideBar.background #000000
sideBar.border #1e232b
sideBarSectionHeader.background #000000
sideBarSectionHeader.border #1e232b
sideBarSectionHeader.foreground #bfbdb6
sideBarTitle.foreground #bfbdb6
statusBar.background #000000
statusBar.border #1e232b
statusBar.debuggingBackground #f29668
statusBar.debuggingForeground #000000
statusBar.foreground #bfbdb6
statusBar.noFolderBackground #0f131a
statusBarItem.activeBackground #565b6633
statusBarItem.hoverBackground #565b6633
statusBarItem.prominentBackground #1e232b
statusBarItem.prominentHoverBackground #00000030
statusBarItem.remoteBackground #e6b450
statusBarItem.remoteForeground #000000
tab.activeBackground #000000
tab.activeBorder #000000
tab.activeBorderTop #e6b450
tab.activeForeground #bfbdb6
tab.border #1e232b
tab.inactiveBackground #000000
tab.inactiveForeground #bfbdb6
tab.unfocusedActiveBorderTop #bfbdb6
tab.unfocusedActiveForeground #bfbdb6
tab.unfocusedInactiveForeground #bfbdb6
terminal.ansiBlack #1e232b
terminal.ansiBlue #53bdfa
terminal.ansiBrightBlack #686868
terminal.ansiBrightBlue #59c2ff
terminal.ansiBrightCyan #95e6cb
terminal.ansiBrightGreen #aad94c
terminal.ansiBrightMagenta #d2a6ff
terminal.ansiBrightRed #f07178
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #ffb454
terminal.ansiCyan #90e1c6
terminal.ansiGreen #7fd962
terminal.ansiMagenta #cda1fa
terminal.ansiRed #ea6c73
terminal.ansiWhite #c7c7c7
terminal.ansiYellow #f9af4f
terminal.background #000000
terminal.foreground #bfbdb6
textBlockQuote.background #0f131a
textLink.activeForeground #e6b450
textLink.foreground #e6b450
textPreformat.foreground #bfbdb6
titleBar.activeBackground #000000
titleBar.activeForeground #bfbdb6
titleBar.border #1e232b
titleBar.inactiveBackground #000000
titleBar.inactiveForeground #bfbdb6
tree.indentGuidesStroke #6c738080
walkThrough.embeddedEditorBackground #0f131a
welcomePage.buttonBackground #e6b45066
welcomePage.progress.background #131721
welcomePage.tileBackground #000000
welcomePage.tileShadow #00000080
widget.shadow #00000080 #d2a6ff
constant.language #d2a6ff —
variable, variable.parameter.function-call #bfbdb6 —
variable.language #39bae6 italic
punctuation.separator, punctuation.terminator #bfbdb6b3 —
punctuation.section #bfbdb6 —
punctuation.accessor #f29668 —
punctuation.definition.template-expression #ff8f40 —
punctuation.section.embedded #ff8f40 —
source.java storage.type, source.haskell storage.type, source.c storage.type #59c2ff —
entity.other.inherited-class #39bae6 —
storage.type.function #ff8f40 —
source.java storage.type.primitive #39bae6 —
entity.name.function #ffb454 —
variable.parameter, meta.parameter #d2a6ff —
variable.function, variable.annotation, meta.function-call.generic, support.function.go #ffb454 —
support.function, support.macro #f07178 —
entity.name.import, entity.name.package #aad94c —
entity.name.tag, meta.tag.sgml #39bae6 —
support.class.component #59c2ff —
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag #39bae680 —
entity.other.attribute-name #ffb454 —
support.constant #f29668 italic
support.type, support.class, source.go storage.type #39bae6 —
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation #e6b673 —
meta.diff, meta.diff.header #c594c5 —
source.ruby variable.other.readwrite #ffb454 —
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag #59c2ff —
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type #acb6bf8c —
support.type.property-name #39bae6 normal
constant.numeric.line-number.find-in-files - match #acb6bf8c —
constant.numeric.line-number.match #ff8f40 —
entity.name.filename.find-in-files #aad94c —
markup.heading, markup.heading entity.name #aad94c bold
markup.underline.link, string.other.link #39bae6 —
markup.italic #f07178 italic
markup.italic markup.bold, markup.bold markup.italic — bold italic
meta.separator #acb6bf8c bold
markup.quote #95e6cb italic
markup.list punctuation.definition.list.begin #ffb454 —
text.html.markdown markup.inline.raw #f29668 —
text.html.markdown meta.dummy.line-break #acb6bf8c —
punctuation.definition.markdown #acb6bf8c —
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 } !` ;
}