How to change the color theme per post?

A client of mine wants to be able to choose between a dark and a light theme each time he publishes a post. What’s the best way to change the color of a theme per post?

I thought in creating a taxonomy called “template” and within that two options: “dark” and “light”. However, I dont know yet how to change the whole theme depending on the taxonomy if I load the single post. And I cant think of a smarter way to do it in Archive pages.

Is there a good approach to achieve this?

Solutions Collecting From Web of "How to change the color theme per post?"

I would agree to the comment by Howdy_McGee to use Custom Fields. A nice implementation would be possible with add_meta_box().


1. Approach: The body_class Filter

So for example, you could let him enter a custom field 'color-scheme'. In the next step, you could simply hook into the 'body_class'-filter and add another class to the <body>-tag depending on what is saved in the current custom field:

add_filter( 'body_class', 'chg_color_by_post' );
function chg_color_by_post( $classes ){
    if( is_singular() ){
        $color_scheme = get_post_meta( get_the_ID(), 'color-scheme', true );
        if( $color_scheme == 'dark' )
            $classes[] = 'dark';
        if( $color_scheme == 'light' )
            $classes[] = 'light';
    }
    return $classes;
}

Now you are free to go with your CSS stylesheet. For example:

.dark{
  background: #000;
}

.dark p{
  color: #fff;
}

.light{
  background:#fff;
}

.light p{
  color: #000;
}

Of course for this solution, you have to use the body_class() function in the <body>-Tag.


2. Approach: Enqueue different styles depending on custom field

Another solution based on the custom field would be to enqueue different styles depending on the value set in the custom field:

add_action( 'wp_enqueue_scripts', 'change_style_by_post' );
function change_style_by_post(){
    if( is_singular() ){
        $color_scheme = get_post_meta( get_the_ID(), 'color-scheme', true );
        if( $color_scheme == 'dark' )
            wp_enqueue_script( 'theme-dark', get_template_directory_uri() . '/style-dark.css' );
        if( $color_scheme == 'light' )
            wp_enqueue_script( 'theme-light', get_template_directory_uri() . '/style-light.css' );
    }
}

With this approach you are more flexible and you can organise your CSS code in different files. You could even remove all CSS Styles (by deregistering them, see for this wp_dequeue_style()) and register only styles for the specific color scheme.

You don’t specify the difference in details, but I would guess the two themes aren’t any, or at least much, different outside of color scheme.

My approach would be simply to implement one (or both) color schemes as secondary CSS stylesheets to enqueue conditionally and stick with same theme for both of them.