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_FireBrick

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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