BookStackApp/BookStack

dark mode compatibility with ko-fi floating button

Closed this issue · 2 comments

kekcsi commented

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>
  1. activate ultimatetheme in $BOOKSTACK/.env
  2. enable content scripts in $BOOKSTACK/.env
  3. add ko-fi.com as frame-src to the CSP in $BOOKSTACK/.env
  4. open your wiki in the browser
  5. 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

Browser Details

Chrome 131.0.6778.86 (Official version) (64-bit)

Exact BookStack Version

v24.05.4

ssddanbrown commented

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>
kekcsi commented

Great!