Block caption invisible in some themes

[fullofcaffeine]

Description

The caption text element (<figcaption>) has a transparent color set on some themes for some reason, making it invisible.

Step-by-step reproduction instructions

1. Make sure your WordPress site has the Twenty Fourteen theme set;
2. Add a Video or Image block, embed a Youtube video for example;
3. Or add an Image block and upload an image;
4. Add a caption to the video, or the image. Observe how the text can't be seen. You can still select and type, though.

Expected behaviour

The caption text (<figcaption>) should have a color that contrasts with the background to make it visible to the user, it should not be transparent.

Actual behaviour

The caption text element (<figcaption>) has a transparent color set on some themes (more details below) for some reason, making it invisible.

Screenshots or screen recording (optional)

WordPress information

• WordPress version: 5.8-alpha-50843.
• Gutenberg version: 10.7.2.
• Are all plugins except Gutenberg deactivated? Yes.
• Are you using a default theme (e.g. Twenty Twenty-One)? No.

Device information

• Device: Desktop.
• Operating system: Ubuntu Linux 18.04.
• Browser: Firefox 90.0b3.

[fullofcaffeine]

I've bisected and it seems to have been introduced here: #31870. cc @ellatrix.

[mrfoxtalbot]

I was able to reproduce this issue with version 10.7.2 of the plugin active. The problem is solved as soon as the plugin is deactivated.

All bundled themes between Twenty Ten and Twenty Sixteen (both included) are affected by this bug.

[ellatrix]

I don't see how #31870 could have caused this.

The rule making it white is:

.is-dark-theme .wp-block-image figcaption {
    color: rgba(255, 255, 255, 0.65);
}

Which is set by:

gutenberg/packages/base-styles/_mixins.scss

Lines 193 to 201 in b2466ba

	@mixin caption-style-theme() {
	color: #555;
	font-size: $default-font-size;
	text-align: center;
	.is-dark-theme & {
	color: $light-gray-placeholder;
	}
	}

The theme is detected to be dark. Was the editor background previously dark? As far as I can see the theme is not setting a dark background.
Or is the light/dark detection wrong?
And has the rule perhaps a too high specificity?

Cc @jasmussen

[jasmussen]

Not too long ago, a WordPress theme explicitly had to declare that it was "a dark theme", which would then result in the is-dark-theme body class, leveraged here. But recently that opt-in was automated, with a script that detects the background color. It's possible that script is now comparing colors against a missing element or something to that effect, detecting darkness where it shouldn't. @scruffian do you recall some context on this?

[ellatrix]

I think I see the problem. I'll make a PR.