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_SteelBlue

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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