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_DarkCyan

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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