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_Khaki

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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