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_Chartreuse

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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