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_DarkRed

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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