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.
