search

knownasilya / ember-toggle

Checkbox based Toggle Switches for Ember
http://knownasilya.github.io/ember-toggle/
MIT License
112 stars 52 forks source link

Dark mode variants #140

Closed knownasilya closed 3 years ago

knownasilya commented 3 years ago

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

knownasilya commented 3 years ago

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

sarbikbetal commented 3 years ago

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 3 years ago

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 3 years ago

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

sarbikbetal commented 3 years ago

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 3 years ago

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

sarbikbetal commented 3 years ago

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

knownasilya commented 3 years ago

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

sarbikbetal commented 3 years ago

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