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_SpringGreen

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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