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.

    Thread Starter multiformeingegno

    (@lorenzone92)

    Please do – yes I’m using the reader feature

    Thread Starter multiformeingegno

    (@lorenzone92)

    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?

    Thread Starter multiformeingegno

    (@lorenzone92)

    Thanks, doing it now

    Thread Starter multiformeingegno

    (@lorenzone92)

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Dark theme support’ is closed to new replies.