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_Tomato

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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