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_CadetBlue

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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