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_Indigo

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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