Dark Mode Supporting Embeds

I make use of WP Dark Mode plugin to allow users to switch between light and dark styles.

Unfortunately embedded posts seem to be styled separately to everything else.

This means that the dark mode doesn’t effect the embed styling when toggled.

Thus i tinkered with a solution on how to style embeds to look good on dark mode and light mode.

What I settled upon was to inherit styles instead of styling them directly.

This means that if the page/post is set to dark mode when it loads then the embed will inherit those styles.

This allowed me to have the embedded post’s background change with the page/post when dark mode is toggled.

Just make sure that the font styles being inherited look good on both backgrounds.

(personally I like setting the font colour to “#8c8f94” so it’s always readable).

/**
 * Customises the style/colours of embedded posts (David Stockdale).
 */
add_action( 'embed_head', 'embed_styles' );
/**
 * Embed custom styles (David Stockdale).
 */
function embed_styles() {
    echo <<<CSS
<style>
	.wp-embed {
		font-family: "Open Sans", sans-serif;
		background-color:inherit; //THIS COPIES FONT COLOUR
		border: none;
	}
	.wp-embed-heading a {
		font-family: "Open Sans", sans-serif;
		color: inherit; //THIS COPIES FONT COLOUR
	}
	.wp-embed-author {
		margin-top: 0.5em;
	}
	.wp-embed-author a {
		color: rgb(217, 104, 101);
	}
	.wp-embed-author a:hover {
		color: darkgray;
 	}
 	.wp-embed-featured-image {
 		width: 150px!important;
		height: 150px!important;
 	}
	.wp-embed-featured-image > a > img {
 		width: 150px!important;
		object-fit: cover;
		height: 150px!important;
 	}
	.wp-embed-excerpt > p {
		word-break:break-word!important;
	}
</style>
CSS;
}