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_SlateGray

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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