Darkmode Design + UX

[lottiecoxon]

As we know (from Yakko's graphs and research) darkmode is a hit with quite a lot of our users! SO we should put some thought into how we can make it look super swish.

I would also like to make the process of turning from light to dark mode look cool as well (because why not) but I understand that this may be a future iteration and not for the present day.

Therefore ladies and lads - lets get planning!

[lottiecoxon]

As put forward by @mikenicklas

[lottiecoxon]

This feels unnecessarily complicated for a button that will be so small, BUT, I do like the way that it goes from day to night, similar to our home page design.
Not to say that we need to have a full artistic scene for everypage - I think that this would be a bad idea tbh (far too loud and complicated) but we could hint at the night day cross over with the button and the top and bottom of the page. For example, for the lightmode (daytime) we could have a lighter purple/blue background that had faint clouds slowly crossing the screen, and then when the button is pressed for the darkmode the screen seems to fall away as such. Leaving us with a dark purple/navy backdrop with stars that slowly fade in and pulse...? Obviously just a first idea that popped into my head but you get the picture.

[lottiecoxon]

or to minimise noise we could have the night day as the footer? and then just use colour on the background to show light v dark

[mikenicklas]

@lottiecoxon That button is design is absolutely incredible! 😍 Maybe a good middle ground instead of animating the layers would be to simply opacity fade the scenes when the button is toggled? Such a great design though and would be a really nice touch to the experience.

[lottiecoxon]

That was not my design (ahah I wish) but yes great shout!

[paolodamico]

Echo @mikenicklas's comment, I absolutely love the toggle button, amazing Lottie!

[lottiecoxon]

| width 50

[corywatilo]

It probably makes sense to keep the toggle where it's available now (docs, handbook, etc) and not where it's not (feature pages, pricing, etc). Essentially the text-heavy pages can be toggled and we can have more unique, single-mode designs on the other pages. So tl;dr:

1. Docs, handbook = light/dark mode
2. Feature pages, pricing = single color scheme

P.S. @lottiecoxon Since we have the night sky for dark mode, the light mode could look more like daylight - like in this screenshot of the toggle you shared:

@mikenicklas Two color schemes is something worth keeping in mind as you build out a Tailwind config. We'll have toggleable styles on some pages and not others.

@lottiecoxon In my mind, this issue is lower priority than designing other pages so we stay one step ahead of Mike. I'd suggest not spending too much time on this until we have the other stuff done (like careers, etc)!

[lottiecoxon]

I have done some (less busy) warmer toned lightmodes for both blog and docs pages in Figma that fit more along with the image above. Plus I have changed the lightmode toggle button to fit these colours too.

[lottiecoxon]