Accessibility / Color / Dark Mode Detector
Detects if the current page has native dark mode support using prefers-color-scheme or class-based dark mode (e.g., Tailwind). Scans stylesheets for @media (prefers-color-scheme: dark) rules and .dark class selectors. When supported, displays a toggle button to switch between light and dark modes by modifying CSS rules or toggling the .dark class. Shows current mode on button. When not supported, shows a dismissible status message. Run again to remove.
Run Dark Mode Detector
Test run or drag to
bookmarklets bar to install
javascript:%21function()%7B%22use%20strict%22%3Btry%7Bconst%20t%3D%22dark-mode-detector%22%2Ce%3D%22dark-mode-detector-script%22%2Cn%3Ddocument.getElementById(t)%3Bif(n)%7Bconst%20c%3Ddocument.getElementById(e)%3Breturn%20c%26%26c.remove()%2Cdelete%20window.__darkModeDetectorToggle%2Cvoid%20n.remove()%7Dlet%20o%3Dnull%3Bconst%20s%3D%5B%5D%2Cr%3Ddocument.styleSheets%2Cd%3D%2F%5C.(dark%5Cs%7Cdark%3A)%2F%3Bfor(let%20l%3D0%3Bl%3Cr.length%3Bl%2B%2B)%7Btry%7Bconst%20u%3Dr%5Bl%5D.cssRules%7C%7Cr%5Bl%5D.rules%3Bfor(let%20m%3D0%3Bm%3Cu.length%3Bm%2B%2B)%7Bconst%20f%3Du%5Bm%5D%3Bif(f.conditionText%26%26f.conditionText.includes(%22prefers-color-scheme%3A%20dark%22)%26%26(o%7C%7C(o%3D%22media-query%22)%2Cs.push(%7Bsheet%3Ar%5Bl%5D%2Crule%3Af%2Cindex%3Am%7D))%2Cf.selectorText%26%26f.selectorText.includes(%22.dark%20%22)%26%26(o%7C%7C(o%3D%22class-based%22))%2Co%26%26%22media-query%22%21%3D%3Do)break%7D%7Dcatch(p)%7B%7Dif(o%26%26%22media-query%22%21%3D%3Do)break%7Dif(%21o)%7Bconst%20g%3Ddocument.querySelectorAll(%22style%22)%3Bfor(const%20k%20of%20g)%7Bconst%20x%3Dk.textContent%3Bif(x.includes(%22prefers-color-scheme%3A%20dark%22))%7Bo%3D%22media-query%22%3Bbreak%7Dif(d.test(x))%7Bo%3D%22class-based%22%3Bbreak%7D%7D%7Dconst%20a%3Dwindow.matchMedia(%22(prefers-color-scheme%3A%20dark)%22).matches%2Ci%3Ddocument.createElement(%22div%22)%3Bif(i.id%3Dt%2Ci.style.cssText%3D%22%5Cn%5Ct%5Ct%5Ctposition%3A%20fixed%3B%5Cn%5Ct%5Ct%5Cttop%3A%2010px%3B%5Cn%5Ct%5Ct%5Ctright%3A%2010px%3B%5Cn%5Ct%5Ct%5Ctz-index%3A%20999999%3B%5Cn%5Ct%5Ct%5Ctdisplay%3A%20flex%3B%5Cn%5Ct%5Ct%5Ctgap%3A%208px%3B%5Cn%5Ct%5Ct%5Ctalign-items%3A%20center%3B%5Cn%5Ct%5Ct%22%2Co)%7Bconst%20h%3Ddocument.createElement(%22button%22)%3Bh.id%3Dt%2B%22-toggle%22%3Bconst%20b%3D%22class-based%22%3D%3D%3Do%7C%7C%21a%2Cy%3D%22class-based%22%3D%3D%3Do%26%26document.documentElement.classList.contains(%22dark%22)%3Bfunction%20T()%7Bconst%20t%3D(%22class-based%22%3D%3D%3Do%3Fdocument.documentElement.classList.contains(%22dark%22)%3A%22true%22%3D%3D%3Dh.dataset.darkMode)%3F%22Dark%22%3A%22Light%22%2Ce%3D%22class-based%22%3D%3D%3Do%3F%22%20(Class-based)%22%3A%22%20(Media%20Query)%22%2Cn%3Db%3F%22%20-%20Click%20to%20Toggle%22%3A%22%20(Read-only)%22%3Bh.textContent%3D%60%24%7Bt%7D%20Mode%24%7Be%7D%24%7Bn%7D%60%7DT()%2C%22media-query%22%3D%3D%3Do%26%26b%26%26(h.dataset.darkMode%3D%22true%22)%2Ch.style.cssText%3D%60%5Cn%5Ct%5Ct%5Ct%5Ctpadding%3A%2010px%2016px%3B%5Cn%5Ct%5Ct%5Ct%5Ctbackground%3A%20%24%7B%22true%22%3D%3D%3Dh.dataset.darkMode%3F%22%231a1a1a%22%3A%22%2322c55e%22%7D%3B%5Cn%5Ct%5Ct%5Ct%5Ctcolor%3A%20%23fff%3B%5Cn%5Ct%5Ct%5Ct%5Ctborder%3A%20none%3B%5Cn%5Ct%5Ct%5Ct%5Ctborder-radius%3A%208px%3B%5Cn%5Ct%5Ct%5Ct%5Ctcursor%3A%20%24%7Bb%3F%22pointer%22%3A%22default%22%7D%3B%5Cn%5Ct%5Ct%5Ct%5Ctfont-family%3A%20system-ui%2C%20-apple-system%2C%20sans-serif%3B%5Cn%5Ct%5Ct%5Ct%5Ctfont-size%3A%2014px%3B%5Cn%5Ct%5Ct%5Ct%5Ctfont-weight%3A%20500%3B%5Cn%5Ct%5Ct%5Ct%5Ctbox-shadow%3A%200%204px%2012px%20rgba(0%2C0%2C0%2C0.15)%3B%5Cn%5Ct%5Ct%5Ct%5Cttransition%3A%20background%200.2s%20ease%3B%5Cn%5Ct%5Ct%5Ct%5Ctopacity%3A%20%24%7Bb%3F%221%22%3A%220.7%22%7D%3B%5Cn%5Ct%5Ct%5Ct%60%3Bconst%20w%3Ddocument.createElement(%22button%22)%3Bif(w.textContent%3D%22%5Cxd7%22%2Cw.style.cssText%3D%22%5Cn%5Ct%5Ct%5Ct%5Ctpadding%3A%2010px%2014px%3B%5Cn%5Ct%5Ct%5Ct%5Ctbackground%3A%20%23ef4444%3B%5Cn%5Ct%5Ct%5Ct%5Ctcolor%3A%20%23fff%3B%5Cn%5Ct%5Ct%5Ct%5Ctborder%3A%20none%3B%5Cn%5Ct%5Ct%5Ct%5Ctborder-radius%3A%208px%3B%5Cn%5Ct%5Ct%5Ct%5Ctcursor%3A%20pointer%3B%5Cn%5Ct%5Ct%5Ct%5Ctfont-size%3A%2018px%3B%5Cn%5Ct%5Ct%5Ct%5Ctfont-weight%3A%20bold%3B%5Cn%5Ct%5Ct%5Ct%22%2Ci.appendChild(h)%2Ci.appendChild(w)%2Cdocument.body.appendChild(i)%2C%22media-query%22%3D%3D%3Do%26%26b%26%26s.length%3E0)%7Bconst%20M%3D%60%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct(function(systemPrefersDark)%20%7B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%2F%2F%20Store%20original%20conditions%20and%20rules%20(already%20collected%20by%20parent)%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ctconst%20darkRules%20%3D%20%24%7BJSON.stringify(s.map((%7Brule%3At%2Cindex%3Ae%7D)%3D%3E(%7BconditionText%3At.conditionText%2Cindex%3Ae%7D)))%7D%3B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ctconst%20originalConditions%20%3D%20darkRules.map(r%20%3D%3E%20r.conditionText)%3B%5Cn%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%2F%2F%20Re-acquire%20rule%20references%20from%20sheet%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ctconst%20sheets%20%3D%20document.styleSheets%3B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ctconst%20ruleRefs%20%3D%20%5B%5D%3B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ctfor%20(let%20i%20%3D%200%3B%20i%20%3C%20sheets.length%3B%20i%2B%2B)%20%7B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Cttry%20%7B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ctconst%20rules%20%3D%20sheets%5Bi%5D.cssRules%20%7C%7C%20sheets%5Bi%5D.rules%3B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ctfor%20(let%20j%20%3D%200%3B%20j%20%3C%20rules.length%3B%20j%2B%2B)%20%7B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ctconst%20rule%20%3D%20rules%5Bj%5D%3B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ctif%20(rule.type%20%3D%3D%3D%20CSSRule.MEDIA_RULE%20%26%26%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ctrule.conditionText.includes(%27prefers-color-scheme%3A%20dark%27))%20%7B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5CtruleRefs.push(rule)%3B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%7D%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%7D%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%7D%20catch%20(e)%20%7B%7D%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%7D%5Cn%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%2F%2F%20Toggle%20function%20exposed%20globally%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ctwindow.__darkModeDetectorToggle%20%3D%20function(enableDark)%20%7B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ctfor%20(let%20i%20%3D%200%3B%20i%20%3C%20ruleRefs.length%3B%20i%2B%2B)%20%7B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ctconst%20rule%20%3D%20ruleRefs%5Bi%5D%3B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ctconst%20original%20%3D%20originalConditions%5Bi%5D%3B%5Cn%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ctif%20(enableDark)%20%7B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%2F%2F%20Enable%20dark%20mode%3A%20swap%20%27dark%27%20to%20%27light%27%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ctrule.conditionText%20%3D%20original.replace(%27dark%27%2C%20%27light%27)%3B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%7D%20else%20%7B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%2F%2F%20Disable%20dark%20mode%3A%20restore%20original%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ctrule.conditionText%20%3D%20original%3B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%7D%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%7D%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%7D%3B%5Cn%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%2F%2F%20Auto-enable%20dark%20mode%20on%20first%20run%20if%20system%20is%20in%20light%20mode%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ctif%20(%21systemPrefersDark)%20%7B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ctwindow.__darkModeDetectorToggle(true)%3B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%7D%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%7D)(%24%7Ba%7D)%3B%5Cn%5Ct%5Ct%5Ct%5Ct%60%2CC%3Ddocument.createElement(%22script%22)%3BC.id%3De%2CC.textContent%3DM%2Cdocument.head.appendChild(C)%7Dfunction%20E()%7Bif(%22class-based%22%3D%3D%3Do)%7Bdocument.documentElement.classList.toggle(%22dark%22)%7Delse%20if(window.__darkModeDetectorToggle)%7Bconst%20t%3D%22true%22%3D%3D%3Dh.dataset.darkMode%3Bh.dataset.darkMode%3D(%21t).toString()%2Cwindow.__darkModeDetectorToggle(%21t)%7Dconst%20t%3D%22class-based%22%3D%3D%3Do%3Fdocument.documentElement.classList.contains(%22dark%22)%3A%22true%22%3D%3D%3Dh.dataset.darkMode%3Bh.style.background%3Dt%3F%22%231a1a1a%22%3A%22%2322c55e%22%2CT()%7Dif(%22class-based%22%3D%3D%3Do)%7Bdocument.documentElement.classList.contains(%22dark%22)%7C%7Cdocument.documentElement.classList.add(%22dark%22)%2CT()%2Ch.style.background%3D%22%231a1a1a%22%7Db%26%26h.addEventListener(%22click%22%2CE)%2Cw.addEventListener(%22click%22%2Cfunction()%7B%22class-based%22%21%3D%3Do%7C%7Cy%7C%7Cdocument.documentElement.classList.remove(%22dark%22)%2Cdelete%20window.__darkModeDetectorToggle%3Bconst%20t%3Ddocument.getElementById(e)%3Bt%26%26t.remove()%2Ci.remove()%7D)%7Delse%20i.style.cssText%3D%22%5Cn%5Ct%5Ct%5Ct%5Ctposition%3A%20fixed%3B%5Cn%5Ct%5Ct%5Ct%5Cttop%3A%2010px%3B%5Cn%5Ct%5Ct%5Ct%5Ctright%3A%2010px%3B%5Cn%5Ct%5Ct%5Ct%5Ctz-index%3A%20999999%3B%5Cn%5Ct%5Ct%5Ct%5Ctbackground%3A%20%23ef4444%3B%5Cn%5Ct%5Ct%5Ct%5Ctcolor%3A%20%23fff%3B%5Cn%5Ct%5Ct%5Ct%5Ctpadding%3A%2012px%2016px%3B%5Cn%5Ct%5Ct%5Ct%5Ctborder-radius%3A%208px%3B%5Cn%5Ct%5Ct%5Ct%5Ctfont-family%3A%20system-ui%2C%20-apple-system%2C%20sans-serif%3B%5Cn%5Ct%5Ct%5Ct%5Ctfont-size%3A%2014px%3B%5Cn%5Ct%5Ct%5Ct%5Ctfont-weight%3A%20500%3B%5Cn%5Ct%5Ct%5Ct%5Ctbox-shadow%3A%200%204px%2012px%20rgba(0%2C0%2C0%2C0.15)%3B%5Cn%5Ct%5Ct%5Ct%5Ctmax-width%3A%20300px%3B%5Cn%5Ct%5Ct%5Ct%5Ctcursor%3A%20pointer%3B%5Cn%5Ct%5Ct%5Ct%5Ctuser-select%3A%20none%3B%5Cn%5Ct%5Ct%5Ct%22%2Ci.textContent%3D%22%5Cu2717%20This%20site%20does%20not%20support%20dark%20mode%20(click%20to%20dismiss)%22%2Ci.addEventListener(%22click%22%2Cfunction()%7Bi.remove()%7D)%2Cdocument.body.appendChild(i)%3Bconsole.log(%22%5CnSource%3A%20https%3A%2F%2Fgithub.com%2Fpattespatte%2Fpublic-bookmarklets%5CnBookmarklet%20name%3A%20Dark%20Mode%20Detector%5Cn%22)%7Dcatch(D)%7Balert(%22Bookmarklet%20Error%3A%20%22%2BD.message)%7D%7D()%3B
← Back to all bookmarklets