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_Sienna

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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