Dark mode

[metmarkosaric]

"Save our eyes!"

(imported from the old roadmap)

[cassidyjames]

I have quite a bit of experience implementing dark styles on sites and in software, having tackled the elementary blog, my personal website, the AppCenter website, the elementary releases site, and elementary OS itself. I'd love to contribute to this. 👀

[ukutaht]

That's great. Dark mode hasn't been on the top of my priority list but I'd be super happy to merge a PR for this! :)

[NuroDev]

Of course not the most pressing feature, but would be a nice to have that could be toggled easily.
I went ahead and tweaked some CSS to give a quick mockup of how nice it could look using Tailwind's color palette 🙂

[ukutaht]

@NuroDev Uuh that looks really nice :)

[Vigasaurus]

I'm looking into doing this, should be PRing soon - was wondering if there was any preference on how dark mode should be selected? i.e. purely from prefers-color-scheme, an account setting, a combination of both (i.e. account setting for dark/light/follow system), or just a simple switch somewhere with it saving to local regardless of account?

Also if anyone is actively working on this - I'd gladly let them crack on :D

[metmarkosaric]

Sounds great @Vigasaurus! We're not actively working on this but would love to merge the PR!

Probably best would be in the account settings similar to the new GitHub Appearance:

[Vigasaurus]

So I'm extremely close to having this done (just a couple of the React components left) - but I'm having a bit of a hard time getting good test data to test all the potential views for some of the dashboard modules (some of the referrer views, campaigns, and Twitter/Google integrations). Is there an easy way for me to poll a different API (say the plausible.io demo, or my self hosted box) in the dev env - or an easy standard to mock those requests? If not I could always just leave those for someone with better test sets to test on the PR.

[Vigasaurus]

If anyone wants to poke at the progress or has any feedback/missed elements (except the two obvious ones heh) - I'd love to address them before the PR.

Dev box (unreliably down if actively being used etc, but generally active) - https://dev.vigneshjoglekar.com/dummy.site

(It's currently set to use the system theme for non-logged in accounts, but that can be changed if wanted)

[metmarkosaric]

This looks great @Vigasaurus, thanks! Would be great to test it better on a dashboard with more data. I wonder if there's a way for you to pull in some test data from our live demo? https://plausible.io/api/stats/plausible.io/main-graph?period=month&date=2020-11-01

And I like the system theme for non-logged in accounts method.

[Vigasaurus]

Thanks! It was actually surprisingly easy to hook into the API for any other site, dunno why I hadn't done that all along - check it out https://dev.vigneshjoglekar.com/plausible.io/

I do now realize that the coloring function for the map needs some work in dark mode - but all the rest looks pretty clean, if I do say so myself

[metmarkosaric]

Nice! It's looking good!

[metmarkosaric]

Dark theme is now live! We follow your system theme by default but logged in users can manually choose either system, dark or light theme in the account settings.