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_DarkOrange

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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