OhLED Themes (142-in-1)

Name: OhLED Themes (142-in-1)
Author: Ophuscado

Publisher: OphuscadoThemes in package: 142

The OhLED Themes (142-in-1) for VSCode are inspired by the classic CRT monitors of yesteryear, specially crafted for the modern OLED displays of today.

GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

OhLED Themes (142-in-1) — OhLED_DarkViolet

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#a249dc88
activityBar.activeBorder#a249dc88
activityBar.activeFocusBorder#a249dc88
activityBar.background#000000
activityBar.border#a249dc88
activityBar.dropBorder#a249dc88
activityBar.foreground#a249dc
activityBar.inactiveForeground#a249dc88
activityBarBadge.background#a249dc
activityBarBadge.foreground#000000
badge.background#000000
badge.foreground#a249dc
breadcrumb.activeSelectionForeground#a249dc
breadcrumb.background#000000
breadcrumb.focusForeground#a249dc
breadcrumb.foreground#a249dc88
breadcrumbPicker.background#000000
button.background#000000
button.foreground#a249dc
button.hoverBackground#a249dc88
checkbox.background#000000
checkbox.border#a249dc88
checkbox.foreground#a249dc
debugConsole.errorForeground#a249dc
debugConsole.infoForeground#a249dc
debugConsole.sourceForeground#a249dc
debugConsole.warningForeground#a249dc
debugConsoleInputIcon.foreground#a249dc
debugExceptionWidget.background#000000
debugExceptionWidget.border#a249dc88
debugIcon.breakpointCurrentStackframeForeground#a249dc
debugIcon.breakpointDisabledForeground#a249dc33
debugIcon.breakpointForeground#a249dc
debugIcon.breakpointStackframeForeground#a249dc
debugIcon.breakpointUnverifiedForeground#a249dc
debugIcon.continueForeground#a249dc
debugIcon.disconnectForeground#a249dc
debugIcon.pauseForeground#a249dc
debugIcon.restartForeground#a249dc
debugIcon.startForeground#a249dc
debugIcon.stepBackForeground#a249dc
debugIcon.stepIntoForeground#a249dc
debugIcon.stepOutForeground#a249dc
debugIcon.stepOverForeground#a249dc
debugIcon.stopForeground#a249dc
debugTokenExpression.boolean#a249dc
debugTokenExpression.error#a249dc
debugTokenExpression.name#a249dc
debugTokenExpression.number#a249dc
debugTokenExpression.string#a249dc
debugTokenExpression.value#a249dc
debugToolBar.background#000000
debugToolBar.border#a249dc88
debugView.exceptionLabelBackground#000000
debugView.exceptionLabelForeground#a249dc
debugView.stateLabelBackground#000000
debugView.stateLabelForeground#a249dc
debugView.valueChangedHighlight#a249dc88
descriptionForeground#a249dc
diffEditor.border#a249dc88
diffEditor.diagonalFill#a249dc11
diffEditor.insertedTextBackground#a249dc33
diffEditor.removedTextBackground#a249dc33
dropdown.background#000000
dropdown.border#a249dc88
dropdown.foreground#a249dc
dropdown.listBackground#000000
editor.background#000000
editor.findMatchBackground#a249dc88
editor.findMatchBorder#a249dc88
editor.findMatchHighlightBackground#000000
editor.findMatchHighlightBorder#a249dc88
editor.findRangeHighlightBackground#000000
editor.findRangeHighlightBorder#a249dc88
editor.focusedStackFrameHighlightBackground#000000
editor.foldBackground#000000
editor.foreground#a249dc
editor.hoverHighlightBackground#200f2cff
editor.inactiveSelectionBackground#000000
editor.lineHighlightBackground#a249dc11
editor.rangeHighlightBackground#000000
editor.rangeHighlightBorder#a249dc88
editor.selectionBackground#a249dc33
editor.selectionForeground#a249dc
editor.selectionHighlightBackground#000000
editor.selectionHighlightBorder#a249dc88
editor.snippetFinalTabstopHighlightBackground#000000
editor.snippetFinalTabstopHighlightBorder#a249dc88
editor.snippetTabstopHighlightBackground#000000
editor.snippetTabstopHighlightBorder#a249dc88
editor.stackFrameHighlightBackground#000000
editor.symbolHighlightBackground#a249dc33
editor.symbolHighlightBorder#a249dc88
editor.wordHighlightBackground#a249dc33
editor.wordHighlightBorder#a249dc88
editor.wordHighlightStrongBackground#a249dc88
editor.wordHighlightStrongBorder#a249dc88
editorBracketMatch.background#000000
editorBracketMatch.border#a249dc88
editorCodeLens.foreground#a249dc
editorCursor.background#000000
editorCursor.foreground#a249dc
editorError.border#a249dc88
editorError.foreground#a249dc
editorGroup.border#a249dc88
editorGroup.dropBackground#a249dc33
editorGroup.emptyBackground#000000
editorGroup.focusedEmptyBorder#a249dc88
editorGroupHeader.border#a249dc88
editorGroupHeader.noTabsBackground#000000
editorGroupHeader.tabsBackground#000000
editorGroupHeader.tabsBorder#a249dc88
editorGutter.addedBackground#a249dc33
editorGutter.background#000000
editorGutter.commentRangeForeground#a249dc33
editorGutter.deletedBackground#a249dc33
editorGutter.foldingControlForeground#a249dc88
editorGutter.modifiedBackground#a249dc33
editorHint.border#a249dc88
editorHint.foreground#a249dc
editorHoverWidget.background#200f2cff
editorHoverWidget.border#a249dc88
editorHoverWidget.foreground#a249dc
editorHoverWidget.statusBarBackground#a249dc33
editorIndentGuide.activeBackground#a249dc33
editorIndentGuide.background#a249dc11
editorInfo.border#a249dc88
editorInfo.foreground#a249dc
editorLightBulb.foreground#a249dc88
editorLightBulbAutoFix.foreground#a249dc88
editorLineNumber.activeForeground#a249dc
editorLineNumber.foreground#a249dc33
editorLink.activeForeground#a249dc
editorMarkerNavigation.background#a249dc33
editorMarkerNavigationError.background#a249dc33
editorMarkerNavigationInfo.background#a249dc33
editorMarkerNavigationWarning.background#a249dc33
editorOverviewRuler.addedForeground#a249dc33
editorOverviewRuler.background#000000
editorOverviewRuler.border#a249dc88
editorOverviewRuler.bracketMatchForeground#a249dc33
editorOverviewRuler.commonContentForeground#a249dc33
editorOverviewRuler.currentContentForeground#a249dc33
editorOverviewRuler.deletedForeground#a249dc33
editorOverviewRuler.errorForeground#a249dc88
editorOverviewRuler.findMatchForeground#a249dc33
editorOverviewRuler.incomingContentForeground#a249dc33
editorOverviewRuler.infoForeground#a249dc33
editorOverviewRuler.modifiedForeground#a249dc33
editorOverviewRuler.rangeHighlightForeground#a249dc33
editorOverviewRuler.selectionHighlightForeground#a249dc33
editorOverviewRuler.warningForeground#a249dc33
editorOverviewRuler.wordHighlightForeground#a249dc33
editorOverviewRuler.wordHighlightStrongForeground#a249dc33
editorPane.background#a249dc33
editorRuler.foreground#a249dc
editorSuggestWidget.background#000000
editorSuggestWidget.border#a249dc88
editorSuggestWidget.foreground#a249dc
editorSuggestWidget.highlightForeground#a249dc
editorSuggestWidget.selectedBackground#a249dc88
editorUnnecessaryCode.border#a249dc88
editorUnnecessaryCode.opacity#a249dc33
editorWarning.border#a249dc88
editorWarning.foreground#a249dc
editorWhitespace.foreground#a249dc33
editorWidget.background#000000
editorWidget.border#a249dc88
editorWidget.foreground#a249dc
editorWidget.resizeBorder#a249dc88
errorForeground#a249dc
extensionBadge.remoteBackground#000000
extensionBadge.remoteForeground#a249dc
extensionButton.prominentBackground#000000
extensionButton.prominentForeground#a249dc
extensionButton.prominentHoverBackground#000000
focusBorder#a249dc88
foreground#a249dc
gitDecoration.addedResourceForeground#a249dc
gitDecoration.conflictingResourceForeground#a249dc
gitDecoration.deletedResourceForeground#a249dc
gitDecoration.ignoredResourceForeground#a249dc88
gitDecoration.modifiedResourceForeground#a249dc
gitDecoration.submoduleResourceForeground#a249dc
gitDecoration.untrackedResourceForeground#a249dc
icon.foreground#a249dc
imagePreview.border#a249dc88
input.background#000000
input.border#a249dc88
input.foreground#a249dc
input.placeholderForeground#a249dc88
inputOption.activeBackground#a249dc33
inputOption.activeBorder#a249dc88
inputOption.activeForeground#a249dc88
inputValidation.errorBackground#000000
inputValidation.errorBorder#a249dc88
inputValidation.errorForeground#a249dc
inputValidation.infoBackground#000000
inputValidation.infoBorder#a249dc88
inputValidation.infoForeground#a249dc
inputValidation.warningBackground#000000
inputValidation.warningBorder#a249dc88
inputValidation.warningForeground#a249dc
list.activeSelectionBackground#a249dc
list.activeSelectionForeground#000000
list.deemphasizedForeground#a249dc88
list.dropBackground#a249dc33
list.errorForeground#a249dc
list.filterMatchBackground#000000
list.filterMatchBorder#a249dc88
list.focusBackground#a249dc88
list.focusForeground#a249dc
list.highlightForeground#a249dc
list.hoverBackground#a249dc88
list.hoverForeground#a249dc
list.inactiveFocusBackground#a249dc33
list.inactiveSelectionBackground#a249dc33
list.inactiveSelectionForeground#a249dc
list.invalidItemForeground#a249dc
list.warningForeground#a249dc
listFilterWidget.background#000000
listFilterWidget.noMatchesOutline#a249dc88
listFilterWidget.outline#a249dc
menu.background#000000
menu.border#a249dc88
menu.foreground#a249dc
menu.selectionBackground#a249dc88
menu.selectionBorder#a249dc88
menu.selectionForeground#000000
menu.separatorBackground#a249dc88
menubar.selectionBackground#a249dc33
menubar.selectionBorder#a249dc88
menubar.selectionForeground#a249dc
merge.border#a249dc88
merge.commonContentBackground#000000
merge.commonHeaderBackground#000000
merge.currentContentBackground#000000
merge.currentHeaderBackground#000000
merge.incomingContentBackground#000000
merge.incomingHeaderBackground#000000
minimap.background#000000
minimap.errorHighlight#a249dc88
minimap.findMatchHighlight#a249dc88
minimap.selectionHighlight#a249dc88
minimap.warningHighlight#a249dc88
minimapGutter.addedBackground#a249dc33
minimapGutter.deletedBackground#a249dc33
minimapGutter.modifiedBackground#a249dc33
minimapSlider.activeBackground#a249dc33
minimapSlider.background#a249dc11
minimapSlider.hoverBackground#a249dc11
notebook.cellBorderColor#a249dc88
notebook.cellStatusBarItemHoverBackground#a249dc11
notebook.cellToolbarSeperator#a249dc88
notebook.focusedCellIndicator#a249dc33
notebook.outputContainerBackgroundColor#000000
notebookStatusErrorIcon.foreground#ff0000
notebookStatusRunningIcon.foreground#ff0000
notebookStatusSuccessIcon.foreground#ff0000
notificationCenter.border#a249dc88
notificationCenterHeader.background#000000
notificationCenterHeader.foreground#a249dc
notificationLink.foreground#a249dc
notifications.background#000000
notifications.border#a249dc88
notifications.foreground#a249dc
notificationsErrorIcon.foreground#a249dc
notificationsInfoIcon.foreground#a249dc
notificationsWarningIcon.foreground#a249dc
notificationToast.border#a249dc88
panel.background#000000
panel.border#a249dc88
panel.dropBorder#a249dc
panelInput.border#a249dc88
panelSection.border#a249dc88
panelSection.dropBackground#a249dc11
panelSectionHeader.background#000000
panelSectionHeader.border#a249dc88
panelSectionHeader.foreground#a249dc
panelTitle.activeBorder#a249dc88
panelTitle.activeForeground#a249dc
panelTitle.inactiveForeground#a249dc88
peekView.border#a249dc88
peekViewEditor.background#000000
peekViewEditor.matchHighlightBackground#000000
peekViewEditor.matchHighlightBorder#a249dc88
peekViewEditorGutter.background#000000
peekViewResult.background#000000
peekViewResult.fileForeground#a249dc
peekViewResult.lineForeground#a249dc
peekViewResult.matchHighlightBackground#000000
peekViewResult.selectionBackground#000000
peekViewResult.selectionForeground#a249dc
peekViewTitle.background#000000
peekViewTitleDescription.foreground#a249dc
peekViewTitleLabel.foreground#a249dc
pickerGroup.border#a249dc88
pickerGroup.foreground#a249dc
problemsErrorIcon.foreground#a249dc
problemsInfoIcon.foreground#a249dc
problemsWarningIcon.foreground#a249dc
progressBar.background#a249dc88
quickInput.background#000000
quickInput.foreground#a249dc
quickInputTitle.background#000000
scrollbar.shadow#a249dc33
scrollbarSlider.activeBackground#a249dc33
scrollbarSlider.background#a249dc33
scrollbarSlider.hoverBackground#a249dc33
searchEditor.findMatchBackground#000000
searchEditor.findMatchBorder#a249dc88
searchEditor.textInputBorder#a249dc88
selection.background#a249dc88
settings.checkboxBackground#000000
settings.checkboxBorder#a249dc88
settings.checkboxForeground#a249dc
settings.dropdownBackground#000000
settings.dropdownBorder#a249dc88
settings.dropdownForeground#a249dc
settings.dropdownListBorder#a249dc88
settings.headerForeground#a249dc
settings.modifiedItemIndicator#a249dc88
settings.numberInputBackground#000000
settings.numberInputBorder#a249dc88
settings.numberInputForeground#a249dc
settings.textInputBackground#000000
settings.textInputBorder#a249dc88
settings.textInputForeground#a249dc
sideBar.background#000000
sideBar.border#a249dc88
sideBar.dropBackground#a249dc33
sideBar.foreground#a249dc
sideBarSectionHeader.background#a249dc33
sideBarSectionHeader.border#a249dc88
sideBarSectionHeader.foreground#a249dc
sideBarTitle.foreground#a249dc
statusBar.background#a249dc33
statusBar.border#a249dc88
statusBar.debuggingBackground#a249dc
statusBar.debuggingBorder#a249dc88
statusBar.debuggingForeground#000000
statusBar.foreground#a249dc
statusBar.noFolderBackground#000000
statusBar.noFolderBorder#a249dc88
statusBar.noFolderForeground#a249dc
statusBarItem.activeBackground#000000
statusBarItem.hoverBackground#000000
statusBarItem.prominentBackground#000000
statusBarItem.prominentForeground#a249dc
statusBarItem.prominentHoverBackground#000000
statusBarItem.remoteBackground#000000
statusBarItem.remoteForeground#a249dc
symbolIcon.arrayForeground#a249dc
symbolIcon.booleanForeground#a249dc
symbolIcon.classForeground#a249dc
symbolIcon.colorForeground#a249dc
symbolIcon.constantForeground#a249dc
symbolIcon.constructorForeground#a249dc
symbolIcon.enumeratorForeground#a249dc
symbolIcon.enumeratorMemberForeground#a249dc
symbolIcon.eventForeground#a249dc
symbolIcon.fieldForeground#a249dc
symbolIcon.fileForeground#a249dc
symbolIcon.folderForeground#a249dc
symbolIcon.functionForeground#a249dc
symbolIcon.interfaceForeground#a249dc
symbolIcon.keyForeground#a249dc
symbolIcon.keywordForeground#a249dc
symbolIcon.methodForeground#a249dc
symbolIcon.moduleForeground#a249dc
symbolIcon.namespaceForeground#a249dc
symbolIcon.nullForeground#a249dc
symbolIcon.numberForeground#a249dc
symbolIcon.objectForeground#a249dc
symbolIcon.operatorForeground#a249dc
symbolIcon.packageForeground#a249dc
symbolIcon.propertyForeground#a249dc
symbolIcon.referenceForeground#a249dc
symbolIcon.snippetForeground#a249dc
symbolIcon.stringForeground#a249dc
symbolIcon.structForeground#a249dc
symbolIcon.textForeground#a249dc
symbolIcon.typeParameterForeground#a249dc
symbolIcon.unitForeground#a249dc
symbolIcon.variableForeground#a249dc
tab.activeBackground#a249dc33
tab.activeBorder#000000
tab.activeBorderTop#000000
tab.activeForeground#a249dc
tab.activeModifiedBorder#a249dc88
tab.border#000000
tab.hoverBackground#a249dc33
tab.hoverBorder#a249dc88
tab.hoverForeground#a249dc88
tab.inactiveBackground#000000
tab.inactiveForeground#a249dc88
tab.inactiveModifiedBorder#000000
tab.unfocusedActiveBackground#a249dc33
tab.unfocusedActiveBorder#000000
tab.unfocusedActiveBorderTop#000000
tab.unfocusedActiveForeground#a249dc
tab.unfocusedActiveModifiedBorder#000000
tab.unfocusedHoverBackground#a249dc33
tab.unfocusedHoverBorder#000000
tab.unfocusedHoverForeground#a249dc33
tab.unfocusedInactiveBackground#000000
tab.unfocusedInactiveForeground#a249dc88
tab.unfocusedInactiveModifiedBorder#000000
terminal.ansiBlack#a249dcff
terminal.ansiBlue#9744cdff
terminal.ansiBrightBlack#a249dcff
terminal.ansiBrightBlue#9744cdff
terminal.ansiBrightCyan#6c3193ff
terminal.ansiBrightGreen#823ab0ff
terminal.ansiBrightMagenta#8c3fbfff
terminal.ansiBrightRed#7736a1ff
terminal.ansiBrightWhite#562775ff
terminal.ansiBrightYellow#612c84ff
terminal.ansiCyan#6c3193ff
terminal.ansiGreen#823ab0ff
terminal.ansiMagenta#8c3fbfff
terminal.ansiRed#7736a1ff
terminal.ansiWhite#562775ff
terminal.ansiYellow#612c84ff
terminal.background#000000
terminal.border#a249dc88
terminal.foreground#a249dc
terminal.selectionBackground#a249dc33
terminalCursor.background#000000
terminalCursor.foreground#a249dc
textBlockQuote.background#000000
textBlockQuote.border#a249dc88
textCodeBlock.background#000000
textLink.activeForeground#a249dc
textLink.foreground#a249dc88
textPreformat.foreground#a249dc
textSeparator.foreground#a249dc
titleBar.activeBackground#000000
titleBar.activeForeground#a249dc
titleBar.border#a249dc88
titleBar.inactiveBackground#000000
titleBar.inactiveForeground#a249dc
tree.indentGuidesStroke#a249dc88
walkThrough.embeddedEditorBackground#000000
welcomePage.background#000000
welcomePage.buttonBackground#000000
welcomePage.buttonHoverBackground#000000
widget.shadow#a249dc33
window.activeBorder#a249dc88
window.inactiveBorder#a249dc33

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#a249dc88	—
keyword, storage	#a249dc88	—
entity, strong	—	bold
invalid	#a249dc88	italic underline

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

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}!`;
}