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_White

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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