Skip to content

donate: follow system theme instead of forcing dark mode #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kiyarose merged 7 commits into from
Mar 19, 2026
Merged

donate: follow system theme instead of forcing dark mode #21

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1505419
Initial plan
Copilot Mar 18, 2026
008e250
fix: follow system theme on donate page instead of forcing dark mode
Copilot Mar 18, 2026
b475806
Potential fix for pull request finding
kiyarose Mar 19, 2026
cfa93a7
Potential fix for pull request finding
kiyarose Mar 19, 2026
04d1db2
Potential fix for pull request finding
kiyarose Mar 19, 2026
3b2a982
style: format code with Prettier and StandardJS
deepsource-autofix[bot] Mar 19, 2026
84e0a47
fix: head script uses only system theme, no localStorage, on donate page
Copilot Mar 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 75 additions & 5 deletions donate.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,26 @@
<!doctype html>
<html lang="en" data-theme="dark">
<html lang="en">
Comment thread
kiyarose marked this conversation as resolved.
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Make a Donation - SillyLittleTech</title>
<script>
(function () {
// Always derive theme from OS preference on this page (no localStorage)
// so the page and the embedded HCB iframe start in the same mode
// immediately, without waiting for later scripts to run.
try {
var theme =
window.matchMedia &&
window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light";
document.documentElement.setAttribute("data-theme", theme);
} catch (e) {
document.documentElement.setAttribute("data-theme", "light");
}
Comment thread
kiyarose marked this conversation as resolved.
})();
</script>
<link rel="stylesheet" href="base.css" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="site.css" />
Expand Down Expand Up @@ -294,12 +311,65 @@ <h1>Make a Donation</h1>
</div>
<script src="theme.js"></script>
<script>
// Force dark mode on this page and block theme toggling.
// theme.js has already run its init(); we now override the result and
// replace the toggle element to drop its click listener.
// Follow the user's OS/system theme on this page and block manual toggling.
// The embedded iframe auto-respects prefers-color-scheme, so we match it
// by always reading the system preference rather than any stored value.
// theme.js is loaded first and registers its own DOMContentLoaded handler;
// this override also runs after DOMContentLoaded, then replaces the toggle
// element to drop its click listener.
(function () {
function getSystemTheme() {
// Prefer shared theme.js helper if available to avoid duplicated logic.
try {
if (
window.SLT &&
window.SLT.theme &&
typeof window.SLT.theme.detectSystem === "function"
) {
return window.SLT.theme.detectSystem();
}
} catch (e) {}

// Fallback: detect via prefers-color-scheme.
try {
return window.matchMedia &&
window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light";
} catch (e) {
return "light";
}
}

function applySystemTheme() {
var theme = getSystemTheme();
// Use shared applyTheme helper when present; otherwise, set attribute directly.
try {
if (
window.SLT &&
window.SLT.theme &&
typeof window.SLT.theme.applyTheme === "function"
) {
window.SLT.theme.applyTheme(theme);
return;
}
} catch (e) {}
document.documentElement.setAttribute("data-theme", theme);
}
Comment thread
kiyarose marked this conversation as resolved.

function initDonateThemeOverride() {
document.documentElement.setAttribute("data-theme", "dark");
// Apply system theme, ignoring any stored preference.
applySystemTheme();

// Stay in sync if the OS preference changes while the page is open.
try {
var mq = window.matchMedia("(prefers-color-scheme: dark)");
if (mq.addEventListener) {
mq.addEventListener("change", applySystemTheme);
} else if (mq.addListener) {
mq.addListener(applySystemTheme);
}
} catch (e) {}

var toggle = document.getElementById("themeToggle");
if (!toggle) return;
Expand Down