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.

Author: tdurieux

public/css/all.min.css

@@ -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; }
 }

public/css/style.css

@@ -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>

public/index.html

@@ -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);
       };