A theme inspired by the red spider lily flower. It was made from scratch but it should be pretty stable. + (Alpha) derivative light and dark themes "Monoxylphide" and "Umbraxyllide" also by me.
Full workbench mockup using this variant's colors and tokenColors.
Loading...
colors
Workbench UI color keys from the theme JSON colors map.
key
HEX
RGB
RGBA
activityBar.activeBackground
activityBar.background
activityBar.foreground
activityBar.inactiveForeground
activityBarBadge.background
badge.background
badge.foreground
button.background
button.foreground
button.secondaryBackground
checkbox.background
descriptionForeground
disabledForeground
dropdown.background
dropdown.border
dropdown.foreground
dropdown.listBackground
editor.background
editor.findMatchBackground
editor.findMatchHighlightBackground
editor.foldBackground
editor.foreground
editor.hoverHighlightBackground
editor.selectionBackground
editor.selectionHighlightBackground
editor.wordHighlightBackground
editor.wordHighlightStrongBackground
editorCodeLens.foreground
editorCursor.foreground
editorGroupHeader.tabsBackground
editorHoverWidget.background
editorHoverWidget.border
editorHoverWidget.foreground
editorLineNumber.activeForeground
editorLineNumber.foreground
editorLink.activeForeground
editorSuggestWidget.background
editorWidget.background
errorForeground
focusBorder
foreground
icon.foreground
input.background
input.foreground
input.placeholderForeground
inputValidation.errorBackground
inputValidation.errorBorder
inputValidation.errorForeground
inputValidation.infoBackground
inputValidation.infoBorder
list.activeSelectionBackground
list.activeSelectionForeground
list.activeSelectionIconForeground
list.dropBackground
list.errorForeground
list.filterMatchBackground
list.focusBackground
list.focusHighlightForeground
list.highlightForeground
list.hoverBackground
list.inactiveFocusBackground
list.inactiveSelectionBackground
list.inactiveSelectionIconForeground
listFilterWidget.background
menu.background
menubar.selectionBackground
panel.background
peekView.border
peekViewEditor.background
peekViewEditor.matchHighlightBackground
peekViewResult.background
peekViewResult.selectionBackground
peekViewTitle.background
quickInput.background
quickInputList.focusBackground
sash.hoverBorder
scrollbar.shadow
scrollbarSlider.activeBackground
scrollbarSlider.background
scrollbarSlider.hoverBackground
selection.background
sideBar.background
sideBar.border
sideBar.foreground
sideBarSectionHeader.background
sideBarSectionHeader.foreground
sideBarTitle.foreground
statusBar.background
statusBar.debuggingBackground
statusBar.noFolderBackground
symbolIcon.arrayForeground
symbolIcon.booleanForeground
symbolIcon.classForeground
symbolIcon.colorForeground
symbolIcon.constantForeground
symbolIcon.constructorForeground
symbolIcon.enumeratorForeground
symbolIcon.enumeratorMemberForeground
symbolIcon.eventForeground
symbolIcon.fieldForeground
symbolIcon.fileForeground
symbolIcon.folderForeground
symbolIcon.functionForeground
symbolIcon.interfaceForeground
symbolIcon.keyForeground
symbolIcon.keywordForeground
symbolIcon.methodForeground
symbolIcon.moduleForeground
symbolIcon.namespaceForeground
symbolIcon.nullForeground
symbolIcon.numberForeground
symbolIcon.objectForeground
symbolIcon.operatorForeground
symbolIcon.packageForeground
symbolIcon.propertyForeground
symbolIcon.referenceForeground
symbolIcon.snippetForeground
symbolIcon.stringForeground
symbolIcon.structForeground
symbolIcon.textForeground
symbolIcon.typeParameterForeground
symbolIcon.unitForeground
symbolIcon.variableForeground
tab.activeBackground
tab.activeForeground
tab.border
tab.hoverBackground
tab.inactiveBackground
tab.inactiveForeground
terminal.ansiBrightBlue
terminal.background
terminal.foreground
terminalCursor.foreground
textLink.activeForeground
textLink.foreground
titleBar.activeBackground
toolbar.activeBackground
widget.shadow
tokenColors
Foregrounds this theme assigns to the token scope catalog. A rule with only a font style is skipped, and a longer matching scope wins. Italic and bold rules are not listed — the preview above shows them in the code.
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}!`;}