Caching dynamic partials when using Turbolinks

Yesterday I blogged about caching and loading dynamic partials via ajax for non static content. T...

Resetting JavaScript variables when using Turbolinks

Every time you load a new page with Turbolinks only the body of the page is replaced. This means ...

Friday, November 30, 2012
Tips for dynamic CSS themes using jQuery

I recently added a dark theme to this blog, it's great for night time reading on your laptop, tablet or phone. This is the first time I've implemented dynamic theming on a site and it was super simple to integrate. I thought I would share my thoughts and the implementation strategies I used.


The first thing I did was add a class to my body tag, in my case the class name was dark. Using Sass or Less will make the following a lot easier although it's doable with plain css.

Basically what you want to do is create a new body.theme-name definition in your stylesheet and using scss I was able to nest the rest of my styles underneath this.

body.dark {
  a {
    color:lighten($main-color, 20%);
  /* rest of your styles you want to override */

After I got everything looking how I wanted I removed the class from the body since I didn't want this to be the default. The idea here is dynamically add the class to the body when the user wants to switch the theme. I also wanted to be able to remember the user's choice so on subsequent page loads it would load the correct theme. This is easy enough with jQuery and the jQuery cookie plugin.

$('.change-theme').on 'click', ->
  if $('body').hasClass('dark')
    $.cookie('dark_mode', 'false')
    $.cookie('dark_mode', 'true')

The above code listens for a click on my change theme button. If the body already has a class name of dark I then set a cookie with the user's preference and toggle the theme. I do the opposite if the body doesn't have the class name.

I now needed a way to load the theme depending on the user's preference that was in the cookie. Again this is quite easy to do.

if $.cookie('dark_mode') is 'true'

I'm sure there are some jQuery plugins out there that do this for you already but it's easy enough to roll your own and it gives you more control over the implementation. I hope you enjoyed this post and if you have any questions or suggestions on how to improve this implementation leave a comment below.

Tweet this post if you found it useful

Related Posts

Resetting JavaScript variables when using Turbolinks

Saturday, December 1, 2012  ·   0

Every time you load a new page with Turbolinks only the body of the page is replaced.... (continued)

Using Polytalk inside a Meteor Application

Sunday, December 9, 2012  ·   0

I've put together a simple demo that integrates Polytalk with Meteor. The app all... (continued)

Introducing Polytalk. A simple protocol which allows communication between different languages via TCP.

Monday, November 26, 2012  ·   0

Polytalk is my latest open source project. I developed it out of the need to communic... (continued)

Building a simple single page application using AngularJS

Tuesday, December 4, 2012  ·   0

I am going to walk you through building a SPA (single page application) using Angular... (continued)


Comment successfully added. View comment.×

Comments are now closed for this article.