Categories
Programming

CSS: Adding Dark Mode to Posts on Certain Category on WordPress.com

The other day I had an idea to make photography posts in my main blog to be displayed in a sort of dark mode design. This is something recently implemented in Instagram also, and I do feel that black background color and surroundings make pictures and colors pop more.

Making things dark is relatively simple with CSS, but then I found that the tricky part is targeting the right posts. My photography posts are already categorized properly, and usually with WordPress the way to target certain pages is to make use of the built-in body class feature, which adds certain classes to certain page’s <body> tag to make it selectable with CSS.

It looks like this for one of my photography posts, for example:

<body class="post-template-default single single-post postid-1005 single-format-standard logged-in admin-bar no-customize-support custom-background wp-embed-responsive customizer-styles-applied no-sidebar singular has-cta-button header-overlay-none featured-content-overlay-light tags-hidden author-hidden highlander-enabled highlander-light custom-colors">

It’s quite a lot, but the main thing there is that there is no class name that’s related to the post’s category there. WordPress by default doesn’t do that (perhaps because it might cause unpredictable issues since sometimes people would add a gazillion categories to a post, which would then create a gazillion body classes to be added).

There is a code snippet solution that can add category names to a single post’s body class, which can then be added thru a plugin. Technically my main blog is on the Business plan on WordPress.com, so it supports installing plugin. However, long time ago I decided not to have plugins on the site since I want to see how far I can modify a WordPress.com site without using plugins or code modifications in general.

So, the only solution then seems to be by using Custom CSS code, targetting each post individually. This can be done using the post ID, which fortunately is added in the class. Something like this:

/* Dark mode for photography posts */
body.postid-1005,
body.postid-1005 .widget {
  background: #000;
}

This works, however the next problem is that it will get tedious to manually add CSS code for different post IDs, especially if there will be more posts in the future. This is until I discovered two things

  1. WordPress.com’s Custom CSS supports using the CSS extension SASS (and also LESS)
  2. Iteration is supported in SASS

So I messed around and came up with this solution:

$post-ids-dark-mode: 1005, 1337;
@each $id in $post-ids-dark-mode {
    body.postid-#{$id} {
        background: #000;
        .widget {
            background: #000;
        }
        .site-title a, p, h1, .widget a {
            color: #fff;
        }
        .comment a, .comment b {
            color: #d0d0d0;
            font-weight: bold;
        }
    }
}

The interesting parts are these:

$post-ids-dark-mode: 1005, 1337;

That’s a list that contains all post IDs to be affected. Yes, I will have to input each post ID individually there each time I have a new post, but at least I only need to add a single number and not write the rest of the CSS.

This then is where it loops:

@each $id in $post-ids-dark-mode {

It’s pretty self-explanatory what it’s doing, and the SASS code then gets automatically converted to CSS as follows:

body.postid-1005 {
    background: #000
}

body.postid-1005 .widget {
    background: #000
}

body.postid-1005 .site-title a,body.postid-1005 p,body.postid-1005 h1,body.postid-1005 .widget a {
    color: #fff
}

body.postid-1005 .comment a,body.postid-1005 .comment b {
    color: #d0d0d0;
    font-weight: 700
}

body.postid-1337 {
    background: #000
}

body.postid-1337 .widget {
    background: #000
}

body.postid-1337 .site-title a,body.postid-1337 p,body.postid-1337 h1,body.postid-1337 .widget a {
    color: #fff
}

body.postid-1337 .comment a,body.postid-1337 .comment b {
    color: #d0d0d0;
    font-weight: 700
}

The necessary CSS codes for all affected posts are automatically created. Pretty neat! Have a look at the result here.

One reply on “CSS: Adding Dark Mode to Posts on Certain Category on WordPress.com”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s