For what it's worth, your assertion that Joomla is doing it right is patently wrong. The correct way to handle your use case is to change your browser's colour scheme. For Chromium-based browsers it's in Settings, Appearance. In your use case, instead of "System default" (which follows the OS UI dark/light mode preference) you can choose Light for light mode and leave Joomla's setting to "OS preference". This way you are not forcing a colour mode upon your users, you are letting them decide their colour mode preference using the standard way the W3C approved for implementing this feature. Forcing a colour mode site-wide, overriding the user's browser preferences and forcing them to manually transcribe those preferences in a site-specific section (the user profile) is conceptually wrong, and incompatible with the accessibility golden rule that the user knows better than you how they want their accessibility options set up on their own machine.
As to your question on whether it's possible to do something about it, yes, it is.
I will tell you what I've done so far which seems to work well, but I need to test it a lot more before including it in production (which is why it wasn't included in today's release of Admin Tools).
For Admin Tools. Open the file media/com_admintools/css/j5dark.css
. Change @media screen and (prefers-color-scheme: dark)
with html[data-color-scheme="dark"]
and save the file. Clear your browser's cache and reload the page.
For Akeeba Backup. Open the file media/com_akeeba/css/j5dark.css
. Change @media screen and (prefers-color-scheme: dark)
with html[data-color-scheme="dark"]
and save the file. Clear your browser's cache and reload the page.
For completeness' sake, the same applies for Akeeba Ticket System. Open the file media/com_ats/css/j5dark.css
. Change @media screen and (prefers-color-scheme: dark)
with html[data-color-scheme="dark"]
and save the file. Clear your browser's cache and reload the page.
The difference here is that @media screen and (prefers-color-scheme: dark)
depends on your OS settings which is what 99.9% of people want. The html[data-color-scheme="dark"]
ignores OS settings and ONLY works if Joomla's JavaScript has applied Dark Mode explicitly. The former works on any backend template, the latter only works on Atum if and only if Joomla's JavaScript is loaded.
I will end up having to implement this feature the wrong way (i.e. the way Joomla did) just because Joomla core maintainers can't be arsed to understand accessibility design. Oh, well, what else is new?
Nicholas K. Dionysopoulos
Lead Developer and Director
🇬🇷Greek: native 🇬🇧English: excellent 🇫🇷French: basic • 🕐 My time zone is Europe / Athens
Please keep in mind my timezone and cultural differences when reading my replies. Thank you!