Skip to content

Instantly share code, notes, and snippets.

@sistematico

sistematico/app.js

Forked from jmwhittaker/app.js
Created May 17, 2017 08:14
Show Gist options
  • Save sistematico/71e8943c80c856ccf75509ca574a00d1 to your computer and use it in GitHub Desktop.
Save sistematico/71e8943c80c856ccf75509ca574a00d1 to your computer and use it in GitHub Desktop.
Download ZIP
Standard compliant stylesheet switcher for HTML5. Works on iOS5 and all modern browsers.
Raw
app.js
$(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;
}
Raw
default.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment