search

samay-app / samay

Find a time which works for everyone
https://samay.app
MIT License
306 stars 60 forks source link

Dark Mode #56

Open anastr0 opened 3 years ago

anastr0 commented 3 years ago

Everyone needs Dark Mode!

manishprivet commented 3 years ago

Hi, can you assign this issue to me? I would like to work in it

anandbaburajan commented 3 years ago

Hi, can you assign this issue to me? I would like to work in it

Hey @manishprivet! Since #62 is not over yet, I think we should wait for the web design for the MVP to finish and then look into dark mode. Thanks for showing interest anyway! Also, if you're good at UI/UX, you're welcome to take up #62.

manishprivet commented 3 years ago

My approach for dark mode was by using css variables, and changing those variables through a single button, all blackboxed in a single component. It doesn't require the MVP to be finished. We can assign those variables to the MVP later on too

anandbaburajan commented 3 years ago

My approach for dark mode was by using css variables, and changing those variables through a single button, all blackboxed in a single component. It doesn't require the MVP to be finished. We can assign those variables to the MVP later on too

Sounds good, but to be open with you, the styling parts of our code don't follow best practices. We don't have a dedicated UI/UX member on our team so the CSS might be troublesome to you. So we were thinking about reworking on the CSS. Can you go through our CSS and let us know what you think? You're also suggested to join our Gitter chatroom by the way. Thanks!

anastr0 commented 3 years ago

@manishprivet Thanks for your interest in contributing. You can start working on this. You can also help us in #62 if you're interested.

But please note that we're using Nextjs and poll pages( rocketmeet.me/poll/[pollid] ) are ssr. Which means, the page is rendered in server and the user's theme preference is stored in the client's browser. This might lead to a flash each time a poll is rendered. So make sure to handle that if you're using css variables.

Alternatively, you can make use of redux, redux-persist and somehow store theme preference in the server itself.

Look into it and tell us if you have any trouble. Thanks! :D