Announcement post: Blogger Contempo Light Theme: Light/Dark Mode Customization Prototype; Blogger Onboarding Toast Gadget

Few minutes back, I put up the below contents as an announcement post on LinkedIn and Facebook. I thought I should add the announcement post contents on this blog as well. I am omitting the cropped screenshot of GitHub Readme.

Blogger Contempo Light Theme: Light/Dark Mode Customization Prototype; Blogger Onboarding Toast Gadget


My main blogs are Blogger blogs, with me being active on one or more of them from 2011. Light/Dark mode support for them was something that I really missed on these blogs. Blogger does not natively support light/dark mode — at least, its Contempo Light theme (responsive supporting desktop and mobile), which I currently use for my Blogger blogs, does not respond to Chrome’s or the system’s light/dark mode setting.

Around two weeks back, I started checking out possibility of customizing Blogger's Contempo Light Theme to support light/dark mode. 

Web search had given me one or two posts which covered light/dark mode for Contempo theme. But they did not have clear instructions and at that time as I had no experience of significant customization (beyond font-size change and addition of standard gadgets type of stuff done in Blogger Layout/Theme), I could not understand it well enough to try it. 

With assistance from ChatGPT, I came up with a somewhat simple approach of changing colours using the universal selector * at a top level, when user has selected dark mode. This is not perfect, but the results are interesting. After some refinements, it has now reached the level of a working prototype.

To know more about this customization, please read the Readme file of its public GitHub repo shared above. The attached pic is a cropped screenshot from the Readme.

You can see the live prototype in action on the demo blog linked above.

I think that this light/dark mode customization prototype and its implementation approach may be useful for Blogger blogs using the Contempo Light theme that are regularly monitored and maintained. 

For such blogs, if the prototype level customization breaks for certain content, the maintainer can easily revert the blog to the default Contempo Light theme or a stable backup theme.

However, for blogs that are live but not regularly monitored, it may be risky to use this customization prototype as if the code breaks for some particular content type, the blog may not render correctly and that problem may remain unfixed till the blog maintainer comes to know of the issue and then fixes it. During this period, visitors may form a negative impression of the blog.

In conclusion, the Blogger theme customization approach used in this prototype adds a dark mode feature similar to what many well-known websites offer, making the blog more user- and visitor-friendly. Importantly, this approach does not require users or visitors to install a browser-based dark mode extension, enable forced dark mode in Chrome or other browsers, or use high-contrast mode across all applications on a desktop OS like Windows. However, the potential risk of the prototype code breaking for certain content types needs to be mitigated through regular monitoring and maintenance.

Comments

Post a Comment