Support » Plugin: WP Dark Mode » Embed background colour change

  • Resolved davidstockdale13

    (@davidstockdale13)


    I want to make my embedded posts change colour with the dark mode to a grey background.

    I currently assign the style of my embedded posts with this function:

    /**
     * Customises the style/colours of embedded posts.
     */
    add_action( 'embed_head', 'embed_styles' );
    /**
     * Embed custom styles.
     */
    function embed_styles() {
        echo <<<CSS
    <style>
    	.wp-embed-author {
    		margin-top: 0.5em;
    	}
    	.wp-embed-author a {
    		color: #a6191a;
    	}
    	.wp-embed-author a:hover {
    		color: #454545;
     	}
     	.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;
     	}
    </style>
    CSS;
    }

    Now normally I would change the colour with something like this:

    .wp-embed {
    background-color:#ccc;
    color:#444;
    }

    But how would I change this style only when dark mode is active?

    I realise there is a paid version of this plugin that allows you to add CSS for only Dark Mode but if that works the same as Additional CSS that may not work for my situation so I’m hesitant to buy it before getting an answer…

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author WPPOOL

    (@wppool)

    Hi @davidstockdale13
    We just checked your website and found the embedded posts are showing fine in dark mode. https://recordit.co/tUDBtBjjkb So, we’re not quite sure of your requirement but what we have now is that you can write your own CSS for any elements to be applied for dark mode only.

    Or if you want, you can simply exclude any elements, sections, or pages being affected by dark mode.

    So if you like to change the colors for .wp-embed for dark mode only this can be done within our plugin.

    This video may explain better – https://www.youtube.com/watch?v=vcbRKAnEvMU

    My problem is when I try changing the styling of my embedded posts in “Additional CSS” it doesn’t work (which is why I’m using the “embed_styles” function shown above).

    Thus I’m assuming that if the plugins CSS adding works the same way “Additional CSS” does it wont work for my needs.

    Is there something I can check in an if statement within my “embed_styles” function to see if Dark Mode is active? Because that would solve my problem.

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.