Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
jmccloskey

Invert all colors

Question

I'm wondering if anyone knows how to either inject a code to invert all the colors of a page. Ideally I'm trying to create a button that can be pressed that will invert all the colors of a page.

Edited by jmccloskey
Initial Revision

Share this post


Link to post

6 answers to this question

Recommended Posts

  • 0

@jmccloskey -- I tried this out on a trial site and it works ok – first, you'll need to put this tag in the Settings > Advanced > Code Injection > Header field to use jquery:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Then, in the Footer field, paste:


<script>
 $(document).ready(
   $("a:contains('flip')").click(function(e) {
    e.preventDefault();
    $('body').css('filter', 'invert(100%)');
 }));
</script>

Replace 'flip' with whatever your button is labeled. Finally, you'll need to head to Site Styles and make sure Ajax Loading is unchecked. Ajax will stop the code from working. Right now the button doesn't flip the colors back when you click again; let me know if you'd like that option.

Share this post


Link to post
  • 0

Hello.

Thanks so much for this! How to I inject the code into the footer field?

Also, I would like the button to flip the colors back when I click again. Let me know how I should proceed.

Share this post


Link to post
  • 0

@jmccloskey – The footer field is in the same panel as the header field (Settings > Advanced > Code Injection). Here's a screenshot:

alt text

I updated the code to toggle the inversion on & off:


<script>
 $(document).ready(
   $("a:contains('flip')").click(function(e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    $("html").toggleClass("invert");
 }));
</script>

The key difference is that you need to add a new class in Design > Custom CSS:


.invert {
 filter: invert(100%);
}

Let me know how it goes. I'm using a blank "Dev Mode" site; if you run into issues, it might be your template. Just share your site URL and I'll take a look.

screen-shot-2019-09-03-at-102404-pm.png.6c8c4ba148f7d2943cd5e6ba176bb3c7.png

Share this post


Link to post
  • 0

To do this, look for the Accessibility section in your phone's settings. On the iPhone, set the triple-click setting to "Invert Colors." On Android, select "Inverted Rendering." Then you'll be able to text or email in the dark without drawing everyone else's attention.Invert Your Phone's Colors to Text in the Dark Without Annoying Others............ We all know that staring at bright screens before bed can wreak havoc on our sleep patterns, but sometimes we don't have a choice. Luckily, iOS and Android 4.0 and above make it easy to invert screen colors for an instant "night mode."We've previously shared how to invert colors your desktop browser, and the trick is just as helpful for phones. If you're on an Android device, open your browser, go to Settings > Accessibility, and find the "Inverted Rendering" option at the bottom of the menu. Checking the box will invert the colors of web pages (this manga site) , turning white background black and making them much easier on the eyes. Depending on your ROM, you may be able to invert colors across the entire OS through the settings menu, but any ICS or above phone should at least be able to use this trick in the browser.

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...