Hi everyone! I'm a newbie and I want to create a toggle option in my webpage to turn the whole thing into negative. It has something to do about the fact that OLED screens aren't happy about the white backgrounds because it draws three times more power than conventional TFT with whites. Turning the whole page to Negative will convert that 90% white into black which put the OLED's inherent low power usage into use. BTW the negative should only affect the background and text leaving everything else untouched. How I wish somebody will make a firefox plug-in for this purpose.

6 Years
Discussion Span
Last Post by Arkinder

I'm no expert, but I guess you could write a different stylesheet and a button which refers the document to the second stylesheet...


All of this depends on your elements, and how you have styled them. This cannot be done in HTML or CSS alone. However, it can be easily done with JavaScript. I haven't used JavaScript actively in a few years; and I haven't made an effort to keep up with it, so I don't know if any of the code is deprecated or working in IE.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript">
		function negative () {
			if (document.body.style.backgroundColor != "black" && document.getElementById("container").style.color == "" ) {
				document.body.style.backgroundColor = "black";
				document.getElementById("container").style.color = "white";

			} else {
				document.body.style.backgroundColor = "white";
				document.getElementById("container").style.color = "";

	<div id="container">

		<a href="#" onclick="negative()">Toggle negative</a>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>


If you would like anything in the code explained feel free to ask. As I said before, whether this works or not depends on you current CSS.

Thanks, Arkinder

Edited by Arkinder: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.