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 domStyle = document.createElement("style");
domStyle.append(
'* { 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; }'
);
document.body.appendChild(domStyle);
})();
@growthboot

This comment has been minimized.

Copy link
Owner Author

growthboot commented Sep 5, 2019

Using document.body.innerHTML += recreates every node on the page therefor theoretically unbinding any potential events that were set. This breaks the functionality most websites. I fixed it by using the appendChild method which leaves all other nodes on the page untouched.

@bitnot

This comment has been minimized.

Copy link

bitnot commented Sep 9, 2019

Neat hack!
Now that you have document.createElement("style") there is no need to include <style> and </style> in the domStyle.append call.

// 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 domStyle = document.createElement("style");
    domStyle.append(
           '* { 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; }'
    );
    document.body.appendChild(domStyle);
})();
@growthboot

This comment has been minimized.

Copy link
Owner Author

growthboot commented Sep 9, 2019

Great point!! Amazing how it was still working for me with that issue there.

@ZeroDragon

This comment has been minimized.

Copy link

ZeroDragon commented Sep 9, 2019

I made a slight improvement. NOW you can trully turn it ON and OFF with the same bookmarklet on the fly (no need to reload)

javascript: (function() {
  let domStyle = document.getElementById('domStylee');
  if (domStyle) {
    document.body.removeChild(domStyle);
    return;
  }
  domStyle = document.createElement("style");
  domStyle.setAttribute('id', 'domStylee');
  domStyle.append(
    ['* { 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; }'].join()
  );
  document.body.appendChild(domStyle);
})();
@inalbant

This comment has been minimized.

Copy link

inalbant commented Dec 9, 2019

I made a slight improvement. NOW you can trully turn it ON and OFF with the same bookmarklet on the fly (no need to reload)

javascript: (function() {
  let domStyle = document.getElementById('domStylee');
  if (domStyle) {
    document.body.removeChild(domStyle);
    return;
  }
  domStyle = document.createElement("style");
  domStyle.setAttribute('id', 'domStylee');
  domStyle.append(
    ['* { 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; }'].join()
  );
  document.body.appendChild(domStyle);
})();

this works perfectly in Chrome, but I couldn't get it to work in Firefox Dev Edition. Any ideas?

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.