Skip to content
Permalink
Fetching contributors…
Cannot retrieve contributors at this time
57 lines (53 sloc) 1.55 KB
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Cookie</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
@keyframes white-black
{
0% { background-color: #fff; color: #000; }
100% { background-color: #000; color: #fff; }
}
.night-mode {
animation: white-black 1s;
background-color: #000;
color: #fff;
}
.full-width {
width:100%;
}
</style>
</head>
<body class="target">
<textarea class="target full-width" rows="10"></textarea>
<div class="target">
<button onclick="ReverseTheme();">ReverseTheme</button>
</div>
<script src="http://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>
<script type="text/javascript">
function getCookie(name) {
var value = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
return value? value[2] : null;
}
function ReverseTheme() {
if(!getCookie('theme')) {
document.cookie = 'theme=night_mode';
} else {
document.cookie = 'theme=; expires=Thu, 18 Dec 2013 12:00:00 UTC';
}
checkTheme();
}
function checkTheme() {
if(getCookie('theme')) {
$('.target').addClass('night-mode');
} else {
$('.target').removeClass('night-mode');
}
}
checkTheme();
</script>
</body>
</html>
You can’t perform that action at this time.