dark mode compatibility with ko-fi floating button #5075

New Issue

OVERLORD · 2026-02-05T09:38:19+03:00

OVERLORD commented

2026-02-05 09:38:19 +03:00

Originally created by @kekcsi on GitHub (Dec 5, 2024).

Describe the Bug

Hello, I am reporting a compatibility issue. I also contacted ko-fi support about it. Ko-fi has this floating button widget that I managed to embed into my wiki page. The embed code is an inline script and the widget itself should appear in a transparent iframe in the lower corner of the viewport. It looks fine as long as I keep BookStack in light mode but when I switch to dark, a white opaque rectangle appears around it. Any idea why?

Steps to Reproduce

register at ko-fi as 'a-ko-fi-profile-name'
add the ko-fi embed code to $BOOKSTACK/themes/ultimatetheme/layouts/parts/base-body-end.blade.php

activate ultimatetheme in $BOOKSTACK/.env
enable content scripts in $BOOKSTACK/.env
add ko-fi.com as frame-src to the CSP in $BOOKSTACK/.env
open your wiki in the browser
activate dark mode from the web UI

Expected Behaviour

the button should look as good as before in the light mode, take as little overlapped space as possible, not hurting the eye with white areas

Screenshots or Additional Context

Browser Details

Chrome 131.0.6778.86 (Official version) (64-bit)

Exact BookStack Version

v24.05.4

Originally created by @kekcsi on GitHub (Dec 5, 2024). ### Describe the Bug Hello, I am reporting a compatibility issue. I also contacted ko-fi support about it. Ko-fi has this floating button widget that I managed to embed into my wiki page. The embed code is an inline script and the widget itself should appear in a transparent iframe in the lower corner of the viewport. It looks fine as long as I keep BookStack in light mode but when I switch to dark, a white opaque rectangle appears around it. Any idea why? ### Steps to Reproduce 1. register at ko-fi as 'a-ko-fi-profile-name' 2. add the ko-fi embed code to $BOOKSTACK/themes/ultimatetheme/layouts/parts/base-body-end.blade.php <script src='https://storage.ko-fi.com/cdn/scripts/overlay-widget.js'></script> <script nonce> kofiWidgetOverlay.draw('a-ko-fi-profile-name', { 'type': 'floating-chat', 'floating-chat.donateButton.text': 'Adomány', 'floating-chat.donateButton.background-color': '#7e3574dd', 'floating-chat.donateButton.text-color': '#fff' }); </script> 3. activate ultimatetheme in $BOOKSTACK/.env 4. enable content scripts in $BOOKSTACK/.env 5. add ko-fi.com as frame-src to the CSP in $BOOKSTACK/.env 6. open your wiki in the browser 7. activate dark mode from the web UI ### Expected Behaviour the button should look as good as before in the light mode, take as little overlapped space as possible, not hurting the eye with white areas ### Screenshots or Additional Context ![image](https://github.com/user-attachments/assets/b1e43cd3-5a83-4d35-bec7-5f89f0762060) ### Browser Details Chrome 131.0.6778.86 (Official version) (64-bit) ### Exact BookStack Version v24.05.4

OVERLORD added the 🐛 Bug label 2026-02-05 09:38:19 +03:00

OVERLORD closed this issue

2026-02-05 09:38:21 +03:00

OVERLORD commented

2026-02-05 09:38:23 +03:00

@ssddanbrown commented on GitHub (Dec 5, 2024):

Hi @kekcsi,
This is due to default browser behaviour with differing color schemes, which applies a white background to iframes by default since the inner frame indicates a light scheme, but the outer page (BookStack) is using a dark scheme.

Here's some code you could add to the "Custom HTML Head Content" customization setting which should align the themes for this element to avoid this extra background:

<style>
[id^="kofi-widget"] { color-scheme: light; }
</style>

Note: If you'd prefer, you could use the KoFi code via the "Custom HTML Head Content" customization setting, rather than via a custom theme, with just a small tweak to the code:

<script src='https://storage.ko-fi.com/cdn/scripts/overlay-widget.js'></script>
<script nonce type="module"> window.kofiWidgetOverlay.draw('a-ko-fi-profile-name', { 'type': 'floating-chat', 'floating-chat.donateButton.text': 'Adomány', 'floating-chat.donateButton.background-color': '#7e3574dd', 'floating-chat.donateButton.text-color': '#fff' }); </script>

@ssddanbrown commented on GitHub (Dec 5, 2024): Hi @kekcsi, This is due to default browser behaviour with differing color schemes, which applies a white background to iframes by default since the inner frame indicates a light scheme, but the outer page (BookStack) is using a dark scheme. Here's some code you could add to the "Custom HTML Head Content" customization setting which should align the themes for this element to avoid this extra background: ```html <style> [id^="kofi-widget"] { color-scheme: light; } </style> ``` --- Note: If you'd prefer, you could use the KoFi code via the "Custom HTML Head Content" customization setting, rather than via a custom theme, with just a small tweak to the code: ```html <script src='https://storage.ko-fi.com/cdn/scripts/overlay-widget.js'></script> <script nonce type="module"> window.kofiWidgetOverlay.draw('a-ko-fi-profile-name', { 'type': 'floating-chat', 'floating-chat.donateButton.text': 'Adomány', 'floating-chat.donateButton.background-color': '#7e3574dd', 'floating-chat.donateButton.text-color': '#fff' }); </script> ```

OVERLORD commented

2026-02-05 09:38:27 +03:00

@kekcsi commented on GitHub (Dec 5, 2024):

Great!

@kekcsi commented on GitHub (Dec 5, 2024): Great!

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#5075