⚠ī¸ Warning ⚠ī¸ Deprecated Code! This video tutorial contains outdated code.
💡 If you wish to update it, any AI assistant will update the code for you in seconds.

Theater Mode Overlay Tutorial Javascript Light Switch Toggle Dark

Published : November 17, 2014   •   Last Edited : November 24, 2025   •   Author : Adam Khoury
Learn to program web page theater mode darkness using a CSS and JavaScript overlay. This one uses a light switch as the user interface to allow a viewer to toggle the page in and out of theatre mode. Our elements and their CSS are structured a little bit differently to focus on an existing special content box on the page as opposed to bringing a new DIV into the center of the page. 
<!DOCTYPE html>
<html>
<head>
<style>
div#overlay {
	display:none;
	z-index: 2;
	background:url(style/opaqueDark.png);
	position:fixed;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	text-align:center;
}
img#lightSwitch {
	position:relative;
	z-index: 3;
	background:url(images/light_switch_down.jpg) no-repeat;
	cursor:pointer;
}
div#special {
	position:relative;
	z-index: 4;
}
</style>
<script>
function toggleTheatreMode(){
	var overlay = document.getElementById('overlay');
	var lightSwitch = document.getElementById('lightSwitch');
	if(overlay.style.display == "block"){
		overlay.style.display = "none";
		lightSwitch.src = "images/light_switch_up.jpg";
		lightSwitch.title = "Enter Theatre Mode";
	} else {
		overlay.style.display = "block";
		lightSwitch.src = "images/light_switch_down.jpg";
		lightSwitch.title = "Exit Theatre Mode";
	}
}
</script>
</head>
<body>
<!-- Start Overlay -->
<div id="overlay"></div>
<!-- End Overlay -->
<h1>Web page theatre mode example</h1>
<img id="lightSwitch" onmousedown="toggleTheatreMode()" src="images/light_switch_up.jpg" width="19" height="46" alt="switch" title="Enter Theatre Mode"> <h3 style="display:inline;">I can put a title here if I want</h3>
<div id="special">
  <iframe width="560" height="315" src="http://www.youtube.com/embed/69-R9GHcGWU" frameborder="0" allowfullscreen></iframe>
</div>
<h2>My web page has a lot off stuff on it</h2>
</body>
</html>
▲