Skip to content

Instantly share code, notes, and snippets.

@danielhaim1

danielhaim1/change-theme.js

Created June 7, 2013 19:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save danielhaim1/5731816 to your computer and use it in GitHub Desktop.
Save danielhaim1/5731816 to your computer and use it in GitHub Desktop.
Download ZIP
Change Theme Color (.js button)
Raw
change-theme.js
$(document).ready(function () {
swap();
});
var swap = function () {
$('.light').click(function () {
$(this).removeClass('light').addClass('dark').find('div').text('Darker');
$('body').removeClass('darker').addClass('lighter');
swap();
});
$('.dark').click(function () {
$(this).removeClass('dark').addClass('light').find('div').text('Lighter');
$('body').removeClass('lighter').addClass('darker');
swap();
});
}
/** CSS **/
/*
*{
-webkit-transition: all 0.6s ease-in;
-moz-transition: all 0.6s ease-in;
-ms-transition: all 0.6s ease-in;
-o-transition: all 0.6s ease-in;
transition: all 0.6s ease-in;
}
body.lighter{background: #bbb;}
body.darker{ background: #666;}
.light, .dark{
font: 700 18px Arial;
text-decoration: none;
}
div.light{color: #FFF;border: 3px solid #FFF;padding: 15px;width: 200px;
position: absolute;top: 50%;left: 50%;margin: -150px 0 0 -150px;text-align: center;
}
div.dark{color: #777;border: 3px solid #777;padding: 15px;width: 200px;
position: absolute;top: 50%;left: 50%;margin: -150px 0 0 -150px;text-align: center;
}
.light a{color: #FFF;text-decoration: none;}
.dark a{color: #777;text-decoration: none;}
*/
/** HTML **/
/*
<body class="darker">
<div class="light"><a href="#"><div>Lighter</div></a></div>
</body>
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment