Your giant hint is that the product lightbox is called the "product media modal" (product-media-modal) in the code. I originally pieced together this solution from this Shopify design discussion. The original fix added a "max-width" to the media modal which worked on desktop, but on mobile it limited images to a small vertical strip! I think I may have come up with a cleaner approach.

The lightbox is the media gallery that pops up when you click to magnify a product image.

Instructions

Navigate to the Online Store/Themes page from your side-menu, and select the three-dots menu next to the "customize" button. Select "Edit code."

Now find your assets/section-main-product.css file. If you can't find it, skip to the next section for alternate instructions.

Change background color

In my file, the product-media-modal code begins at line 617. You specifically want the section product-media-modal__content, found below. Click in the code file and use ctrl-F to find this.

As illustrated, you want to copy-paste in the following at the end of the  product-media-modal__content section, within the brackets, and substituting your preferred color for #000000:

background-color: #000000 !important;

This will change the color of the pop-up window surrounding images. If you want to change the color that appears behind images (e.g. before image loads), you need to instead add a new section, not within the brackets of another section:

.product-media-modal img {background-color: #000000 !important;}

Change image size/zoom

The lightbox default can open images in unwieldily sizes. You will get odd results if you try to change this by setting a max height or width for product-media-modal, product-media-modal[open], or product-media-modal__content. It may look okay on desktop, but not mobile, and vice versa.

You need to target the images in a new section of code (other file types may be more pesky). Copy-paste the following snippet into your assets/section-main-product.css file. Where: You can add this at the very end of the file; I put it right after the color edit from the previous section.

.product-media-modal img {
max-width: 100%;
width: 100vh;
}

max-width impacts mobile view; 100% means it is set to open the lightbox image to 100% the width of the screen, and the viewer can zoom in. Without this edit, my images were opening at full size in mobile view.

width impacts desktop view; the number is a percentage and vh stands for "viewport height." At 100vh, an image is restricted such that it can only be as wide as the screen height. I found 90vh to be the best balance of large and visible.

Change lightbox edge width or transparency

I have not found a way to do this without impacting the appearance of images.

Edit button to close lightbox

The button to close the lightbox is the product-media-modal__toggle. I found the button difficult to see, so I made a few edits to the border. That changes the circle around the X; I upped the width from 0.1 to 0.2rem, and lowered the color transparency from 0.1 to 0.5

If you don't have/can't find the file...

Simply go to your assets/base.css or layout/theme.liquid file instead, scroll to the bottom, and copy-paste in the following (replacing for your specifications):

.product-media-modal__content {
background-color: #000000 !important;
}

.product-media-modal img {
max-width: 100%;
width: 100vh;
background-color: #000000 !important;
}