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_Fuchsia

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#FF00FF88	—
keyword, storage	#FF00FF88	—
entity, strong	—	bold
invalid	#FF00FF88	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}!`;
}