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_ForestGreen

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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