I do not like how Joomla 5 handles dark mode

Update 4/16/24

Joomla 5.1 has introduced an improved dark mode with the ability to change the dark/light style setting of the template. Hooray!!!

Old grievances below if you care to read:

While I am happy that Joomla 5 finally has a dark mode supported back end, I do not think they implemented it in the most ideal way.

Let’s begin with addressing how Joomla 5 handles dark mode in the admin template

Update: New simple JS workaround for dark mode toggle from German developer it-networks. I can’t believe I didn’t figure this out at first, but I’m super happy to see someone did it for us! Simply copy/paste the code into a custom admin module and publish it somewhere (like status module position).
Note that doing the dark mode toggle might not work on all third party extensions. But it will work on most.

Video Tutorial From Basic Joomla Tuts

Copy Code from it-networks.de

Continue reading original post on why I hate how dark mode is handled by default…

How It’s Handled…

 Joomla’s administrator template has been customized with additional CSS to support a separate dark and light mode. 

The light mode looks basically the same as Joomla 4’s admin template. Dark mode has the same layout, but of course uses light text on dark grey backgrounds instead of black on white.

I don’t have a big problem with dark mode itself. But rather, how they’ve decided to implement the dark/light mode selection.

Dark mode is achieved using the CSS media query “prefers-color-scheme”

This media query basically tells each users browser to check if the user enabled dark or light mode in the users’ operating system’s personal preferences. Then, if dark, it uses dark media queries, overriding some of the light ones.

The Problem

The problem with this approach is that it does not allow administrators to control their preferred color mode within Joomla itself.

You’ve likely seen many websites, including this one, which feature a dark/light mode toggle button near the bottom (on this site it’s in the footer).

That way, if a user uses dark or light mode for “most” of their apps or the operating system, they can still easily switch to dark or light mode on the respective website without changing their operating system settings. This is useful for multiple reasons including accessibility, interface testing, and a basic choice of user customization.

Finally, not all third party developers support or even know dark mode is a thing. It requires additional testing and time to add dark mode. And, since Joomla did it using media queries, all third-party developers would likely want to follow the same approach. Furher solidifying the issue and making this decision much harder to reverse course on.

In fact, even Bootstrap 5.2, the CSS framework Joomla is dedicated to using, does not use media queries to toggle dark mode. Rather, Bootstrap 5.2 uses CSS classes or data attributes to toggle different themes. At the very least, you would think Joomla 5 would use the same method its included CSS framework uses!

How I think it should be handled

To achieve this user toggleable dark mode on the website itself, without forcing the color set in the user’s operating system, usually it is done with a CSS class or data attribute. A simple JavaScript file checks if the user prefers dark or light mode the first time they visit the website, then toggles the CSS class or data attribute on or off. A button is then added which allows the user to manually toggle the feature on or off with another few simple lines of JavaScript. In total, this requires less than 10-15 lines of JS.

That way, the user sees their preferred color scheme from the media query whenever they visit the site, unless they click the toggle button on the site itself. The rest of the user’s apps look the same, but they have control over how your individual site looks.

Additional Thoughts

Unfortunately, as far as I’ve been able to research, there is no reasonably easy way to override the user’s prefered color scheme on a single website with JavaScript and a toggle button. Adding data attributes or a .dark class to a page is far simpler to toggle on and off with JS, and just as easy to target using CSS as the @media query.

I attempted to design a plugin which added user toggleable dark mode to admin pages. It mostly worked. However, I quickly realized it was far more effort than it was worth, as I had to search through dozens of scss files and try to find appropriate ways to override the existing media query based dark/light mode. Basically, I had to add additional overrides to the media queries so if a user preferred dark OR light, it could show them dark mode. Then, if they preferred dark or light, it could also show them light mode. This meant I was effectively rewriting CSS styles for both dark and light mode, twice!

I mostly got this working. Then I realized if you’re using third-party extensions, there’s no way in hell I can keep up with it all. I can’t override Joomla’s template CSS and the backend css for every single extension that third-party developers create. It’s simply not possible. Even if I write a script to automatically extract the dark/light CSS from all the stylesheets and compile them back together using css classes or data queries, there’s no way I can keep up with the amount of extensions out there.

In short, I hate how this is being handled. It’s my least favorite part of Joomla’s new dark mode.

0 0 votes
Article Rating
Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments