[4.1] [Feature Request] Switch dark light template (Alternative color)

[Stuartemk]

Is your feature request related to a problem? Please describe.

Taking advantage of the fact that the template has the possibility of an alternative color, a switch is necessary to be able to change the color.

So with a few css changes it can be used as a dark light template

I previously stow using CG template switcher, which is in joomla extensions directory, but since Joomla changed css directory to /media it doesn't work anymore.

Describe the solution you'd like

Additional context

Thanks

[brianteeman]

cg template switcher also requires jquery which is a lot to load for just this feature.

Take a look at https://github.com/nikosdion/DarkMagic

[Stuartemk]

Thanks for answering. Unfortunately DarkMagik does not have the option for the user to be the one to choose the light or dark mode of the template. El mar, 22 de mar. de 2022 16:44, Brian Teeman ***@***.***> escribió:

…

cg template switcher also requires jquery which is a lot to load for just this feature. Take a look at https://github.com/nikosdion/DarkMagic — Reply to this email directly, view it on GitHub <#37353 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AM632UNSVSWHTZSLIC2G4NLVBJENTANCNFSM5RMGRH4Q> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[dgrammatiko]

DarkMagick is the wrong solution but unfortunately the correct solution is not yet available because Bootstrap is not yet utilising extensively CSS Custom Properties. There are many Pull Requests on their repo to make the transition but until there's a release that everything is baked with CSS Variables. 5.2.0 seems it will be covering most of them. Also fwiw I have a version with all these PRs merged: https://github.com/dgrammatiko/bootstrap/tree/5.2-own, with this you can switch between light and dark in the browser (as it supposed to work)

[brianteeman]

There is another option where you can add a button for the user to switch between two styles. I have done that on a test site of mine

[dgrammatiko]

There is another option where you can add a button for the user to switch between two styles

Sure, but that needs a reload of the page applying the other style. The template theme dark/light should be dependant on the client state (either from the OS settings or a user setting) and shouldn't need a reload. There are many buttons for this (but as I said it requires BS 5.2 with extensive support for CSS Vars), eg:

• https://github.com/GoogleChromeLabs/dark-mode-toggle/blob/master/src/dark-mode-toggle.mjs
• https://github.com/dgrammatiko/dark-switch

Anyways, my comment was just to state that dark/light will be possible natively with BS 5.2: twbs/bootstrap#35857
And the preview https://deploy-preview-35857--twbs-bootstrap.netlify.app

[Stuartemk]

OKAY. I'll make this much easier.

By default Cassiopeia loads the file /media/templates/site/cassiopeia/css/global/colors_standard.min.css

When Color Theme is chosen in the template there are two options Standard and Alternative

If Alternative is chosen, Cassiopeia loads the file /media/templates/site/cassiopeia/css/global/colors_alternative.min.css

The solution is to add a third option Custom

Falling Color Theme
1.-Standard
2.- Alternative
3.-Custom

Choosing Custom Cassiopeia would load the file /media/templates/site/cassiopeia/css/global/colors_custom.min.css

This last file (custom.css) you can add all the vars you need, right there you can load the 2 options at the same time for example:

:root.is-dark {
--color-primary: #17ed90;
--color-secondary: #2a2c2d;
--color-accent: #12cdea;
--font-color: #ffffff;
}

@media (prefers-color-scheme: dark)
:root:not(.is-light) {
--color-primary: #0060df;
--color-secondary: #fbfbfe;
--color-accent: #fd6f53;
--font-color: #000000;
}

Thus, only one module would be needed in the frontend for the guest user to choose dark or light.

Just like @dgrammatiko at https://codepen.io/dgrammatiko/pen/bGNXVQQ?editors=1010

Something very important would be the use of cookies so that when you refresh the page or change the article, the color choice that the user chose REMAINS.

Better yet, if that choice were associated with the logged in user, like his preference, that way regardless of the device from which he connects, he would respect the user's choice.

Last but not least, this opens the possibility of creating multiple theme choices, something more advanced would be for example:

:root.is-dark {
--color-primary: #17ed90;
--color-secondary: #2a2c2d;
--color-accent: #12cdea;
--font-color: #ffffff;
}

@media (prefers-color-scheme: dark)
:root:not(.is-light) {
--color-primary: #0060df;
--color-secondary: #fbfbfe;
--color-accent: #fd6f53;
--font-color: #000000;
}

:root.is-pink {
--color-primary: #xxxxxx;
--color-secondary: #xxxxxx;
--color-accent: #xxxxxx;
--font-color: #xxxxxx;
}

:root.is-purple {
--color-primary: #xxxxxx;
--color-secondary: #xxxxxx;
--color-accent: #xxxxxx;
--font-color: #xxxxxx;
}

In the end, the solution boils down to being able to load a file /media/templates/site/cassiopeia/css/global/colors_custom.min.css and a module in the frontend.

[brianteeman]

The code to support additional color schemes already exists (I wrote it) #35917

[dgrammatiko]

The solution is to add a third option Custom

Here's another way to achieve the same:

• Create a child template
• Create a css /media/templates/site/{child template name}/css/global/colors_standard.css and place the CSS you want there.
• Select the child template as your default.
• Enjoy

sorry @brianteeman

[brianteeman]

There are many ways to skin a cat

[Stuartemk]

The code to support additional color schemes already exists (I wrote it) #35917

Thanks
It's a good option

[Stuartemk]

The solution is to add a third option Custom

Here's another way to achieve the same:

• Create a child template
• Create a css /media/templates/site/{child template name}/css/global/colors_standard.css and place the CSS you want there.
• Select the child template as your default.
• Enjoy

sorry @brianteeman

This seems to be simple, but creating the child template and adding the dark and light vars there, there is still no module in the frontend to select the color scheme

[dgrammatiko]

@Stuartemk that's also easy:

• create an override for the custom module, name it whatever you want, for brevity I will use darkswitch.php
• Edit the php and add parts of the codepen above eg:

<?php
defined('_JEXEC') || die;

use Joomla\CMS\Factory;

$wa = Factory::getApplication()->getDocument()->getWebAssetManager();
$wa->registerAndUseScript('custom_dark_light_switch', 'https://unpkg.com/ce-theme-switcher@0.0.3/src/index.js', [], ['type' => 'module']);
$wa->registerAndUseStyle('custom_dark_light_switch', 'https://unpkg.com/ce-theme-switcher@0.0.3/src/index.css', [], []);

echo '<dark-light-switch default=true text-on=on text-off=off text-legend="dark theme:"></dark-light-switch>';

• enjoy

[Stuartemk]

@Stuartemk that's also easy:

• create an override for the custom module, name it whatever you want, for brevity I will use darkswitch.php
• Edit the php and add parts of the codepen above eg:

<?php
defined('_JEXEC') || die;

use Joomla\CMS\Factory;

$wa = Factory::getApplication()->getDocument()->getWebAssetManager();
$wa->registerAndUseScript('custom_dark_light_switch', 'https://unpkg.com/ce-theme-switcher@0.0.3/src/index.js', [], ['type' => 'module']);
$wa->registerAndUseStyle('custom_dark_light_switch', 'https://unpkg.com/ce-theme-switcher@0.0.3/src/index.css', [], []);

echo '<dark-light-switch default=true text-on=on text-off=off text-legend="dark theme:"></dark-light-switch>';

• enjoy

Hello, I have been slow to respond because I have been doing tests, apparently this was the definitive solution (however in particular it presents me with several problems), and in general the biggest problem occurs when reloading the page although yes keeps the selected theme, in the dark theme it works without problem, BUT in the light theme when changing tabs or reloading the page it first changes to the opposite theme, which is very unpleasant for the user since that "blinking" if it were between colors Similarities would not be so obvious, but since they are inverted colors, it is quite noticeable and even annoying to the eye. I have tried to solve it and in the end I tried it again in your test link https://codepen.io/dgrammatiko/pen/bGNXVQQ?editors=1010 and the same thing happens. Finally, in particular, I use a desktop template and another for mobile phones, in the desktop template the switch button changes color, but in the mobile template the button does not change, if in the browser I manually change the code between clear and dark makes the change but the button does not.