knownasilya/ember-toggle

Dark mode variants

knownasilya opened this issue · 9 comments

knownasilya commented

Add styles for dark mode variants of each theme, e.g. ios-dark

knownasilya commented

This would be a good issue to introduce css vars, and use those to create the variants

sarbikbetal commented

I want to work on this issue and I was thinking of using

@media (prefers-color-scheme: dark) {
}

along with css variables to automatically switch to dark theme, for example we can have material-auto along with material-dark, what do you say @knownasilya ?

knownasilya commented

That sounds like a great way to handle it, go for it. Feel free to break it up into prs for each theme.

sarbikbetal commented

Thanks you so I'll start working on it. Could you please assign this to me?

  • 👍1
sarbikbetal commented

Hey I'm working on it but to make the code cleaner I am using ios dark as the theme instead of ios-dark to handle the way you are returning the classes. Because using ios-dark means repeating the styling for .x-toggle-ios-dark, instead using ios dark will allow us to select the component using .x-toggle-ios.dark which means we can use the base styling from .x-toggle-ios and only add the changes to .x-toggle-ios.dark class.

knownasilya commented

What about using a @variant='dark' which adds the additional class, so theme stays the same but you just add a variant.

  • 👍1
sarbikbetal commented

Yeah that works as well, I will change the code accordingly ✌️. And what are your thoughts on the the dark themes I have added in terms of styling 😄 ?

knownasilya commented

Not bad, might tweak a bit for contrast, but that can happen later too.

sarbikbetal commented

I've added a commit making the required changes. Let me know if there is anything more.