search

benvinegar / counterscale

Scalable web analytics you run yourself on Cloudflare
https://counterscale.dev
MIT License
1.3k stars 52 forks source link

Add dark mode #93

Open qwtel opened 2 weeks ago

qwtel commented 2 weeks ago

Added dark mode based on the (wip?) support that was already part of the repo.

Tweaked the colors a bit based on my own taste.

Added missing dark mode support to the chart, bars and some other places.

There is no toggle, it just follows prefers-color-scheme.

Also includes an inverted version of the counterscale graphic for the landing page.

Screenshot:

Screenshot 2024-08-28 at 16 53 35
benvinegar commented 2 weeks ago

This is awesome!

benvinegar commented 1 week ago

Apologies for the slow response – I'd like an opportunity to just play with this and do some testing before merging.

qwtel commented 1 week ago

No worries, I mostly just wanted this to be visible to someone searching for dark mode.

Btw, I have more improvements on my fork that includes a proper app icon, webapp manifest, and marks many elements as sticky, giving the dashboard a more app-like feel.

Taken together, it makes "Add to Dock" / "Install app" work which gives a native-ish app that looks like this:

Screenshot 2024-09-05 at 15 51 46
benvinegar commented 1 week ago

Taken together, it makes "Add to Dock" / "Install app" work which gives a native-ish app that looks like this:

Very cool.

I think my only hesitation on the PR right now is that this applies site-wide, including the landing page, and I don't think this is the look I want to go for.

image

I'm also not sure if I'm capable of maintaining a second "dark" look site-wide that people auto-opt into.

What if we (or I) just added a dark mode toggle in the corner? And we just remember the setting in a cookie.