Where is var(--bg-color-hvr); defined - I couldn't see it and it results in problems such as this on hover

Note to anyone testing. You need to test atum in both light and dark modes

Before testing specific things - it feels like the colors in the menu bars take all the attention away from the main component area. Especially the left menu.

Before testing specific things - it feels like the colors in the menu bars take all the attention away from the main component area. Especially the left menu.

I think that's still WIP because some colors are not done yet I will try to help when back in office.

@HLeithner @MacJoom Is this still intended to be merged for 5.0? I ask because there are issues in the already merged dark-mode code but there is no point in fixing it if this PR will change it all again

no 5.0.0 is closed, might be considered for 5.0.1

So what should be done regarding existing dark mode bugs

will be fixed in 5.0.1

So I go back to my original question but change 5.0 to 5.0.1

Is this still intended to be merged for 5.0.1? I ask because there are issues in the already merged dark-mode code but there is no point in fixing it if this PR will change it all again

Happy to contribute but donty want to waste time and effort

I have to discuss with the team what is really happening in ths pr and what's happening another pr, as long as this pr touches only the dark mode and doesn't break light mode it will go into 5.0.1+

it currently breaks light mode :(

what is happening with this PR. Have we been wasting our time working on release blockers

which release blocker has fix here? this pr is unlikly to be merged into 5.0.0, my target version would be 5.0.1

I have a question.
How do you turn dark mode off?
Nowhere to be found...

I have a question. How do you turn dark mode off? Nowhere to be found...

In the Browser :)

which release blocker has fix here? this pr is unlikly to be merged into 5.0.0, my target version would be 5.0.1

Surely it would be in 5.1 according to semver

Already mentioned it somewhere that darkmode will be fixed within the patch releases, as long as the impact is not too big.

Already mentioned it somewhere that darkmode will be fixed within the patch releases, as long as the impact is not too big.

obviously havent seen that but anyway this pr is way more than a low impact patch

our b/c policy doesn't apply to html and css never the less we will see if it can be merged or not when 5.0 is out.

our b/c policy doesn't apply to html and css never the less we will see if it can be merged or not when 5.0 is out.

semver still applies

I have a question. How do you turn dark mode off? Nowhere to be found...

There is a plugin for Firefox "Toggle dark mode" https://github.com/Cimbali/toggle-dark-mode

I use it

@MacJoom you can save a lot of time by checking the code style locally before committing

npm run lint:css

@MacJoom you can save a lot of time by checking the code style locally before committing

npm run lint:css

OK thank you - didn't know that - i still have 2 errors i cannot explain or remove... on lines 71 and 72 Unexpected leading zero number-leading-zero - the are not even numbers on this line ... found it anyway on other lines

IS there a reason that light mode has rounded corners and dark mode has square borders.

quickicon-border-radius: unset,

It is a design variation which is discussed. Thank you for bringing this up This was a comment added by macjoom

If there is going to be a design variation in the dark mode it might as well be a different template

(please do NOT edit my posts with your own comment. Not only does that not trigger a notification it now makes it look like I have said it which I have not)

If there is going to be a design variation in the dark mode it might as well be a different template

(please do NOT edit my posts with your own comment. Not only does that not trigger a notification it now makes it look like I have said it which I have not)

We will have the same border radius as in light mode. The unset was a early leftover from version 1 i think
(Sorry for the edit - was not intentional - hit edit instead of reply)

@MacJoom can we have some progress here so that it's finished for 5.0.1 please?

I think it would be better to add a button to switch from dark to light.
Probably not everyone is comfortable working in the dark or in the light.
The user should have a choice.
He himself must choose in what color scheme the admin panels work.

@rinka88 but you have a switch in your browser, if you dont prefer dark theme you can switch it off in the browser settings. Or there are browser plugins for that. Does it really need a special switch in backend, and if you say yes, then what are the reasons for it?

There are people who do not know the browser settings, and sometimes they also want to switch to another mode. Or those who are used to working in a light admin theme and a dark browser.
I think we should still leave the choice to the user so that he can switch

For example, you can see the template from @dgrammatiko , Muta

@rinka88 @coolcat-creations fwiw there is code that you could reuse here from #39400. In that PR there's an additional field for the theme selection which is used by a dark/light switch. What that PR was missing (because BS 5.3 was in an early alpha) was the SCSS/CSS part for the OS switch (the media query) and the states (4 = 2 that allow OS setting the theme and 2 for the user override, forced) which is implemented in the Muta template, but, Muta is using a cookie to store the user State, where a better approach would be to use the User state (from DB) for that.

I must be doing something wrong again. With Patchtester, I applied the patch and then npm ci gave this:

AssertionError [ERR_ASSERTION]: Expected values to be strictly equal:

0 !== 2

npm ERR! code 1
npm ERR! path /Users/ceford/Sites/joomla-cms5
npm ERR! command failed
npm ERR! command sh -c node build/build.js --prepare

npm ERR! A complete log of this run can be found in: /Users/ceford/.npm/_logs/2023-10-23T13_36_29_499Z-debug-0.log
```<hr /><sub>This comment was created with the <a href="https://github.com/joomla/jissues">J!Tracker Application</a> at <a href="https://issues.joomla.org/tracker/joomla-cms/42010">issues.joomla.org/tracker/joomla-cms/42010</a>.</sub>

This generates css that I am sure it was not intended to do with the same color for background-color and color

example 1

.form-select.form-select-success, .form-select-success.custom-select, .form-select.custom-select-success, .custom-select-success.custom-select {
  color: var(--success);
  background-color: var(--success);
  border-color: var(--success);
}

example 2

.form-select.form-select-danger, .form-select-danger.custom-select, .form-select.custom-select-danger, .custom-select-danger.custom-select {
  color: var(--danger);
  background-color: var(--danger);
  border-color: var(--danger);
}

form-select.form-select-success

very strange this is in the _custom_forms.scss since 2021 (which is obviously a bug, for all states success, danger etc)
&.form-select-success,
&.custom-select-success {
color: var(--success);
background-color: var(--success);
border-color: var(--success);

Thank you for your findings - i will work on the _custom-forms.scss

Missing border values in light mode

incorrect border values in dark mode

Any idea when disabling dark mode will be in the release? : )

I guess a turn off switch is rather a feature so according to semver I guess earliest in 5.1 when someone builds it. But I dont understand the issue. Just install a plugin or set up your browser accordingly?

I guess a turn off switch is rather a feature so according to semver I guess earliest in 5.1 when someone builds it. But I dont understand the issue. Just install a plugin or set up your browser accordingly?

For me it's an usability bug forcing to use a dark mode in a website regardless of what I do with my OS (i need to choose if this can follow or not my os/browser). The switch had to be foreseen from the beginning, as in every site that uses dark mode preference.
#42134 (comment)

#42010 (comment) still not fixed

Debug bar does not change in dark mode

Accessibility contrast failure

Accessibility contrast fail

Accessibility Contrast failure

Missing background on alert info

Change in light mode on the border of selects from current 5.0 looks wrong

Before this pr

With this pr

To my eye the use of two different blue here is wrong

#42010 (comment) still not fixed

thank you - fixed

I dont understand why this change has been made in light mode

Before this PR

After this PR

In light mode changing the template link color works

In dark mode changing the template link color reverts to the default value

Accessibility contrast fail

Is no one else checking this?

Media Manager needs some dark backgrounds too, and the hard borders should be removed
And the Links seem to use a different class than the links on other pages. I would suggest to fix the class to be the same as other links instead of setting the color separately in another class.

I dont understand why this change has been made in light mode

Before this PR

After this PR

Was not really intentional - the buttons got the same logic as the quickicons. will change

I would color the top bar in the same dark color as the left sidebar. It does not look harmonic that the top bar is blue and nothing else is.

In this thread there won't be a discussion of the switch button from dark to light?

The Create a module Quick Icons seem to have different classes than the quickicons on the home dashboard. the contour is missing

The borders around the inputs seem too hard with their contrast:

I think the appearance of access and ordering looks quite good (regarding background and border)

Not sure about the hover state of the buttons being white, It feels like too much contrast in a dark mode. Is it possible to just darken the background by 5% on hover?

Can you reduce the contrast of the lines between the entries and I wonder if its really needed to make the links bold here, it does not help the readability IMO

If the other tables use the dark background I think the site information table should use the same css class

There is a strange border between the items:

The Learn More Buttons look disabled in dark mode:

The Action Button, which is disabled looks clickable:

In Light mode the backgrounds here went lost:

In this thread there won't be a discussion of the switch button from dark to light?

There is a separate PR for it. Please test. #42221

@MacJoom please use

$color-mode-type: data;

here:

This will use data-bs-theme="dark" instead of @media (prefers-color-scheme: dark).
For the PR testing can temporary add data-bs-theme="dark" in to <html ... data-bs-theme="dark"> of template index.php.

This way we can make it configurable (see #42221).

In Light mode the backgrounds here went lost:

fixed thank you - i will mark all fixed items with the eyes emoji

There is a strange border between the items:

Does not look the same on my site - changed the divider anyway.

I have a problem with the line in the screenshot - does anyone have an idea where the line is defined?

.media-toolbar -> box-shadow: 0 -1px 0 0 var(--template-bg-dark-7);

the --template-bg-dark-7 var is white the border should be just set to none imo

I have a problem with the line in the screenshot - does anyone have an idea where the line is defined?

It is the box shadow - see #41904

This is really nice, well done and thank you to all who are contributing here!!

Contrast Error

This text does not have enough contrast with the background. The contrast ratio should be at least 4.5:1 for normal text and 3:1 for large text.
The contrast ratio is 2.11:1

I see this again an example of the usage of wrong classes in the backend. Instead of fixing the color please consider to fix the used class, because there are other badges that work well.

Contast error

This text does not have enough contrast with the background. The contrast ratio should be at least 4.5:1 for normal text and 3:1 for large text.
The contrast ratio is 2.9:1

Contast Error

This text does not have enough contrast with the background. The contrast ratio should be at least 4.5:1 for normal text and 3:1 for large text.
The contrast ratio is 3.19:1

Same here with the reported link contrast error, should use the same link class as all the other links (blue ones) @MacJoom

Preview and Accessibility check are loading the site with some dark mode css that should nto be present in cassiopeia.

Same here with the reported link contrast error, should use the same link class as all the other links (blue ones) @MacJoom

Should i change the warning color or the number color? @coolcat-creations.

@MacJoom For the blue Links the class of the links so they have the same blue color.
For the badge the contrast of the warning panel (Quicklinks on Dashboard) should work here too. So we don't need to invent new colors.

Editor > Media

New color?

Not obvious as buttons?

It is really hard to keep testing this PR as we are reporting issues but have no idea if they are solved or not so have to restest everything everytime.

For example a commit message of Various Fixes 1,2,4,7,8 means nothing to a tester although presumably the numbers have a meaning to you?

Template Style Colour Settings.
Only some have an effect in dark mode. Not sure what the expected behaviour is. Maybe there shouuld be a different set of params for dark mode colour settings

Template Style Colour Settings. Only some have an effect in dark mode. Not sure what the expected behaviour is. Maybe there shouuld be a different set of params for dark mode colour settings

You are right - just the the link colour can be configured (it's not even working everywhere) and that hardly makes sense, it should be removed and eventually put on a seperate page for dark mode settings.

It is really hard to keep testing this PR as we are reporting issues but have no idea if they are solved or not so have to restest everything everytime.

For example a commit message of Various Fixes 1,2,4,7,8 means nothing to a tester although presumably the numbers have a meaning to you?

I agree... and yes i have an internal numbering for fixes. We should include numbers in the reports here too, i'm in danger of losing track...

The dark mode has not been finalized.
If you go to the site configuration settings section.
You can see how the white frames are visible.

1. I propose to make the frames gray.
2. The DETAILS tag is too light gray. The tag DETAILS , you need to make the background color tag SELECT.
3. Make the Fieldset background 2 times darker.
4. the left column with links is also too light. You may notice the background color of this column is the same as the help buttons. We need to make the color of the left column the same as the background color of the FieldSet.
5. In the Permissions tab, the frame is white, you need to make the same color as the lines of the list of permissions rights.

• I also suggest considering the hover style for the list. Make the text of the list item with Hover black, similar to how the text looks like in a multiselect.
• Also make the colors of the blue links <A> a little lighter. Example:

.cpanel-modules .list-group-item a:not(.btn){ 
    color: rgb(122, 220, 253);
}

The dark mode has not been finalized. If you go to the site configuration settings section. You can see how the white frames are visible.

1. I propose to make the frames gray.
2. The DETAILS tag is too light gray. The tag DETAILS , you need to make the background color tag SELECT.
3. Make the Fieldset background 2 times darker.
4. the left column with links is also too light. You may notice the background color of this column is the same as the help buttons. We need to make the color of the left column the same as the background color of the FieldSet.
5. In the Permissions tab, the frame is white, you need to make the same color as the lines of the list of permissions rights.

• I also suggest considering the hover style for the list. Make the text of the list item with Hover black, similar to how the text looks like in a multiselect.
• Also make the colors of the blue links <A> a little lighter. Example:

.cpanel-modules .list-group-item a:not(.btn){ 
    color: rgb(122, 220, 253);
}

Thank you for your input! - Please check again. Not changed (yet): links

I would generally make all the panels rounded.
At the time of Windows 8. Microsoft square style was promoted, Then microsoft realized that it was nonsense, but there was no going back. Windows 10 supported the senseless square style, but it was already clear that the square style of the panels was nonsense.
It's time for us to move away from the square style to the flat style, too.
Here, for example, I threw an example of a couple of styles how it could look with 3 corrections in styles.
Actually, the style of the frames and the color scheme can be copied from the github website.

This should NOT be a redesign. The pull request is about improving the dark mode. Anything else really is off topic and should be its own issue

This should NOT be a redesign. The pull request is about improving the dark mode. Anything else really is off topic and should be its own issue

Example without rounding.

Why is my last post OFF-topic? I only showed a dark color style. Without redesign.

Why is my last post OFF-topic? I only showed a dark color style. Without redesign.

No idea - not my action - i have done an unhide now

Why is my last post OFF-topic? I only showed a dark color style. Without redesign.

No idea - not my action

I'm sure it's @brianteeman noted

it's offtopic because this pr is to get the current template into a darkmode, you want to redesign the template please create your own pull request and stop hijacking this one. thanks

it's offtopic because this pr is to get the current template into a darkmode, you want to redesign the template please create your own pull request and stop hijacking this one. thanks

This is not an interception, but a proposal for discussion and voting. I fall silent.

This is not an interception, but a proposal for discussion and voting. I fall silent.

It's time for us to move away from the square style to the flat style, too.

maybe you should ready your own comments you write and think about it. You suggest to go from square style to flat style which is a completely different look and feel so it has nothing to do with this PR which only tries to bring atum to dark mode.

So create a new issue/discussion.

Excuse me. I realized that adding border is a redesign change.
You are right that this is a separate topic.
I took screenshots, without adding borders, without changing anything, I just change the background-color style, link color, and changed the border color.

I hope the participants will like this color scheme.

@MacJoom What do you think about this color scheme?

@MacJoom What do you think about this color scheme?

You are a bit late to the party. I will not discuss color schemes at this moment. I started from the color scheme by elisa (see at beginning of this PR) and will stick to it.

@MacJoom I liked her scheme Elisa. Very much so.
#42010 (comment)
I liked her scheme. Very much so. But now it's different.
This scheme @coolcat-creations

It's work in progress and we needed to increase color contrast for a11y

It's work in progress and we needed to increase color contrast for a11y

I agree that it is necessary to increase the contrast.
But I came here 1 day ago and decided to watch a modified version of the dark theme. Since the original one was raw.
And I will say that I am ashamed even to show this version to the client. shamefully.
I didn't even find a switch in the template to disable.
@MacJoom It's not about who prefers what colors. it's not that a reddish shade is better than blue. And the problem is generally to the in the brightness and contrast.
I'm trying not to impose an alternative range here, I'm trying to fix the situation that I'm ashamed to show it to the client.



I, on my alternative color schemes, actually made even more contrast. That is, I am in favor of making the contrast even more. I am for the curbs not to draw attention to themselves from the content.
One of many questions. I don't understand why the table should be made with a different background than the background of the admin panel? We know without this that the table has characteristic horizontal frames, we have already highlighted the information that this is a table with these frames, and of course everyone has already figured out that this is a table, there is no need to highlight it even more so that it interferes with the purity of the design.

Please compare, where is the greater contrast?

OR

Its as said work in progress and you are right, somewhere the background went lost...

Edit: Actually the upper screen has issues in contrasts. I see I can optimize a bit on the lower screen but the upper one is worse

@coolcat-creations I agree that my screenshots are far from ideal.
In the upper screenshot, I made the background color of the card darker than the background of the panel. I could do it the other way around, which from my point of view is the same, the main thing is that the color of the card and the background color are much much darker. And the color of the link is blue, I also suggested making it a little lighter.
Also, as I showed earlier, the configuration section needs to be finalized, the system section also needs to be finalized.
My main message is that the frames of tables, lists and panels should not compete in brightness with the text, but should be much darker. You did this in the screenshot with the list of articles.

@korenevskiy @brianteeman thank you for your feedbacks I included fixes in a PR to this PR :-)

@korenevskiy @brianteeman thank you for your feedbacks I included fixes in a PR to this PR :-)

Is it possible to test changes here? But I don't see a link to the build after the tests. Where can I see the changes?

Yes we will merge my changes in the next days into this PR. Since we missed the deadline for 5.0.1 I will do now massive cleanup on the variables as well.

@MacJoom maybe you can merge my PR tomorrow afternoon I will look into the pagination issue you reported to me

I suggest not to highlight the FIeldSet with a special background. This creates an excessive load on the brain when we see a deep nesting of panels. The FieldSet tag is just a grouping of fields. We always know that the Fieldset has a name and the content has fields. The grouping is purely symbolic. This is not the same as the module cards have their own separate background. In the admin panel, I constantly see slabs of backgrounds overlapping each other deeply. Somewhere at the bottom, you no longer understand whether it is the Fieldset that has ended or whether it is the module card that has ended separately. Visually it is impossible to distinguish. It's hard to understand this is the end of a module or Fieldset. Ultimately, this is even the accessibility side. Let's make the Fieldset just a frame with a transparent background. This is not a template change.

Even here on Github, every message has the same background as everything else. But at the same time it looks similar to Fieldset

Sorry but that's already done in the current PR that is not merged yet, please wait 2 days for new comments ;-) so we can use your valued feedback for open tasks :-)

Would love to test but unfortunately its not possible for me to do that due to #42356

You still can test...

Wow.
Honestly now I'm not ashamed to show the client. That's cool. I am ready to work with this in the future in this version.
I looked at the design of the articles, the system page, the configuration page, the main page.
I liked the design of drop-down controls, buttons, and fields.
I repeat, it looks great with this one and I will be happy to show it to the client.
I would suggest small amendments.

• On the main page, large buttons have the same background as the background of the entire page background-color: #151B22;. I would suggest making the page background 2 times darker. And the color of the buttons is a little lighter background-color: #202935;.
• The border color in the lists should be made darker, such as frames in the configuration.
  border-color: #343a40;
  But in general, everything is cool.
  I suggest comparing these screenshots.
  My suggestion:
  

Just published PR:

I highlighted the color of the big buttons brightly. And the color of the background panels is less bright, since the size of the buttons is more important information than the size of the panels in the background. But in general, I like everything.

I thank you for the work done. Thank @coolcat-creations very much.

And also compare my corrections of the background and border of the list with the existing PR.
My suggestion:

Just published PR:

I thank you for the work done. Thank @coolcat-creations very much.

Thank you @korenevskiy. The main work was done by @MacJoom, I only made adjustments — thankfully someone helped me to get the local environment running. I think even if we missed the deadline for 5.0.1 this is a good base for 5.0.2

I will look into your suggestions and look forward to other feedback also especially regarding a11y.

There is still a lot of cleaning work to do, but I wonder if that's not even something for another PR.

@korenevskiy I just made a PR with the changes.
Mind that I use rgba Values for the borders and Quickicon backgrounds. That's because maybe one day we can add a slight hue to the dark mode. Who knows. But then the borders and Quickicons are just a slightly bright overlay over the main color and do not interfere with the main color.
Thank you for your testing!

Thank you so much @MacJoom . It can be seen that a good job has been done in the template.
I agree that it is necessary to check for a11y. If there are any comments here. I think it may concern the color of the borders. But but the background is still darker.

But but the background is still darker.

I took your color suggestion, or do you mean the "quickicons" ? I played with the rgba value and changed it from .06 to .1 I think that good enough?

But but the background is still darker.

I took your color suggestion, or do you mean the "quickicons" ? I played with the rgba value and changed it from .06 to .1 I think that good enough?

Glamorous. We can show it at the fashion parade.
Now the frames don't draw attention. And the text is always in view.
I like everything. SUPER SUPER SUPER

Haha thank you. If you find something feel free to report :-)

Now it seems to me that the dark mode is even better than the light one
?

Haha thank you. If you find something feel free to report :-)

I will need a longer time. Maybe a couple of days. I'll try to see everything.

I didn't want to say but i think it will be my prefered one ? thank you for your nice feedback!

I didn't want to say but i think it will be my prefered one ? thank you for your nice feedback!

In the screenshot of the main screen, I suggested making the big buttons a little brighter. But I used a slightly cold color there. What do you think about the color of the big buttons with a cold shade?

I didn't want to say but i think it will be my prefered one ? thank you for your nice feedback!

In the screenshot of the main screen, I suggested making the big buttons a little brighter. But I used a slightly cold color there. What do you think about the color of the big buttons with a cold shade?

I like yours more - but as said, the dream would be to have a hue setting one day so I only use "white" as an overlay so I would prefer not adding any coldness otherwise it will be lot of work to make it work for each preferred hue

I like yours more - but as said, the dream would be to have a hue setting one day so I only use "white" as an overlay so I would prefer not adding any coldness otherwise it will be lot of work to make it work for each preferred hue

ok. Suppose. Let's think about it. Let's assume that the template has a basic color selection setting for the template. For example, bright red. Of course it's not the template that turns bright red. And the essence should be such that this black color acquires a light barely noticeable temperature of red. Is this taken into account?

contrast issue

confirmed fixed 19/112023 22:16UTC

Either the white top and bottom border is an error or the missing white border left and right

I like yours more - but as said, the dream would be to have a hue setting one day so I only use "white" as an overlay so I would prefer not adding any coldness otherwise it will be lot of work to make it work for each preferred hue

ok. Suppose. Let's think about it. Let's assume that the template has a basic color selection setting for the template. For example, bright red. Of course it's not the template that turns bright red. And the essence should be such that this black color acquires a light barely noticeable temperature of red. Is this taken into account?

yes :-)

confirmed fixed 19/112023 22:16UTC
No definition between messages

Either the white top and bottom border is an error or the missing white border left and right

thank you, will fix it

No dark mode for debug

contrast issue

Can you specify the constrast issue because my checker says its ok?

confirmed fixed 19/112023 22:16UTC

Contrast issue

Contrast issue

confirmed fixed 19/112023 22:16UTC
Contrast

confirmed fixed 19/112023 22:16UTC
White border

yes :-)

I'll try to reflect. Do I need a color theme at all. The color theme can be useful for colorblind people or partial colorblind people. Can a color scheme be useful for healthy people? It may be useful for healthy people, but we know that the links are always blue, and the danger is always red, the save button is always green. 10-5 years ago, monotone colors were used in android and Windows 8(10), and the user could give them color. Now people use the whole palette of colors so as not to highlight a single color. The idea is good, but I'm not sure that the color scheme will be a weighty argument to change the template. Unless we need to redo everything to support SUBGRID in 10 years. But it will be another new template, possibly with the same name.
Let's specify a color shade in the variable, and through the VAR property we will specify the default value with a cold shade.

Thus, we will support your idea of supporting color schemes and thereby we will be able to make a cold shade of color, I hope you really liked it.

There's a problem with the orange signs. By themselves, this is a bright, light color. Only the white color will be visible on it. Either we change the plate to a slightly dark color, or add a shadow to the text, or make the color of the links dark blue.

This green on the acrtive open folder appears to be something completely new

There's a problem with the orange signs. By themselves, this is a bright, light color. Only the white color will be visible on it. Either we change the plate to a slightly dark color, or add a shadow to the text, or make the color of the links dark blue.

can you post a screenshot?

This green on the acrtive open folder appears to be something completely new

yes, it is new. Any issues with it? It helps to find the open folder and its the same color from dragging content in the content row. So yes this color is used not only here.

grrrh this is so frustrating. Was scrolling back to reference a previous comment and saw that most of the issues I just reported I had reported weeks ago. Sure its frustraing as well for @MacJoom and @coolcat-creations to keep track of everything in a single pr

yes, it is new. Any issues with it?

Yes this PR should only be about dark mode for the existing template

No definition between messages

thank you fixed in the next push

Can you specify the constrast issue because my checker says its ok?

This option, I have not screwed up anything better, in the settings, the background is light. I also suggest making links in the text with underscores.

color: #9d9aff;
  text-decoration: underline;

Can you specify the constrast issue because my checker says its ok?

This option, I have not screwed up anything better, in the settings, the background is light. I also suggest making links in the text with underscores.

color: #9d9aff;
  text-decoration: underline;

as stated above the contrast was good. What is your issue about the contrast. Can you please check my screenshot?

Contrast issue

Fixed in the next push

confirmed fixed 19/112023 22:16UTC

as stated above the contrast was good. What is your issue about the contrast. Can you please check my screenshot?

I did not get the same colors as you tested

Make background black.

Make checkbox light blue to match.

White border

Thank you, fixed in the next push

as stated above the contrast was good. What is your issue about the contrast. Can you please check my screenshot?

I did not get the same colors as you tested

Ok, but if you set your own color I can't do anything about the accessibility of it?

confirmed fixed 19/112023 22:16UTC

In both dark and light mode this PR changes the way that form field validation is displayed.

Before this PR the input border color would change to green etc

With this PR the border color does not change but the text color does.

Same comment as before. This pr should just be about dark mode changes to the current template

Contrast

thank you, fixed in the next push

I have not set a custom color. The color i showed is the default

can you post a screenshot?

OK. But which section of the site is this with an orange sign?

In both dark and light mode this PR changes the way that form field validation is displayed.

Before this PR the input border color would change to green etc

With this PR the border color does not change but the text color does.

thank you, fixed in the next push

I have not set a custom color. The color i showed is the default

joomla-cms/administrator/templates/atum/templateDetails.xml

Line 94 in 5a9e4f8

default="#7fa5d4"

good, then I change it in the default... thanks - Probably when saving that value it will be used.
Fixed in the next push

I've made the background darker here and the link color is slightly purple. It seems to have become better. What do you think

I checked your screenshot. This half-year introduced a new color scheme for CSS, where styles are written taking into account the sensitivity of the human eye. And this site where you compare colors, it compares them simply in units of gradations. For this site, bright yellow and bright blue will turn out to have poor contrast.

I've made the background darker here and the link color is slightly purple. It seems to have become better. What do you think @brianteeman
here it is necessary to compare based on your perception. I really see that it merges and the contrast is bad

Can we change the color of the link depending on the color alert ?

Make background black.

Thank you for reporting this. It looks way different for me on a mac. I hope someone with a PC can help?

Make checkbox light blue to match.
need help with this as well. Its some inline svg defined in the form_check.scss of bootstrap. Custom color is also not supported yet in the light theme?

Can we change the color of the link depending on the color alert ?

I already changed it to white but underlined.

I already changed it to white but underlined.

NO, white is not allowed. It should be accented with a different color. Even if not blue, but accented with a different color.

I already changed it to white but underlined.

NO, white is not allowed. It should be accented with a different color. Even if not blue, but accented with a different color.

Can you post a link where this rule is written down?

Can you post a link where this rule is written down?

No, I can't. I'm sure it's there somewhere. But I think it is very important to separate the text from the link by color. This is similar to the fact that links are always dark blue in black text. And our links are always light blue in white text. It is very important that the eye sees the link in a different color. But we have a difficult case, we can say hopeless. The blue links are not readable, and the white links are not separated by sight. Therefore, it is necessary to use links of a different color on colored alerts.
Also it's just a topic of accessibility

@chmst can you give advise? I would leave the links white and underlined. Do we need a special color for all alerts for links?

I suggest turning off the buttons like this

I suggest turning off the buttons like this

looks nice, thanks

can you give advise? I would leave the links white and underlined. Do we need a special color for all alerts for links?

What is this page, I'll show you what it would look like with a colored link?

http://joom5/administrator/index.php?option=com_admin&view=help

I found a hidden page section with a light design. Have you ever been on it? I've never been!

@korenevskiy I asked the a11y team if its really neccessary to do colors... I would prefer to stay clean if its possible from a11y perspective and not introducing more colors.

http://joom5/administrator/index.php?option=com_admin&view=help

I found a hidden page section with a light design. Have you ever been on it? I've never been!

The help Screen is an external site so unfortunately not in scope of this PR

Debug will also not be in scope of this PR It can be done separately.

I asked the a11y team if its really neccessary to do colors... I would prefer to stay clean if its possible from a11y perspective and not introducing more colors.

Let's show the a11y team colored links. Two identical pages with different link colors, white and colored.
This will complicate the design, but it's a really useful topic, after all we have to compare 2 pages.

I offer links of different colors only for message alert. In principle, there are a little more than 5 (10) pieces.

there is no accessibility requirements for links regarding colours

there is no accessibility requirements for links regarding colours

I have an answer why this is so. Since Accessibility originated 10 years ago, and dark themes began to be introduced 5 years ago. Why do you think there are no requirements there?
And what is our task? to meet imperfect requirements, or to be truly accessible?

Thanks @coolcat-creations for asking here #42010 (comment). I will dive deeper in the coming days - so here only a short remark.
For accessibility links (and all other text) must have good contrast and it must be possible to recognize links. Underlining is perfect. For accessibility we do not need different colors.

And Joomla is generally introduced only at the end of 2023

Guys, I wrote that dark style is a later topic than accessibility. Will we have to redo everything in 5 years from now?

Until Apple and Microsoft do it in their design, we will never do it?

@korenevskiy sorry, I don't understand.
If it is about Accessibility we are following the standard: https://www.w3.org/TR/WCAG21/

Colours for links are not necessary or desired for accessibility, this is a question of design and user experience.
Maybe we should first have a stable version of dark mode and then improve?

@korenevskiy sorry, I don't understand. If it is about Accessibility we are following the standard: https://www.w3.org/TR/WCAG21/

Colours for links are not necessary or desired for accessibility, this is a question of design and user experience.

You are right, but these rules have been written and will be added more than once. That's why I said about Microsoft and Apple, i.e. it was necessary to mention W3C at the same time. I.e. until W3C writes it, we will never do it? But after all, this question has not yet been raised there with this edge. And the answer is obvious, the text should be read and stand out relative to the main text.

After all, we do it for people. We all know that being guided only by standards and not doing more than others, we will always be catching up in technology. Our task is to get Joomla ahead. Well, what other arguments should I give about the importance of color links in the messages of the alert?

Thank you for reporting this. It looks way different for me on a mac. I hope someone with a PC can help?

Sorry to sidetrack. Can you confirm this issue #42358 as I don’t have access to a Mac at the moment?

Let's compare 2 screenshots with different colors, white and colored

@korenevskiy I appreciate your helpful comments, and you see I already introduced a lot of your remarks into the PR. I would kindly ask you not to flood this PR with a discussion about a doctrinal question.

Thank you for reporting this. It looks way different for me on a mac. I hope someone with a PC can help?

Sorry to sidetrack. Can you confirm this issue #42358 as I don’t have access to a Mac at the moment?

In this PR its fine:

In this PR its fine:

I am assume it is fine in the current release version.

I won't impose anymore, just for the last time.

Let's compare 2 screenshots.

VS ====================================

It looks messy sorry - lets go for the white one

It looks messy sorry - lets go for the white one

You're right, it looks Sloppy. I used different color links for the accent. It may be required to use the same one, and generally experiment with it. I did not offer the final option. There are only 8 types of alert in Bootstrap, We may need to make references to not 8 accent colors, but only 2 colors, one color for warm alert, another for cold ones.

Maybe this is a much more difficult task, but there is a solution than it seems at first glance, and it does not mean that I alone should solve it. Maybe we all need to think about it here. Of course I am a healthy person and I should not care, I can see well enough. But my professional duty to the community calls on everyone to think about what color the link for what color of the message can be made.
To make it look cool

This is still a major problem #42010 (comment)

Language Overrides
#41860

Language Overrides #41860

This is still a major problem #42010 (comment)

It's an iframe and the contents inherit the parent, not sure how to solve this?

@brianteeman strangely on localhost I dont have this issue...

Do you have any other patches applied? Because my editor is not black as well... I did not do anything with tinymce

It's an iframe and the contents inherit the parent, not sure how to solve this?

https://fvsch.com/transparent-iframes

@brianteeman why is your editor dark? maybe the issue comes from there?

@brianteeman why is your editor dark? maybe the issue comes from there?

That's from the merged pr #42322 - its not related

@brianteeman why is your editor dark? maybe the issue comes from there?

That's from the merged pr #42322 - its not related

as you see in my screenshot I don't have this issue so it must come from somewhere else?

@brianteeman why is your editor dark? maybe the issue comes from there?

That's from the merged pr #42322 - its not related

as you see in my screenshot I don't have this issue so it must come from somewhere else?

found it.
Native windows dark mode - no problem
Chrome force dark mode - problem

Same as with the differences you observed with the text editor

Guessing you can ignore this then

@brianteeman good, thank you!

Actually its a bit more subtle difference than I thought

These two settings are not the same. The problem occurs with the emulate dark mode - not the "emulate prefers-color-scheme: dark"

Problem with joomla-alert warning css

Light

Dark

Problem with Joomla alert corner radius

Light mode

Dark mode

thank you @brianteeman will check the border radius.

Problem with div class="alert alert-*

Light Mode

1. Warning - contrast fail
2. Info - margin
3. danger - border color

Dark Mode

1. Info - margin
2. danger - border color

So the alert styles are completely messed up. Good catch, I will check it, thanks!

The search button should probably be blue

Make background black.

Can you tell me the browser you are on? Because I have the system styles and cant reproduce on a mac @Quy

Can you tell me the browser you are on? Because I have the system styles and cant reproduce on a mac @Quy

Windows 11 using Firefox

Joomla alert - Nearly there now. Small tweak to the border(?) required

This is

Joomla alert - Nearly there now. Small tweak to the border(?) required

Its a problem because I am not allowed to change the frontend and in frontend its wrong with a wrong contrast I would need to add unneeded variables ... Not sure how to solve this without touching frontend

Alerts - light mode 1 of 4 has a border

alerts light and dark mode have an extra margin on the info alert

I think its just a wrong value in a variable

change
--state-warning-border: var(--warning);

==>
--state-warning-border: var(--warninghvr);

White borders

Fixed the issue by disabling the background color.

Info button border only visible on hover (left button in image) as the border color is the same as the normal background

Success button border ALWAYS visible as the border color is not the same as the normal backgroumd

The search button should probably be blue

It is not a button so it will be misleading to change its color.

Different background color?

The search button should probably be blue

It is not a button so it will be misleading to change its color.

what is it if its not a button??

The search button should probably be blue

It is not a button so it will be misleading to change its color.

what is it if its not a button??

It is more of an icon label that it is a search field. You don't click it to perform a search.

wow - never noticed that - always thought it was a button like all the rest

wow - never noticed that - always thought it was a button like all the rest

Me too. Too many times to count where I would type in the field and proceed to click the "button" not realizing it does an auto-search on keystrokes.

Mobile view. Needs to have a dark mode for the tabs when they are vertical

Mobile burger. There is a burger icon always present in the background

About the "searchbutton":
Since we are not allowed to change the light mode I see this as a seperate PR because we would need to change the UI both at once and Not Button in Light Mode and No Button in dark Mode.

Alerts - light mode 1 of 4 has a border

Is it different to the current state of light mode?

Alerts - light mode 1 of 4 has a border

Is it different to the current state of light mode?

yes - all 4 have borders in light mode without this pr

The concern is that the border of the black input fields is not a11y, in short, if you look with one eye from afar, it is not visible. Let's increase the contrast of the border for the black fields.
Here is an example. This is the minimum brightness, which, as it seems to me, does not hurt the eyes. But in this case, the fields should also be clearly visible, unlike the border of the frames, the meaning of which is symbolic. The color of the borders of the fields is very important for black fields.
Either this color, or a little brighter.
Colleagues, what do you think?

border-color: #ffffff47; or border-color: #fff5;

By the way, I have already written and suggested making inactive buttons not gray, but black translucent. they didn't take into account the fix here.
Also make the CLEAR button similarly dark translucent.

I suggest turning off the buttons like this

looks nice, thanks

Example:

background-color: black;
  opacity: 0.3;

or

background-color: black;
  opacity: 0.25;

I saw the additional comments, i will need to make free time to work on it.

Colleagues, I can't download the DEV build here. The status is shown in yellow. That's why I can't watch it.
After scrolling through the above, I saw a screenshot.

You can see that the checkboxes are barely visible. This needs to be fixed so that a11y is accessable.
Just as in the case of text fields, I suggest making the checkbox frames the same color as the text field frames.
border-color: #ffffff47; or border-color: #fff5;

I have successfully tested this PR.

I think there should be a black background.

I saw the much advertised ver. 2.0 of the dark mode... I hope there's a switch for light mode?

Yes there is a switch in 5.1

Yes there is a switch in 5.1

.... but it is perfectly hidden: You have to go to Templates: Stile (Administrator), open Atum, and Save again (you need not change anything). After that, the switch appears in the User Menu.

This is a bug, which will most probably be corrected in J5.1.1. Then the switch will be in the User Menu per default.

I am not aware its a bug. I thought its because of b/c

I has been resolved with #43310 for 5.1.1

OK so waiting for 5.1.1 ; ) Thank you, Team!

no need to wait!! Just follow the instructions #42010 (comment)