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; height: 650px;
display: block; 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) { @media (max-width: 700px) {
.paper-kofi-wrap iframe { height: 720px; } .paper-kofi-wrap iframe { height: 720px; }
} }
+13 -6
View File
@@ -81,12 +81,19 @@
</script> </script>
<script src="https://storage.ko-fi.com/cdn/scripts/overlay-widget.js"></script> <script src="https://storage.ko-fi.com/cdn/scripts/overlay-widget.js"></script>
<script> <script>
kofiWidgetOverlay.draw("tdurieux", { (function () {
type: "floating-chat", var isDark = localStorage.getItem("darkMode") === "true";
"floating-chat.donateButton.text": "Support me", kofiWidgetOverlay.draw("tdurieux", {
"floating-chat.donateButton.background-color": "#323842", type: "floating-chat",
"floating-chat.donateButton.text-color": "#fff", "floating-chat.donateButton.text": "Support me",
}); "floating-chat.donateButton.background-color": isDark
? "#FAF9F6"
: "#1A1815",
"floating-chat.donateButton.text-color": isDark
? "#1A1815"
: "#FAF9F6",
});
})();
</script> </script>
</body> </body>
</html> </html>
+6
View File
@@ -816,6 +816,12 @@ angular
document.head.append(link); document.head.append(link);
$(`link[href='${darkPrismLink}']`).remove(); $(`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); $scope.$broadcast("dark-mode", on);
}; };
+1 -1
View File
File diff suppressed because one or more lines are too long