Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// create a bookmark and use this code as the URL, you can now toggle the css on/off
// thanks+credit: https://dev.to/gajus/my-favorite-css-hack-32g3
javascript: (function() {
var elements = document.body.getElementsByTagName('*');
var items = [];
for (var i = 0; i < elements.length; i++) {
if (elements[i].innerHTML.indexOf('* { background:#000!important;color:#0f0!important;outline:solid #f00 1px!important; background-color: rgba(255,0,0,.2) !important; }') != -1) {
items.push(elements[i]);
}
}
if (items.length > 0) {
for (var i = 0; i < items.length; i++) {
items[i].innerHTML = '';
}
} else {
document.body.innerHTML +=
'<style>* { background:#000!important;color:#0f0!important;outline:solid #f00 1px!important; background-color: rgba(255,0,0,.2) !important; }\
* * { background-color: rgba(0,255,0,.2) !important; }\
* * * { background-color: rgba(0,0,255,.2) !important; }\
* * * * { background-color: rgba(255,0,255,.2) !important; }\
* * * * * { background-color: rgba(0,255,255,.2) !important; }\
* * * * * * { background-color: rgba(255,255,0,.2) !important; }\
* * * * * * * { background-color: rgba(255,0,0,.2) !important; }\
* * * * * * * * { background-color: rgba(0,255,0,.2) !important; }\
* * * * * * * * * { background-color: rgba(0,0,255,.2) !important; }</style>';
}
})();
@rokhimin

This comment has been minimized.

Copy link

rokhimin commented Sep 4, 2019

image

@Kessi

This comment has been minimized.

Copy link

Kessi commented Sep 4, 2019

Hi vcastroi,

You said:
// create a bookmark and use this code as the URL, you can now toggle the css on/off

How do you accomplish this?

Regards,
Kenneth

@madonkey

This comment has been minimized.

Copy link

madonkey commented Sep 4, 2019

For Chrome.

  • Bookmarks > Bookmark Manager

  • Click on the 3 dots on the top right. Choose Add new bookmark.

  • Give it a name.

  • Paste the above code from line 3 down. Don't paste the comments. It should start with javascript: (function() {

  • Save. To use it, simply use the bookmark on any page.

@DJviolin

This comment has been minimized.

Copy link

DJviolin commented Sep 4, 2019

Thank You! It works on most of the sites, except Github. Strange.

@Kessi

This comment has been minimized.

Copy link

Kessi commented Sep 4, 2019

Great! Thank you both!

@AdnanIT

This comment has been minimized.

Copy link

AdnanIT commented Sep 4, 2019

extra tip

You can, in Mozilla Firefox, add a keyword while adding a bookmark, for example add keyword check, and you will be able, just typing the check in the URL and hitting the enter, to see the results.

tag

@mutheusalmeida

This comment has been minimized.

Copy link

mutheusalmeida commented Sep 4, 2019

Thank You! It works on most of the sites, except Github. Strange.

I think that's because it is a gist.

@Conrad777

This comment has been minimized.

Copy link

Conrad777 commented Sep 5, 2019

Thanks for this... it is very handy!!

I wanted to change the colors around and ended up having to change the code in 2 places cause sometimes the string check didn't work anymore... so I simplified the code a bit. I only tested in Chrome, so maybe there is a good reason why you did it your way, but for what it is worth here is my amended solution:

javascript: (function() {
  const element = document.querySelector('#test-layout-styles');
  if (element) {
    document.head.removeChild(element);
  } else {
    const style = document.createElement('style');
    style.id = 'test-layout-styles';
    style.innerHTML = `
          * { background-color: rgba(255,0,0,.2); }
          * * { background-color: rgba(255,0,255,.2); }
          * * * { background-color: rgba(0,255,255,.2); }
          * * * * { background-color: rgba(255,255,0,.2); }
          * * * * * { background-color: rgba(0,255,0,.2); }
          * * * * * * { background-color: rgba(0,0,255,.2); }
          * * * * * * * { background-color: rgba(255,0,0,.2); }
          * * * * * * * * { background-color: rgba(255,255,0,.2); }
          * * * * * * * * * { background-color: rgba(0,255,255,.2); }
    `;
    document.head.appendChild(style);
  }
})();
@andersdn

This comment has been minimized.

Copy link

andersdn commented Sep 5, 2019

If you wanted to make it shorter (and dont mind using a single color) you could fill the array n number of times, that way you don't have to do each line of css manually

javascript: (function() {
  const element = document.querySelector('#test-layout-styles');
  const cssString = '* { background-color: rgba(0,255,255,.2);!important}';
  if (element) {
    document.head.removeChild(element);
  } else {
    const style = document.createElement('style');
    style.id = 'test-layout-styles';
    style.innerHTML = Array(20).fill().map((i,k) => '* '.repeat(k) + cssString).join(';\r\n');
    document.head.appendChild(style);
  }
})();
@nutchy

This comment has been minimized.

Copy link

nutchy commented Sep 5, 2019

@ta-riq

This comment has been minimized.

Copy link

ta-riq commented Sep 9, 2019

Nice tricks 🎉,It's same as this extension https://chrome.google.com/webstore/detail/pesticide-for-chrome/bblbgcheenepgnnajgfpiicnbbdmmooh

Thats really great....

Now I _dont have to write_ this every time in my stylesheet.

@gazdagergo

This comment has been minimized.

Copy link

gazdagergo commented Sep 11, 2019

Just copy the code into this tool and your bookmarklet is ready for use: https://chriszarate.github.io/bookmarkleter/

@webknjaz

This comment has been minimized.

Copy link

webknjaz commented Sep 13, 2019

There's a smaller implementation in this comment: https://dev.to/dink/comment/f20o

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.