search

picturepan2 / spectre

Spectre.css - A Lightweight, Responsive and Modern CSS Framework
https://picturepan2.github.io/spectre/
MIT License
11.31k stars 804 forks source link

Dark mode support via prefers-color-scheme query in CSS #652

Open tonimelisma opened 3 years ago

tonimelisma commented 3 years ago

I've tried searching the old issues and documentation and can't find anything related to dark mode support. Does Spectre have any plans to support automatic dark mode via the prefers-color-scheme media query in CSS? So in essence the site would have both a light and dark theme, and the browser would choose one based on the end user's preference without any manual intervention from the user.

It seems none of the major CSS frameworks have proper support for dark mode yet even though the media query functionality has been working in all major browsers for over a year.

If one were to add such functionality to Spectre, are there any architectural tips where and how to do so? Is the feature even welcome?

inliquid commented 3 years ago

Would be nice to have it.

nodgear commented 3 years ago

I think you did the wrong search, because: #629 #603 It's a requested feature, the maintainer already said he agrees with it being added and it will be added in the future.

I thought about making it myself, but with the current branches that would require commiting all the elements at the same time, which i don't have much time to do. @picturepan2 can we have a branch for dark mode or WIP even? that way everyone can make a couple of components until finished.

tonimelisma commented 3 years ago

Hey @nodgear neither of those issues mentions the use of CSS media queries to automatically detect the user preference, so this is not a duplicate of either of those. Both seem to me to be about having a dark theme in spectre, not about having both light and dark modes, linked via one CSS, which chooses which one to show based automatically on user preference.

Please correct me if I've misunderstood.

nodgear commented 3 years ago

Hello @tonimelisma yes you're right, simply ignored the prefers-color-scheme from the title and went to the I've tried searching the old issues and documentation and can't find anything related to dark mode support.

Spectre doesn't have any dark mode for now, if we get a dark branch: Adding the query will be fairly simple.