[FEATURE] Browser reads the meta tag color-scheme and makes controls revert to light or dark

[burdittw]

When implementing v4 in to my project I add the simple-datatables to my project and with the meta tag color-scheme set to "light dark" I was getting input fields set to a dark background. Investigating as to why this was happening, I figured out that this is now how browsers are implementing their light and dark views. My browser was set to use my settings from Windows which is dark mode. Here is the article for MS Edge browser that covers this:

https://blogs.windows.com/msedgedev/2021/06/16/dark-mode-html-form-controls/

It states that any styles add by the developer or user will override the agent style. This means if we want a light and dark mode in AdminLTE v4 then we need to make sure the controls have a style set to the color they should be regardless of if it needs it or not. By doing this then we know for sure that the background colors will be what they should be in the theme you choose. I have not checked other browsers to verify this on them, but it does happen on MS Edge and is documented as the way it should work.

[lenamtl]

Hi,

This is interresting, honestly I never tested it because I always use the light mode. Allowing both sheme would required a lot of more test and also require image replacement like logo etc. You may also need to use Javascript to detect the change.

I'm using Opera and this has dark / light / system

I have tested this code to detect and this is working detecting my system as light.

window.matchMedia('(prefers-color-scheme: dark)')
    
	.addEventListener('change', event => {
	  if (event.matches) {
		//dark mode
		console.log("dark");
	  } else {
		//light mode
		console.log("light");
	  }
	})

[burdittw]

Digging more into the dashboard code as I try to get it to work right in my app I have found the following. If you remove the following line, the colors work as they should.

<meta name="color-scheme" content="light dark">

If I remove this meta tag, then the colors go back to what they should be. This meta tag is what the browsers use to determine what mode to use on their own. By assigning the values in the meta tag it is telling the browser how to render the page. I am guessing here but since the last variable is dark, I think this is causing the dark backgrounds on scroll bars, input controls, and such.

[burdittw]

@danny007in

This tag is still in the header <meta name="color-scheme" content="light dark"> and causing some issues.

With this tag in the header we get the scroll bar looking like this:

And this is with the header tag removed:

This also makes the browser scroll bar do the same thing. Seems to affect all scroll bars in the site.

[danny007in]

fixed in https://github.com/ColorlibHQ/AdminLTE/commit/b83766b46192abc55328fe0808de729afb6554a5

[burdittw]

@danny007in

Now you have the opposite happening with the scrollbars. If you flip it to dark mode the scroll bars are all light instead of dark. On a positive note, light is now working. Not sure where what code it is this time as I just ran some tests to see if it was resolved or not before going offline.

[burdittw]

@danny007in

This is still broken. To reproduce change the theme to dark mode and look at any scroll bars. The browser scroll bar and any inside the template like the chat widget will have scroll bars using the light color theme instead of using the dark theme.

[danny007in]

@danny007in

This is still broken. To reproduce change the theme to dark mode and look at any scroll bars. The browser scroll bar and any inside the template like the chat widget will have scroll bars using the light color theme instead of using the dark theme.

now this particular issue is related to bootstrap v5 please raise this issue in https://github.com/twbs/bootstrap