Skip to content

Instantly share code, notes, and snippets.

@chikoski
Last active August 29, 2015 14:13
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 chikoski/fffbf16faf32389decda to your computer and use it in GitHub Desktop.
Save chikoski/fffbf16faf32389decda to your computer and use it in GitHub Desktop.
body{
background-color: white;
overflow: hidden;
}
body.night{
background-color: black;
color: white;
}
h1{
font-size: 640%;
border-style: none;
line-height: .9;
transform: rotate(-15deg);
margin-left: -0.2em;
width: 130%;
transition-duration: 1.5s;
}
.night h1{
transform: rotate(345deg);
}
window.addEventListener("load", function() {
var threshold = 50;
var className = "night";
var body = document.querySelector("body");
window.addEventListener("devicelight", function(event){
if(event.value < threshold){
body.classList.add(className);
}else{
body.classList.remove(className);
}
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">
<title>Hello World</title>
<link rel="stylesheet" href="app.css">
<!-- Inline scripts are forbidden in Firefox OS apps (CSP restrictions),
so we use a script file. -->
</head>
<body>
<!-- This code is in the public domain. Enjoy! -->
<h1>こんにちは!せかい!</h1>
<script src="app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment