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_Yellow

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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