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
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 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
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.
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.