Support » Plugin: AMP » Dark theme support

  • Resolved MultiformeIngegno

    (@lorenzone92)


    It would be great if there was a dark theme enabled by default and served using prefers-color-scheme media queries when color-scheme: dark is supported

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Pascal Birchler

    (@swissspidy)

    Thanks for your suggestion @lorenzone92!

    I assume you are using the plugin’s Reader mode feature? If so, I’ll happily add this item to an existing discussion about improving the Reader mode template and customization options. You can follow that issue for progress on the matter.

    Note that if you’re using Transitional or Standard mode, you could add dark mode support in your regular theme and AMP would just use that automatically.

    Please do – yes I’m using the reader feature

    For whoever is thinking of doing this, it’s super easy. This can be your starting point:

    add_action( 'amp_post_template_css', 'xyz_amp_my_additional_css_styles' );
    
    function xyz_amp_my_additional_css_styles( $amp_template ) {
    	?>
    	:root {
    		color-scheme: light dark;
    	}
    
    	@media (prefers-color-scheme: dark) {
    		.amp-wp-article {
    			background: #202020;
    			color: #fff;
    		}
    
    		.amp-wp-title {
    			color: #fff;
    			font-weight: 700;
    		}
    
    		body, .amp-wp-tax-category, .amp-wp-tax-tag, .amp-wp-meta {
    			color: #fff;
    		}
    
    		body {
    			background: #202020;
    		}
    
    		a, a:visited, .amp-wp-comments-link a {
    			color: #93B3DB;
    		}
    		span.amp-site-title {
    			color: #fff;
    		}
    	}
    	<?php
    }
    Plugin Author Weston Ruter

    (@westonruter)

    @lorenzone92 would you like to open a pull request?

    Thanks, doing it now

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