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.

Open in VS Code GitHub

Color themes

VS Code preview

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

OhLED Themes (142-in-1) — OhLED_Orange

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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