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_DarkGreen

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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