Dark Theme for Community Site

I wrote a userscript that modifies the snap! website to enable some sort of "dark mode". I couldn't find any actual option for it but here it goes.

// ==UserScript==
// @name        Snap! Dark Theme
// @namespace   Violentmonkey Scripts
// @match       https://snap.berkeley.edu/*
// @grant       none
// @version     1.0
// @author      ampelectrecuted
// @description A dark theme for Snap!
// ==/UserScript==
//
function isBootstrap5() {
    // Select all elements with data-bs-theme attribute
    const elementsWithTheme = document.querySelectorAll('[data-bs-theme]');
    // Check if there are any such elements
    return elementsWithTheme.length > 0;
}

if (isBootstrap5()) {
    // Set the data-bs-theme attribute to "dark"
    // By doing some inspectation I determined a lot of pages use
    // bootstrap 5, and this is how you make bootstrap go in dark mode
    document.documentElement.setAttribute('data-bs-theme', 'dark');
} else {
    // Dark mode patches for non-bootstrap pages
    const noBootstrapStyle = document.createElement('style');
    noBootstrapStyle.innerHTML = `
      body {
        background: #212529;
      }
      .notes {
        background: #2D3142 !important;
      }
      .trapezoid {
        color: #2D3142;
      }
    `;
    document.head.appendChild(noBootstrapStyle);
}

// Apply styles to force body to white
const style = document.createElement('style');
style.innerHTML = `
  body {
    color: white;
  }
  .trapezoid-footer {
    color: #212529;
  }
`;
document.head.appendChild(style);


If anyone has any feedback let me know.

I also found an older topic, but this one is much more lightweight.

Here's a bookmarklet if you can't use userscripts:

javascript:function isBootstrap5() { const elementsWithTheme = document.querySelectorAll('[data-bs-theme]'); return elementsWithTheme.length > 0; } if (isBootstrap5()) { document.documentElement.setAttribute('data-bs-theme', 'dark'); } else { const noBoostrapStyle = document.createElement('style'); noBoostrapStyle.innerHTML = ` body { background: #212529; } .notes { background: #2D3142 !important; } .trapezoid { color: #2D3142; } `; document.head.appendChild(noBoostrapStyle); } const style = document.createElement('style'); style.innerHTML = ` body { color: white; } .trapezoid-footer { color: #212529; } `; document.head.appendChild(style); void 0;

You just have to set color

done

Is there a reason you used !important here? From my quick testing, that does practically nothing, in fact, it might be better to leave it out.

i've removed !important now

now works with the pages that don't use bootstrap


I've decided to try making a fork/remix of this userscript

mostly did simplification and bugfixes (e.g. dialogs have white text and white background)
Edit: I just made a website for it
https://darksnap.swee.codes

i'm fine with that.
can't wait to see where people go with this :eyes: