No Code Attached Yet UI/UX Dark Mode
avatar dautrich
dautrich
18 Apr 2024

Summary

Dark Mode in J5.1 is a major improvement over J5.0. A huge 'Thanks' to Elisa and all the other contributors! But there is still some distance to go. Even if Dark mode in Joomla core would be perfect, there are still a number of extensions, which don't work perfectly in Dark Mode. This forces the user to switch between dark and light modes frequently.

But in core, there are some weak points as well, some of which I address with this issue:

The dark mode switch, a hidden feature

As written above, it is sometimes necessary to switch between dark and light mode. J5.1 does even implement a switch to do so easily, at least in theory. But the feature is most perfectly hidden, when updating from a previous Joomla version:

  • The switch is not available by default, ...
  • ... but must be activated by the user with the following process:
    • The user has to navigate to the Atum style page. There he is supposed to do a Save (or Save & Exit), even if not doing any (other) change.
    • And, miraculously, the switch appears in the User Menu!

IMHO, the switch should be visible by default, also if updating from a previous version.

Even when the switch is visible, it is still misleading.

When in dark mode, the user sees a symbol for 'night' and reads 'Dark Mode'.

grafik

I propose to modify the menu item like this: An icon for the current state followed by an action like 'Switch to ... Mode'. For the two possible states:

  • (fa-moon) Switch to Light Mode
  • (fa-sun) Switch to Dark Mode

Steps to reproduce the issue

  1. Install a fresh J5.0.3
  2. Update to J5.1.0
  3. Open the backend
  4. Find the User menu in the top right corner

Expected result

  • As described above, the Dark / Light Mode switch should be activated by default.
  • The switch should be labelled as described above.

Actual result

  • The Dark / Light Mode switch is not visible.
  • Even after the cumbersome activation process, it is misleading.

System information (as much as possible)

J5.1.0
PHP 8.2 / 8.3
MySQL 8.0.33

Additional comments

avatar dautrich dautrich - open - 18 Apr 2024
avatar joomla-cms-bot joomla-cms-bot - change - 18 Apr 2024
Labels Added: No Code Attached Yet
avatar joomla-cms-bot joomla-cms-bot - labeled - 18 Apr 2024
avatar dautrich dautrich - change - 18 Apr 2024
The description was changed
avatar dautrich dautrich - edited - 18 Apr 2024
avatar brianteeman
brianteeman - comment - 18 Apr 2024

Sorry but your comments are not correct.

Sorry but I can not replicate your issue

On a CLEAN install of joomla there is nothing to do. The selector is available by default.

avatar brianteeman
brianteeman - comment - 18 Apr 2024

As for the comment about the switch being misleading - I agree.

In this case the display is the "current" state and clicking on it will change to the opposite state

This is the same "problematic" issue we have throughout Joomla that we have never resolved in 18 years. Look at the State button/icon in the article manager. The behaviour is the same.

image

The display is the "current" state (published) and clicking on it will change to the opposite state (unpublished)

For everyone that expresses an opinion that this pattern is correct there is another person who expresses the opinion that it is wrong. Joomla can't win in this case.

As we have grown accustomed to this behaviour since forever for the status buttons changing the dark mode to work in an opposite direction would be more confusing and not less

avatar dautrich dautrich - change - 18 Apr 2024
The description was changed
avatar dautrich dautrich - edited - 18 Apr 2024
avatar dautrich
dautrich - comment - 18 Apr 2024

@brianteeman

You're perfectly right! On a clean install, the switch is enabled by default, but not when updating from a previous J5 to J5.1.
Therefore, the update process should enable the switch. I have updated my previous comment.

avatar dautrich
dautrich - comment - 18 Apr 2024

I don't completely agree to your second comment. Your example shows just a button of 'checkbox' type, where there is no room for longer explanations. Not so in the user menu. My proposal is to show the current state plus an action to change the state.

avatar brianteeman
brianteeman - comment - 18 Apr 2024

Therefore, the update process should enable the switch.

Thats a BUG. And easy to fix

avatar brianteeman
brianteeman - comment - 18 Apr 2024

I don't completely agree to your second comment. Your example shows just a button of 'checkbox' type, where there is no room for longer explanations. Not so in the user menu.

we have the longer explanations in the "tooltip" and that gets even more inconsistent as you use it.

The amount of space in the user menu is language dependent but I am definitely open to seeing a mockup that will show both the current state and how to chanage to another state. Sadly the UX group appears to be no more.

avatar brianteeman
brianteeman - comment - 18 Apr 2024

@richard67 This works localy but no idea if it is good enough and/or if the same can be done in postgres


UPDATE `#__template_styles`
SET `params` = CONCAT(SUBSTRING(`params`, 1, LENGTH(`params`) - 1), ', "colorScheme": "os"}')
WHERE `template` = 'atum'
AND `params` NOT LIKE '%colorScheme%';

This SQL statement updates the params field in the #__template_styles table for the template named 'atum'. It appends ,"colorScheme": "os"} to the existing value of params, but only if the params field does not already contain 'colorScheme'.

This update ensures that the color scheme parameter is added to the params field for the 'atum' template if it doesn't exist already, without duplicating it if it's already present.

avatar richard67
richard67 - comment - 18 Apr 2024

@brianteeman In J5 we can use json functions due to the raised db version requirements. So no need for such risky string replacements on json strings. We have already some example in some 5.x update SQL script which shows how it can be done here, too. I can’t search it now. But if you grep the 5.x update SQL scripts for „json“ (case-insensitive) you may find it.

avatar brianteeman
brianteeman - comment - 18 Apr 2024

i did try json first - lol will do it that way

avatar richard67
richard67 - comment - 18 Apr 2024

P.S.: On weekend I might have time to help more, if necessary.

avatar dautrich
dautrich - comment - 19 Apr 2024

@brianteeman

The amount of space in the user menu is language dependent but I am definitely open to seeing a mockup that will show both the current state and how to chanage to another state. Sadly the UX group appears to be no more.

I've played around a little bit with my browser's devtools.

See here a mockup of my proposal in English language:
grafik

The width of the menu seems to be dynamic, Therefore, this would even work for German despite the lengthy German words:
grafik

avatar brianteeman
brianteeman - comment - 19 Apr 2024

the first thing I thought when I saw this was why do you have the wrong icon.

avatar dautrich
dautrich - comment - 19 Apr 2024

I read it like this: It's the current state, followed by the action to change to the alternate state.

BTW: I didn't change the icons, only the text.

avatar brianteeman
brianteeman - comment - 19 Apr 2024

I read it like this: It's the current state, followed by the action to change to the alternate state.

and thats the problem as I said before. 50% will read it one way and 50% will read it another.

avatar dautrich
dautrich - comment - 19 Apr 2024

I didn't invent it like this. But at least the text of the menu item should explain its use. And that's what I propose.

avatar Quy Quy - change - 23 Apr 2024
Labels Added: Dark Mode
avatar Quy Quy - labeled - 23 Apr 2024
avatar Quy Quy - change - 23 Apr 2024
Labels Added: UI/UX
avatar Quy Quy - labeled - 23 Apr 2024
avatar dautrich
dautrich - comment - 9 May 2024

@coolcat-creations @chmst @LadySolveig

This issue consists of two parts, that might better be handled independently:

  1. The Dark Mode switch does appear in J5.1.0 only after some strange process.
  2. I made a proposal to modify the text on the Dark Mode switch.

Number 1 has been identified as a bug. PR #43310 has been created and merged.

I'm in doubt how to handle number 2. I have made a proposal in this issue (see my post dated April 19, 2024, and the subsequent discussion with Brian Teeman). As I don't see any progress on this issue, I see two options:

  • I give up and close this issue without further action.
  • I close this issue and open a new one with just my proposal.

What do you think?

avatar brianteeman
brianteeman - comment - 9 May 2024

How about this.

The icon represents the current state and the text identifies what you can switch between

image

image

avatar dautrich
dautrich - comment - 9 May 2024

Much better than the current solution.

avatar brianteeman
brianteeman - comment - 9 May 2024

i will make a pr in the morning and see what others think

avatar brianteeman
brianteeman - comment - 9 May 2024

ok - so i lied - did the PR now. #43454

avatar richard67 richard67 - change - 9 May 2024
Status New Closed
Closed_Date 0000-00-00 00:00:00 2024-05-09 21:25:50
Closed_By richard67
avatar richard67 richard67 - close - 9 May 2024
avatar richard67
richard67 - comment - 9 May 2024

Closing as having a pull request. See #43454 .

Add a Comment

Login with GitHub to post a comment