public
Last active

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

  • Download Gist
app.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
$(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;
}
default.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
<!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>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.