Member Avatar for mushget

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.
thanks.

  • 4 Contributors
  • 3 Replies
  • 114 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by Arkinder

Dani AI

Generated

Brief summary and practical options tied to the thread: wants a page-wide "negative" that flips backgrounds/text to black/white for OLED savings, but leaves images and widgets alone. and already pointed to style toggles and script toggles; those are valid starting points. Two practical patterns that scale better across real sites are described below, with tradeoffs.

A fast visual toggle (easy to add site-wide)
This applies a CSS filter to the root to invert the rendered page, then re-inverts media so images and videos stay normal. It works on arbitrary markup and is quick to implement for testing or a per-site toggle:

html[data-theme="negative"] {
  filter: invert(1) hue-rotate(180deg);
}

html[data-theme="negative"] img,
html[data-theme="negative"] picture,
html[data-theme="negative"] video,
html[data-theme="negative"] svg,
html[data-theme="negative"] .no-invert {
  filter: invert(1) hue-rotate(180deg);
}

Toggle the data-theme attribute with a small script and persist the choice in localStorage. Caveats: backgrounds that are images, CSS gradients, pseudo-elements, or embedded widgets may still appear inverted; use .no-invert on elements that must keep brand colors.

A robust, production-ready approach
For predictable results, switch palettes via CSS custom properties (variables) and update them on toggle. That requires applying variables everywhere color is used, but it produces correct contrast, preserves brand assets, and avoids the visual glitches filters cause. Combine this with prefers-color-scheme to respect OS preferences (MDN prefers-color-scheme).

Accessibility and battery notes
Dark/black backgrounds give measurable OLED savings only when lots of pixels are truly black; results vary by device and brightness (Android dev: dark theme and battery). Always check text contrast after toggling; follow WCAG contrast guidance (WCAG contrast minimum). For sites with third-party widgets or inline SVGs, expect extra tweaks.

Recommended Answers

All 3 Replies

Member Avatar for Kraai

Hi

Not quite what you looking for, but firefox do have a plugin that invert web pages. If there is no answer to your problem, you may want to link the firefox plugin as an option for your site visitors.

Member Avatar for pixielady

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

Member Avatar for Arkinder

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">

	<head>
		<title></title>
		<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 = "";

			}
		}
		//-->
		</script>
	</head>
	
	<body>
	
	<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>

	</div>
	
	</body>
	
</html>

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 because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.