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_DimGray

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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