[#42221] - [5.x] Template color scheme configuration
- Fixed in Code Base
- 11 Mar 2024
- Medium
- Build: 5.0-dev
- # 42221
- Diff
- Fedik:dark-switch
- Pending continuous-integration/drone/pr Build is pending Details
User tests: Successful: Unsuccessful:
Pull Request for Issue #42134 .
Summary of Changes
Add a Color scheme switch to Atum template.
The PR allow to choose prefered color scheme based on OS setting, or fixed.
Instead of using media query (which is not possible to override) it uses data attribute (data-bs-theme for bootstrap).
Very similar to what @dgrammatiko tried in #42209 .
New API
The following data attributes should be used within template:
data-color-scheme-os When template should follow OS setting
data-color-scheme="light" Use Light scheme
data-color-scheme="dark" Use Dark scheme
The combination data-color-scheme-os data-color-scheme="dark" means that the template will follow OS setting, but initialy will be used dark color scheme.
Addittionaly the PR introduce a new JavaScript event joomla:color-scheme-change which dispatched when color scheme changes.
All of this will allow to extensions easily follow to actual template state.
And in theory, should simplify Editor fixes for specified color scheme.
SCSS fixes needed
Following SCSS code does not work:
// Inherit parent with &
.foo{
@if $enable-dark-mode {
@include color-mode(dark) {
&.bar {
background-color: var(--template-bg-dark-90);
}
}
}
}
// Child element
.foo{
@if $enable-dark-mode {
@include color-mode(dark) {
.bar {
background-color: var(--template-bg-dark-90);
}
}
}
}All such instance should use:
// For fisrt example
@if $enable-dark-mode {
@include color-mode(dark) {
.foo.bar {
background-color: var(--template-bg-dark-90);
}
}
}
// For second example
@if $enable-dark-mode {
@include color-mode(dark) {
.foo .bar {
background-color: var(--template-bg-dark-90);
}
}
}(Or maybe someoen know better fixes?)
After the PR will be merged someone should look on it. Or can send PR against my PR.
Testing Instructions
Apply patch run npm install.
Check the template Atum parameters Dark mode.
When its set to Follow OS settings then template color scheme should changes when OS color scheme changes.
When its set to Use Light theme or Use Dark theme then template color scheme should stay Light or Dark, always.
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: joomla/Manual#238
- No documentation changes for manual.joomla.org needed
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | Administration Language & Strings Templates (admin) JavaScript Repository NPM Change |
| Labels |
Added:
Feature
Language Change
NPM Resource Changed
PR-5.0-dev
Dark Mode
|
||
Do you see also an option to add the user parameters as an extra layer
I thought about it, but I would make it in separated PR.
We need a feature that will allow to define "User specific" params in templateDetails.xml. This way it will be more flexible, than hardcoding something in to User profile form.
I think some years ago there already was a discussion about it.
can't we do this in a generic way? maybe with a module and joomla w-c and event trigger and not only for atum?
also you call it color scheme switcher, which leads to the expectation that you can more then on/off dark mode (which by the way would make sense, allowing more then just darkmode on/off) if this things is also useable for the frontend and by 3rd party
Why not do it the bootstrap way as this is for a bootstrap template?
Specifically I am redferring to the javascript so that this can be easily toggled. Currently if i understand this correctly then its a template style setting which will mean its about 5 clicks just to toggle.
https://getbootstrap.com/docs/5.3/customize/color-modes/#javascript
can't we do this in a generic way? maybe with a module and joomla w-c and event trigger and not only for atum?
You mean for User specific? Yeah, that can work also, it will be "local setting" and in each browser user should do it again. Also will need to add a Swicth somewhere in to UI.
If you mean in general, it already is as generic as possible.
you call it color scheme switcher,
Because in Browser API it called (prefers-color-scheme: dark) ?
Currently if i understand this correctly then its a template style setting which will mean its about 5 clicks just to toggle.
Let's be honest, how often do you need it? I will set it once and will forget it exists.
| Title |
|
||||||
Currently if i understand this correctly then its a template style setting which will mean its about 5 clicks just to toggle.
Let's be honest, how often do you need it? I will set it once and will forget it exists.
Perhaps but perhaps not
Why not do it the bootstrap way as this is for a bootstrap template?
Suppose it boils down to whether Joomla wants to simply toggle between OS, light and dark, or whether they want to offer a spectrum of themes.
I'd even go as far as saying a switcher (toggle) doesn't warrant saving the preference in the database, but instead just via local storage, seeing as it's a quick and easy action.
I agree with you about using local storage. That is the most logical place to store an environmental setting as opposed to a site setting
With Firefox dark mode OFF and Dark Mode set to use Dark Theme the Toolbar button text has too little contrast. Otherwise OK.
With Firefox dark mode ON and Follow OS Settings selected the tab panels are stacked vertically and the Dark Mode list with Follow OS Settings or Use Light Theme selected has too little contrast - white on grey.
So: more work needed?
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/42221.
I don't want to offend anyone, but why should the choice of color scheme be in the template settings?
This is fundamentally the wrong approach. Same as taking your browser settings to select a theme.
Does the site only have one administrator? No, there may be a lot of them. And some people use the dark theme, and some don't.
Moreover, one person may have different color schemes on different devices.
For example, when working at a computer in good lighting, I do not use dark themes. But in phone I use dark scheme, it’s very difficult for me to look at light scheme on phone.
Therefore, if you make different color schemes, then changing the scheme should be available on each page so that a person can change it at any time.
Otherwise, it is not much different from what it is now.
And once again I apologize if my words or tone offended anyone.
I just had time to look at Joomla 5 and I was simply shocked by the dark theme and the fact that I can only change it in the browser settings.
I also want a color scheme switch on the admin toolbar
In the future, some day there will be settings in the browser to fast switch the site mode. But such times have not come yet and it will not be soon. Need a switch of 3 modes on the panel: Auto, Light, Dark. Or store the template settings mode. Or store it in the browser storage using JS.
I use the dark mode in the OS. But MS Word is difficult to use in dark mode, the colored text is not visible or almost invisible. How often do you switch MS Word to white mode to work with a document? It's the same here. It should be understood that the dark mode for viewing the site and the dark mode for editing the site are not the same thing at all. Often you need to switch just on the go. Moreover, we have to test the text in both modes so that the text is not intentionally colored by accident. A hot switch is NECESSARY.
I suggest making 2 settings, one in the template settings, the second on the panel in the profile drop-down menu or just on the panel near the Joomla verstion. The first setting sets the default mode. The button on the panel will override the default mode and store the status in the browser storage.
ISPmanager has a light mode change button on the status bar. ISPmanager stores this setting in the browser storage via JS.
| Category | Administration Language & Strings Templates (admin) JavaScript Repository NPM Change | ⇒ | Administration com_users Language & Strings Modules Templates (admin) JavaScript Repository NPM Change Front End |
| Category | Administration Language & Strings Templates (admin) JavaScript Repository NPM Change com_users Modules Front End | ⇒ | Administration Language & Strings Templates (admin) JavaScript Repository NPM Change |
| Labels |
Added:
PR-5.1-dev
Removed: PR-5.0-dev |
||
| Category | Administration Language & Strings Templates (admin) JavaScript Repository NPM Change | ⇒ | Administration com_users Language & Strings Modules Templates (admin) Repository NPM Change JavaScript Front End SQL Installation Postgresql |
I have tested this item ✅ successfully on 9209543
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/42221.
Razzo1987
- | Labels |
Added:
PBF
|
||
By installing the PR from scratch the administrative homa does not have the cottect style, the titles of all boxes are to be reduced.
While the other pages , such as articles and system, work
| Status | Pending | ⇒ | Fixed in Code Base |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2024-03-11 09:05:08 |
| Closed_By | ⇒ | LadySolveig |
What a very nice improvement for the dark mode - thanks @fedir for your work ? ? and also for the support, collaboration and for testing to @bembelimen @fgsw @brianteeman
Yes, it probably because of an issue in scss, I wrote in the fitrst comment.
Need to check that for fancy-select style.
When installing, it is in light mode. After installing and redirecting to login page, then it is in dark mode. Expected behavior?
After installing and redirecting to login page, then it is in dark mode.
Does your OS use Dark Mode? if yes, then it is expected I guess.
Yes.
Hey @Fedik , looks good. Do you see also an option to add the user parameters as an extra layer, so a user can define their preferences?