konfuzius
1/15/2013 - 4:43 PM

Standard compliant stylesheet switcher for HTML5. Works on iOS5 and all modern browsers.

Standard compliant stylesheet switcher for HTML5. Works on iOS5 and all modern browsers.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Default-Style" content="">
    <title>Stylesheet Switcher</title>
    <!-- CSS -->
    <link rel="stylesheet" href="/styles/darktheme.css" title="dark">
    <link rel="stylesheet" href="/styles/lighttheme.css" title="light">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="app.js"></script>
</head>
<body>
    <h1>Hello World</h1>
    <a href="#" class="js-change-style">change style</a>
</body>
</html>
$(document).ready(function()
{

    /* Check to see if we have saved a style already, a bit verbose but you get the drift! */
    var theme = localStorage.getItem('style');
    if (!theme) {
    	localStorage.setItem('style', 'light');
    };

    updateTheme();
    
    $('.js-change-style').click(function()
    {
        theme = localStorage.getItem('style');
        
        if (theme === 'light') {
            theme = 'dark';
        } else {
            theme = 'light';
        }
        
        localStorage.setItem('style', theme);

        updateTheme();
        return false;
    });
}

function updateTheme()
{
    currentTheme = localStorage.getItem('style');
    $('meta[http-equiv=Default-Style]')[0].content = currentTheme;
}