Snap! Dark

Advanced Topics Mods & Extensions
1

I wrote a userscript that modifies the snap! website to enable some sort of "dark mode".

Screenshot_20241130_153518
Screenshot_20241130_1535181851×1014 534 KB

Click this button to install the script (a userscript manager like Tampermonkey, Violentmonkey, or Greasemonkey is required):
($Install\ Script-2.5::control ring)

If anyone has any feedback let me know.

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

2

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;
3

You just have to set color

4

done

5

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.

6

i've removed !important now

7

now works with the pages that don't use bootstrap

Screenshot_20241130_174251
Screenshot_20241130_1742511460×1016 75.3 KB

Screenshot_20241130_174329
Screenshot_20241130_1743291460×1016 77.3 KB

8

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

9

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

10

Sorry for the sudden necrobump! After 5 months I finally dropped an update to this. It's mostly a huge bug fix update because of some oversights and/or changes that Snap! recently made.

  • Fixed flash of unstyled content
  • Fixed the description background on collections, and the notes background on the new project page
  • Fixed footer trapezoid
  • Fixed collections without thumbnails saying "collection thumbnail"

I also moved the code from this post over to a git repo so you can get auto-updates and so that it's easier for me to edit the code. If you already have this script, delete it from your userscript manager before installing this new one.