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

[Red14]

That's my question, how can i make a dark mode?

I know i can copy and adapt the site and give users a day/night button linking to that but it would be great to let the visitors browser setting decide what to show.

Really don't know where to start with this.
I hope someone can send me on my way?
Thank you.

[gwpriester]

Are you referring to the iPhone showing a dark background at night and a light background during the day?

There is no native way to do this but I suspect Acorn may be able to find a script.

[Acorn]

Anything is possible but Dark Mode for a site is not just throwing a CSS switch: https://css-tricks.com/a-complete-gu...de-on-the-web/.

When you have your dark/light schemas defined, the automatic switch is simply JS reading the time.

Acorn

[Red14]

The dark mode in android 10
I was already thinking of redesigning and discovered the current one looks really bad in named dark mode.
And reading about it, it seems dark mode is really taking off now on devices.
Well, lets hope and wait, no problem.

[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.