Dark mode for Joomla 5.1

[MacJoom]

Pull Request for Issue # .

This is the rebase of #42010 for Joomla 5.1

Summary of Changes

Dark mode colors

Testing Instructions

Turn on dark mode in your browser or O/S

Actual result BEFORE applying this Pull Request

old colors

Expected result AFTER applying this Pull Request

new colors

Link to documentations

Please select:

• [ ] Documentation link for docs.joomla.org:

• [ ] No documentation changes for docs.joomla.org needed

• [ ] Pull Request link for manual.joomla.org:

• [ ] No documentation changes for manual.joomla.org needed

[fgsw]

In light mode 'Clear'-Button not visible:

[Kostelano]

Is this the intended color? The light version has a different color matching.

Menu --> Privacy Dashboard, violation for both themes.

Different color separator.

Wherever the “loading” indicator of something is used, the Joomla icon looks like this. I’m not sure if this is related to this PR, but I’ll report it anyway.

[Kostelano]

Fields with the disabled="disabled" attribute are not highlighted in the dark theme.

[dorisdreher]

I have tested this item :white_check_mark: successfully on e5fc19ab77b7040d8e863cab4bc4e88d3ee25d39

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/42757.}

[crommie]

I have tested this item :white_check_mark: successfully on e5fc19ab77b7040d8e863cab4bc4e88d3ee25d39

Small changes in colors

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/42757.}

[crimle]

I have tested this item :red_circle: unsuccessfully on e5fc19ab77b7040d8e863cab4bc4e88d3ee25d39

Switching Firefox to dark mode immediately changes Joomla to dark mode too. With or without this Patch

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/42757.}

[Nuyonuyonoina]

Colors doesn't change after applying patch.

[eddiekonczal]

I have tested this item :red_circle: unsuccessfully on e5fc19ab77b7040d8e863cab4bc4e88d3ee25d39

Cannot reproduce problem before applying patch

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/42757.}

[korenevskiy]

I dragged the installation extension with the mouse. And I saw a white standby setup screen. Quite obviously there should be a dark screen.

Probably there should be a black translucent one here

[Quy]

Wherever the “loading” indicator of something is used, the Joomla icon looks like this. I’m not sure if this is related to this PR, but I’ll report it anyway.

@Kostelano See #42903

[korenevskiy]

new: old:

Colleagues, I understand that a lot of work has already been done, it turned out to be many times more work than expected. And a huge thank @MacJoom .

I want to suggest making the links a little lighter. The old color is annoying because they differ too much in color from the main text. I'll give you an example. For example, if we have a text that is bright green and bright red, then when working with the text, we try to relax so that we focus only on the idea of the text. So the eyes focus only on the bright red color, or on the bright green color. Constantly switching the focus of attention from colors is annoying. There is a similar situation here, the eyes have to change the focus of the text color when reading. I'm not insisting. But when using the site, you will eventually feel a mild strain in your eyes. It resembles the tension of text with a translucent color. Maybe we'll put this amendment in the next PR?

Focus on the white text and then on the links, you will feel that the white and light blue text are perceived as one. And dark blue links are perceived separately, try to check the focus of attention on the text with links.

Example blue link color: #6fbfdb

[coolcat-creations]

new: old:

Colleagues, I understand that a lot of work has already been done, it turned out to be many times more work than expected. And a huge thank @MacJoom .

I want to suggest making the links a little lighter. The old color is annoying because they differ too much in color from the main text. I'll give you an example. For example, if we have a text that is bright green and bright red, then when working with the text, we try to relax so that we focus only on the idea of the text. So the eyes focus only on the bright red color, or on the bright green color. Constantly switching the focus of attention from colors is annoying. There is a similar situation here, the eyes have to change the focus of the text color when reading. I'm not insisting. But when using the site, you will eventually feel a mild strain in your eyes. It resembles the tension of text with a translucent color. Maybe we'll put this amendment in the next PR?

Focus on the white text and then on the links, you will feel that the white and light blue text are perceived as one. And dark blue links are perceived separately, try to check the focus of attention on the text with links.

Example blue link color: #6fbfdb

The color chosen for the links is selected to work for white on linkcolor and on linkcolor on white. So we have only one variable. Another color means way more work and is prohibiting this PR to be ready any time soon

[korenevskiy]

@coolcat-creations Do you want to say that in a dark theme and in a white theme, the color of the links will be the same, without changes?

[coolcat-creations]

@coolcat-creations

Do you want to say that in a dark theme and in a white theme, the color of the links will be the same, without changes?

No I was talking only about the dark theme

[korenevskiy]

No I was talking only about the dark theme

I didn't know that the dark theme has a white background for the text. Sorry. Alas. How deep is the edit to make. I would suggest that you definitely plan to add it after making this PR. Have the participants already discussed the plans for a new template based on cassiopeia? I hope you will agree that my suggestion of link colors is important.

[coolcat-creations]

Sorry that was a mistake in my text, i meant link color on dark and white on link color. Cassiopeia is totally unrelated to the backend template.

[coolcat-creations]

@LadySolveig i think all the outstanding issues are fixed can we merge and create afterwards separate PRs if something comes up?

[brianteeman]

@coolcat-creations @MacJoom Please remove the block of testing code in the template

[coolcat-creations]

Already reverted actually

[brianteeman]

[brianteeman]

Already reverted actually

Not sure where its reverted because it is still present in this pr

[coolcat-creations]

Already reverted actually

Not sure where its reverted because it is still present in this pr

I only can make PRs to the other PR I cant do a separate PR because this is not merged yet, so we always need to wait until its resolved in the main. Thats also the reason why I am begging to merge this so fixes can be done in smaller PRs

[brianteeman]

I only can make PRs to the other PR

Of course you can - you make it to MacJoom:dark-mode-5.1-dev

[coolcat-creations]

Which I did, thats what I am saying :-)

[brianteeman]

so just ask @macjoom to merge it or to gicve you access on his repo to merge it. That shouldnt be a reason to merge a pr here that is known not to be ready

[brianteeman]

The new template screenshots in this PR are not used as they are jpg but the code is looking for png

[coolcat-creations]

I did already and he did, I only told you that Its reverted already. Still standing by my point that it would be easier if we have smaller PRs this is hard to work on

[Quy]

Please fix file conflict.

[bembelimen]

Closed in favour of https://github.com/joomla/joomla-cms/pull/42986