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_Green

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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