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

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.

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.

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

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.

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

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.

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!

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

Quote:

---

Originally Posted by ss-kalm

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

---

+1 except I use chrome

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.

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.

:pointAttachment 127442.

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

Hi Acorn, d/l'ed you xar file and thought I'd give it a bash. I've created a similar svg using svgator. It wasn't straightforward but I finally got a working version which is only 30Kbs. Unfortunately I'm migrating my server at present so I can't show you an example. Will do so on completion of the mirgation.

wow, Acorn, thanks! it was a vid i 'giffed and all i looked at was if was smoothly running.
Never noticed the size or slow loading as i'm on fiber here.
Thanks for pointing out better ways and another change to learn something new.
I've been off a couple days as i had a kid in hospital.

Quote:

---

Originally Posted by Red14

I've been off a couple days as i had a kid in hospital.

---

Congrats.

Acorn

giggles.... no... my kid was in the hospital, but still congrats are in place, he's doing very well now. :)
glad we are home safe after a weird week.

Quote:

---

Originally Posted by Red14

giggles.... no... my kid was in the hospital, but still congrats are in place, he's doing very well now. :)
glad we are home safe after a weird week.

---

Oops. Not bad for a misunderstanding though. Glad the end result is OK.

Acorn