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_DarkOliveGreen

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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