Style Ko-fi widgets to match light/dark theme

Floating button now initializes with theme-aware colors and updates
on toggle. Status page iframe uses a tuned CSS filter in dark mode
to blend with the warm palette.
This commit is contained in:
tdurieux
2026-05-06 21:38:52 +03:00
parent dfa5a2e2fd
commit 48256e743c
5 changed files with 24 additions and 8 deletions
+1 -1
View File
File diff suppressed because one or more lines are too long
+3
View File
@@ -3275,6 +3275,9 @@ code {
height: 650px;
display: block;
}
.dark-mode .paper-kofi-wrap iframe {
filter: invert(0.88) hue-rotate(180deg) sepia(0.15) saturate(1.2) brightness(1.1) contrast(0.85);
}
@media (max-width: 700px) {
.paper-kofi-wrap iframe { height: 720px; }
}
+13 -6
View File
@@ -81,12 +81,19 @@
</script>
<script src="https://storage.ko-fi.com/cdn/scripts/overlay-widget.js"></script>
<script>
kofiWidgetOverlay.draw("tdurieux", {
type: "floating-chat",
"floating-chat.donateButton.text": "Support me",
"floating-chat.donateButton.background-color": "#323842",
"floating-chat.donateButton.text-color": "#fff",
});
(function () {
var isDark = localStorage.getItem("darkMode") === "true";
kofiWidgetOverlay.draw("tdurieux", {
type: "floating-chat",
"floating-chat.donateButton.text": "Support me",
"floating-chat.donateButton.background-color": isDark
? "#FAF9F6"
: "#1A1815",
"floating-chat.donateButton.text-color": isDark
? "#1A1815"
: "#FAF9F6",
});
})();
</script>
</body>
</html>
+6
View File
@@ -816,6 +816,12 @@ angular
document.head.append(link);
$(`link[href='${darkPrismLink}']`).remove();
}
// Update Ko-fi floating button to match theme
var kofiBtn = document.querySelector(".floatingchat-container-wrap-mo498 .floating-chat-kofi-text-container-wrap");
if (kofiBtn) {
kofiBtn.style.backgroundColor = on ? "#FAF9F6" : "#1A1815";
kofiBtn.style.color = on ? "#1A1815" : "#FAF9F6";
}
$scope.$broadcast("dark-mode", on);
};
+1 -1
View File
File diff suppressed because one or more lines are too long