Force Dark Theme

[hirenshah]

Is there a variable or something that forces the dark theme irrespective of browser/platform settings?

I just noticed the Change Log states:

Light theme support: The app now automatically applies the theme based on your browser preferences

My Chrome is set to Dark but WebHook Tester v2.0.1 is Light themed:

[tarampampam]

Could you please take a screenshot of this page in your browser?

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

The area of interest is this one:

Since theming relies on prefers-color-scheme, you might need to enable the dark theme not only in your browser but also in your OS settings. By the way, which OS are you using?

[hirenshah]

Ahh, I didn't realise I had to set both OS (Windows 11) and Browser (Chrome) to Dark Mode. As soon as I changed the setting in Windows the theme switched to the dark one.

It would still be nice to have forcing of light or dark as a configurable option.

I thought I could tweak it myself by using --use-live-frontend but couldn't figure out how to use that option with a Docker Compose.

[tarampampam]

It would still be nice to have forcing of light or dark as a configurable option.

That said, it's quite challenging to implement. The "force" environment/cli flag would need to be parsed on the backend, passed to an HTTP endpoint, read by the frontend after the HTTP call, and only then applied to the styling options. It's a rather complicated process.

Especially since operating systems and browsers already have their own mechanisms for enforcing dark themes. Forcing a theme purely on the frontend is possible, but it can cause issues with elements like SVG images (which often have their own theming), icons, and similar components, leading to a less polished appearance.

In any case, I'll consider adding a theme toggler to the UI, but it will be a low-priority task. Does that sound okay?

[hirenshah]

Of course, this is purely a cosmetic request with little to no benefit - it should go to the bottom of the pile.

Thanks :)