https://loftiawiki.org/index.php?action=history&feed=atom&title=User%3AIsy%2FSandbox%2FDarkMode-Experiment.js 2026-05-31T21:18:39Z Revision history for this page on the wiki MediaWiki 1.44.0 https://loftiawiki.org/index.php?title=User:Isy/Sandbox/DarkMode-Experiment.js&diff=342&oldid=prev 2025-04-23T01:52:55Z

<p>Created page with &quot;$(function() { // Only run on pages with our experiment const experimentPage = document.querySelector(&#039;.dark-mode-experiment&#039;); if (!experimentPage) return; // Create and add toggle button const toggleBtn = document.createElement(&#039;button&#039;); toggleBtn.className = &#039;dark-mode-toggle&#039;; toggleBtn.innerHTML = &#039;🌙&#039;; document.body.appendChild(toggleBtn); // Theme management function setTheme(theme) { experimentPage.setAttribute...&quot;</p> <p><b>New page</b></p><div>$(function() {<br /> // Only run on pages with our experiment<br /> const experimentPage = document.querySelector(&#039;.dark-mode-experiment&#039;);<br /> if (!experimentPage) return;<br /> <br /> // Create and add toggle button<br /> const toggleBtn = document.createElement(&#039;button&#039;);<br /> toggleBtn.className = &#039;dark-mode-toggle&#039;;<br /> toggleBtn.innerHTML = &#039;🌙&#039;;<br /> document.body.appendChild(toggleBtn);<br /> <br /> // Theme management<br /> function setTheme(theme) {<br /> experimentPage.setAttribute(&#039;data-theme&#039;, theme);<br /> localStorage.setItem(&#039;darkModeExperiment&#039;, theme);<br /> toggleBtn.innerHTML = theme === &#039;dark&#039; ? &#039;☀️&#039; : &#039;🌙&#039;;<br /> }<br /> <br /> // Initialize theme<br /> const savedTheme = localStorage.getItem(&#039;darkModeExperiment&#039;);<br /> const prefersDark = window.matchMedia(&#039;(prefers-color-scheme: dark)&#039;).matches;<br /> setTheme(savedTheme || (prefersDark ? &#039;dark&#039; : &#039;light&#039;));<br /> <br /> // Toggle on click<br /> toggleBtn.addEventListener(&#039;click&#039;, () =&gt; {<br /> const current = experimentPage.getAttribute(&#039;data-theme&#039;) || &#039;light&#039;;<br /> setTheme(current === &#039;dark&#039; ? &#039;light&#039; : &#039;dark&#039;);<br /> });<br /> });</div>

Isy