Redesigning website: how can I implement "dark mode" especially on mobile variant?

[Red14]

Thanks!, That is a very usable link, i'll read me in.

[gcellison]

Hi Red14,

Just to throw in my two cents, for what it’s worth, and which you can ignore if it’s not relevant.

Whatever the origin, the current idea of dark mode is meant to save energy on mobile devices so that their batteries last longer. Since it gives a cool (or novel) effect, it has caught on as well for devices that are not battery dependent.

You’ll find that switching between light and dark modes is almost entirely for apps, not websites. Very very few websites will have alternate versions. So, if you want your website to appear in dark mode, then design it that way. It will be very sleek. Be aware that if you have a lot of text, it will be much more cumbersome for your users.

[Red14]

Thanks GW, A, and GC

After evaluating I opt for a sun and a moon symbol and a dark shadow copy so users can choose their own.
I always like to choose and want to treat our customers the same way.

Our site has an "half dark" theme already, no pictures with a white background and everything else transparent so i was already on my way.
Well, i'll start building new ones, crossover version of a normal and a supersite, reducing pages and incorporating a dark mode.
It's our beautysalon, nail and hairstudio and my personal website now i have got the domain.
Feel free to see the old ones on lagune.nl and the new designed landingpage on https://suzannedegroot.nl/

Thanks again!

[ss-kalm]

Well the opening page looks very slick, but the click to enter button doesn't work ... I'm using Vivaldi browser.

[Gypsyjoe]

Well the opening page looks very slick, but the click to enter button doesn't work ...

+1 except I use chrome

[ss-kalm]

Just reaalised you said "new designed landingpage". I assume you have no other content yet!

I love the male/female hair design logo on the original site. Excellent design.

[Acorn]

Red14, he animated plane is a whopping 9MB download and so you get a black background before the GIF is fully loaded.
9MB is a disaster for any website.

I have hashed a mockup of the same sort of mechanism using an animated SVG file, which does not have any real payload.

SVG - Animated Plane.xar.

Do note, this is not your solution. It is a simple demonstrator of what should be done.

I hope there is a TGer out there who is more versed in SVG animations that I am.
If not, I am sure you could learn enough to make it tidier for your specific need.

Acorn