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.

Open in VS Code GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

OhLED Themes (142-in-1) — OhLED_LemonChiffon

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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