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.