// 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); | |
})(); |
This comment has been minimized.
This comment has been minimized.
Neat hack! // 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);
})(); |
This comment has been minimized.
This comment has been minimized.
Great point!! Amazing how it was still working for me with that issue there. |
This comment has been minimized.
This comment has been minimized.
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 comment has been minimized.
This comment has been minimized.
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
This comment has been minimized.
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.