Other / CSS / Fake Dark Mode
Simulates dark mode using brute-force CSS color inversion (invert + hue-rotate). NOTE: This does NOT use or respect native dark mode (prefers-color-scheme). It applies a filter overlay regardless of the page's own dark mode support. Creates a floating toggle button in top-right corner. Images and videos are re-inverted to appear normal. Best for pages without native dark mode support.
Run Fake Dark Mode
Test run or drag to
bookmarklets bar to install
javascript:%21function()%7B%22use%20strict%22%3Bfunction%20t()%7Bi%3D%21i%2Ci%3F(s.textContent%3D%60%5Cn%5Ct%5Ct%5Ct%5Cthtml%20%7B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ctfilter%3A%20invert(1)%20hue-rotate(180deg)%3B%5Cn%5Ct%5Ct%5Ct%5Ct%7D%5Cn%5Ct%5Ct%5Ct%5Ctimg%2C%20video%2C%20iframe%2C%20canvas%2C%20svg%2C%20%5Bstyle*%3D%22background-image%22%5D%20%7B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ctfilter%3A%20invert(1)%20hue-rotate(180deg)%3B%5Cn%5Ct%5Ct%5Ct%5Ct%7D%5Cn%5Ct%5Ct%5Ct%5Ct%23%24%7Be%7D%20%7B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ctfilter%3A%20invert(1)%20hue-rotate(180deg)%20%21important%3B%5Cn%5Ct%5Ct%5Ct%5Ct%7D%5Cn%5Ct%5Ct%5Ct%60%2Ca.textContent%3D%22%5Cu2600%5Cufe0f%22%2Ca.style.background%3D%22%23fff%22%2Ca.style.color%3D%22%231a1a1a%22)%3A(s.textContent%3D%22%22%2Ca.textContent%3D%22%5Cud83c%5Cudf19%22%2Ca.style.background%3D%22%231a1a1a%22%2Ca.style.color%3D%22%23fff%22)%7Dconst%20e%3D%22dark-mode-bookmarklet%22%2Cn%3D%22dark-mode-style%22%3Blet%20o%3Ddocument.getElementById(e)%3Bif(o)%7Blet%20t%3Ddocument.getElementById(n)%3Breturn%20t%26%26t.remove()%2Cvoid%20o.remove()%7Dconst%20r%3Ddocument.createElement(%22div%22)%3Br.id%3De%2Cr.style.cssText%3D%22%5Cn%5Ct%5Ctposition%3A%20fixed%3B%5Cn%5Ct%5Cttop%3A%2010px%3B%5Cn%5Ct%5Ctright%3A%2010px%3B%5Cn%5Ct%5Ctz-index%3A%20999999%3B%5Cn%5Ct%5Ctdisplay%3A%20flex%3B%5Cn%5Ct%5Ctgap%3A%208px%3B%5Cn%5Ct%22%3Bconst%20a%3Ddocument.createElement(%22button%22)%3Ba.textContent%3D%22%5Cud83c%5Cudf19%22%2Ca.title%3D%22Toggle%20Dark%20Mode%22%2Ca.style.cssText%3D%22%5Cn%5Ct%5Ctpadding%3A%2010px%2014px%3B%5Cn%5Ct%5Ctbackground%3A%20%231a1a1a%3B%5Cn%5Ct%5Ctcolor%3A%20%23fff%3B%5Cn%5Ct%5Ctborder%3A%202px%20solid%20%23444%3B%5Cn%5Ct%5Ctborder-radius%3A%208px%3B%5Cn%5Ct%5Ctcursor%3A%20pointer%3B%5Cn%5Ct%5Ctfont-size%3A%201.125rem%3B%5Cn%5Ct%5Cttransition%3A%20all%200.2s%20ease%3B%5Cn%5Ct%22%2Ca.onmouseenter%3Dfunction()%7Bthis.style.background%3D%22%23333%22%2Cthis.style.transform%3D%22scale(1.05)%22%7D%2Ca.onmouseleave%3Dfunction()%7Bthis.style.background%3Di%3F%22%231a1a1a%22%3A%22%23fff%22%2Cthis.style.color%3Di%3F%22%23fff%22%3A%22%231a1a1a%22%2Cthis.style.transform%3D%22scale(1)%22%7D%3Bconst%20d%3Ddocument.createElement(%22button%22)%3Bd.textContent%3D%22%5Cxd7%22%2Cd.title%3D%22Remove%20Dark%20Mode%22%2Cd.style.cssText%3D%22%5Cn%5Ct%5Ctpadding%3A%2010px%2014px%3B%5Cn%5Ct%5Ctbackground%3A%20%23dc3545%3B%5Cn%5Ct%5Ctcolor%3A%20%23fff%3B%5Cn%5Ct%5Ctborder%3A%202px%20solid%20%23dc3545%3B%5Cn%5Ct%5Ctborder-radius%3A%208px%3B%5Cn%5Ct%5Ctcursor%3A%20pointer%3B%5Cn%5Ct%5Ctfont-size%3A%201.125rem%3B%5Cn%5Ct%5Ctfont-weight%3A%20bold%3B%5Cn%5Ct%5Cttransition%3A%20all%200.2s%20ease%3B%5Cn%5Ct%22%2Cd.onmouseenter%3Dfunction()%7Bthis.style.background%3D%22%23c82333%22%7D%2Cd.onmouseleave%3Dfunction()%7Bthis.style.background%3D%22%23dc3545%22%7D%2Cr.appendChild(a)%2Cr.appendChild(d)%2Cdocument.body.appendChild(r)%3Bconst%20s%3Ddocument.createElement(%22style%22)%3Bs.id%3Dn%2Cdocument.head.appendChild(s)%3Blet%20i%3D%211%3Ba.addEventListener(%22click%22%2Ct)%2Cd.addEventListener(%22click%22%2Cfunction()%7Bs.remove()%2Cr.remove()%7D)%2Ct()%7D()%3B
← Back to all bookmarklets