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_LightGreen

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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