[Feat] Dark mode #187

Activity

1. TotomInc

   changed the title [-][Feat] Drak(Night) Mode[/-] [+][Feat] Dark mode[/+] on Apr 11, 2019
2. TotomInc

   added

   feature

   on Apr 11, 2019
3. rhyneav

   added

   help wanted

   on Aug 18, 2019
4. rhyneav commented on Aug 18, 2019

   

   rhyneav

   on Aug 18, 2019

   Member

   More actions

   As a dark mode user, this would be awesome. Here's a good primer on how this could be introduced. It looks like just a simple media query:

   @media (prefers-color-scheme: dark) {
   
   }
   ``
5. seifsay3d-zz commented on Apr 21, 2020

   

   seifsay3d-zz

   on Apr 21, 2020

   Last edited by seifsay3d-zz

   Contributor

   More actions

   I have recently started to use papercss and I would like to have a dark-mode in my project so I thought that's a nice issue to tackle.

   I have a couple of questions/assumptions that I would like to get clarity on.

   1- Do we want to generate paper-dark-min.css and let the user load different builds using @media (prefers-color-scheme: dark)

   2- If not, then I assume we would rely on css variables to dynamically change the variables, then how do we approach IE? would something like this be sufficient?

   .paper {
     background-color: $main-background;
     background-color: var(--color-main-background);
   }
   

   ---

   Currently, I'm thinking of a solution that would be something along these lines

   1- create dark mode variable list with appropriate defaults

   $dark-mode-primary: #41403e !default;
   $dark-mode-secondary: #0071de !default;
   

   2- Add sass variables as css variables to html element based on @media (prefers-color-scheme: dark) or html.dark{}

   3- update all usages for scss vars to css variables with IE fallback
6. rhyneav commented on May 17, 2020

   

   rhyneav

   on May 17, 2020

   Member

   More actions

   Hey @seifsay3d sorry for the delay! You bring up a good point about IE (the problem child). Going against my own comment above, I think a solution without using media queries might be the best way to tackle this for now.

   I really like your idea of having a simple .dark class that could be put on the <html> tag. That way we can leave it up to the user of PaperCSS if they want a dark theme or not. It's easy to make it dynamic for the user's preferences using a few lines of JavaScript. Plus once IE browser support is there, it'll be easy to move this over to using css variables.

   So a modified version of your plan would look like:

   1. Create dark mode variable list with appropriate defaults
   2. Add sass variables as css variables to html element based on html.dark
   3. Update color references to use some new color mixin (to get light vs dark colors)
   4. ???
   5. Profit!

   What are your thoughts on that?
7. seifsay3d-zz commented on May 18, 2020

   

   seifsay3d-zz

   on May 18, 2020

   Contributor

   More actions

   Sounds awesome, I'll give it a shot then 🕺
8. rhyneav commented on May 18, 2020

   

   rhyneav

   on May 18, 2020

   Member

   More actions

   That sounds great, thank you for taking it on! Let me know if I can help you in any way!
9. rhyneav commented on Sep 13, 2020

   

   rhyneav

   on Sep 13, 2020

   Member

   More actions

   Just released in v1.8.0!

   🎉React with 🎉1Reacted by Seifeldin Mahjoub
10. rhyneav

    closed this as completedon Sep 13, 2020