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_CornflowerBlue

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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