dark mode

Thank you very much for continue supporting and for fixxing my 1054 error! I apreciate it!

It would have been nice and practicle in terms of good UI and UX practice to have a proper fulfledge Dark Mode management feature built in in Helix Ultimate and have a simple dark-mode toggle like you have on https://demo.hotjoomlatemplates.com/dark_mode/index.php?style=4. Because right now having to juggle between 2 different templates to achieve a half baked solution is not worth it. Hope this feature makes it to prod in near future. Thanks.

Hi Afrinic,

What is UI?
What is UX?

I used this extention = https://extensions.joomla.org/extension/eb-dark-mode/ and it effect negatively some of my other extentions... I wasn't able to proper change correctly the collors and other graphics; for example it wasn't compatible with https://www.favthemes.com/

Thanks for sharing your website it looks nice! However, I have a lot of things on my website, a lot of different extention and this switcher of white and dark mode should work propertly to everything...

Hi Angelos

Indeed I tried https://extensions.joomla.org/extension/eb-dark-mode/ which is really nice and simple but then it does not play well with Joomshaper Helix Ultimate.

That is why I have provided https://demo.hotjoomlatemplates.com/dark_mode/index.php?style=4 as an example where from the demo you can see that there is a dark-mode toggle swtich which allows the user to easily switch to dark/light mode. Except that you see the website logo in both case (Dark/Light) swtich seamlessly.

This is what is missing from Helix Ultimate currently. Otherwise you have to manage 2 different template + menu settings, especially 2 sets of all images used on the website.

thank you! hopefully Joomshaper Helix Ultimate apply this function in the future!

This is what is missing from Helix Ultimate currently. Otherwise you have to manage 2 different template + menu settings, especially 2 sets of all images used on the website.

Hi. Explore by the code inspector your example to understand what is happening. This is exactly what happens - switching between 2 different designs. And not some kind of magic transformation of white in black. That is, you must have two different designs to implement Dark Mode.

In the case of a basic universal template, how is Helix, I do not think it is possible to implement Dark Mode. This requires the unique static design, which is impossible for an universal template and will make it unsuitable for use with customized design.

You can easily make Dark Mode on your site by creating two types of design in CSS. CSS switching is implemented fairly simple JavaScript.
An example of a script that can be hung on the click event for the button.

$('#change-reset').change(function() {
$('.reset-stylesheet').remove();
$('head').append('<link class="reset-stylesheet" rel="stylesheet" href="'+$(this).val()+'">');
});

You can easily find other script examples to switch CSS using Google upon request "Switching CSS Stylesheets Via JavaScript".

You can already configure one of the presets of Helix for Dark Mode. And make switching.
But this will set only CSS colors. And you still have to change the images through the Custom Code.

Hi Pavel - excatly my point.

Why go into modifying the code when all that can be taken care of via the Helix Template Style Manager, probably by simply having a Preset which consist of the light and dark mode. Like Preset 1(Light/Dark), Preset 2(Light/Dark) etc.

I do get your point though.

Thanks.