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_Snow

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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