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_Teal

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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