Time for action – adding a theme selector

To start with, we need a place to put the theme selector. So let's add a toolbar to the task list application's markup in taskAtHand.html. We will insert it between the <header> and <div id="main"> elements. The toolbar will contain a <label> and a <select> drop-down list. The list will contain four different color themes: blue, green, magenta, and red. You can find the code for this section in chapter2/example2.3:

<div id="app">
  <header>Task@Hand</header>
 <div id="toolbar">
 <label for="theme">Theme</label>
 <select id="theme" title="Select theme">
 <option value="blue">Blue</option>
 <option value="green">Green</option>

 <option value="magenta">Magenta</option>
 <option value="red">Red</option>
 </select>
 </div>
  <div id="main">

Now let's style up the toolbar. We will make the font a little smaller than the rest of the page and set the background color as black with some transparency so the color behind it bleeds through:

#toolbar
{
    padding: 0.25em;
    font-size: 0.8em;
    color: WhiteSmoke;
    background-color: rgba(0, 0, 0, 0.4);
}

Next, we have to implement the different themes. So let's create a few new CSS files, one for each theme. We will put them in a folder named themes to keep them grouped together. The CSS files will have the same names as the <option> values: blue.css, green.css, magenta.css, and red.css. Let's take a look at green.css:

#app
{
    background-color: #bcb;
    background: -webkit-linear-gradient(top, #bcb, #585);
    background: -moz-linear-gradient(top, #bcb, #585);
    background: -ms-linear-gradient(top, #bcb, #585);
    background: linear-gradient(top, #bcb, #585);
}
#app>header,
#app>footer
{
    background-color: #060;
}

Starting at the top we override the background gradients for the app element to make them a green color instead of blue. We also change the header and footer elements to make them green too. The other CSS files will be exactly the same as this one except they will have different colors.

Now let's add a stylesheet <link> element to the <header> element of the HTML file for the theme CSS file. Since the blue theme is the default, we will set it to load blue.css:

<link href="taskAtHand.css" rel="StyleSheet" />
<link id="theme-style" href="themes/blue.css" rel="StyleSheet" />

Notice that we include the theme stylesheet after the base one. That's what will allow us to override the default styles. Also note that we give the <link> element an ID attribute, so we will be able to get to it in our JavaScript later on.

The rest of the code we need to add is in taskAtHand.js. First, we will add a change event handler for the theme selector in the TaskAtHand.start() method:

$("#theme").change(onChangeTheme);

When the user chooses a new theme, it will call the onChangeTheme() private method:

function onChangeTheme()
{
    var theme = $("#theme>option").filter(":selected").val();
    setTheme(theme);
    appStorage.setValue("theme", theme);
}

This method gets the selected option from the list by getting its <option> elements and then finding the selected option using jQuery's :selected selector inside the filter() method. Then it calls the setTheme() method, which we will implement next. Lastly, we save the selected theme to localStorage so we can set it the next time the user comes back to the application.

The setTheme() method takes the theme name as a parameter. It gets the <link id="theme-style"> element and changes its href attribute to the new stylesheet's URL:

function setTheme(theme)
{
    $("#theme-style").attr("href", "themes/" + theme + ".css");
}

When this happens, the page will load the new stylesheet and apply its styles over the existing ones. And just like that, the page changes color.

Wait, we're not done yet. Remember how we saved the theme to localStorage? Now we have to get it back out when the user returns to our application. We will create a loadTheme() method to do that:

function loadTheme()
{
    var theme = appStorage.getValue("theme");
    if (theme)
    {
        setTheme(theme);
        $("#theme>option[value=" + theme + "]")
            .attr("selected","selected");
    }
}

This method gets the theme name from localStorage. If it finds one, it calls setTheme() to set it. Then it selects that theme in the drop-down by finding the <option> in the list that has the theme name for its value, and sets the selected attribute on it. The final thing to do is add a call to loadTheme() from the start() method, and we're done.