search

Rishabh-malhotraa / caucus

Realtime Collaborate Editor with Embedded Compiler
https://caucus.rishabhmalhotra.in/
MIT License
295 stars 70 forks source link

Have a Light mode #44

Open Rishabh-malhotraa opened 2 years ago

Rishabh-malhotraa commented 2 years ago

Requirement

The theme palette I use is the following:- VS-dark

First, we need to decide which palette we would be using for the light theme and then implement this in a modular way.

This is a big issue, so before trying to fix this, let me know how you approach this in a maintainable way.

By maintainable, I mean you don't have to change CSS hex codes in every component but have it defined from a global theme.modules.css file, and all the components derive CSS from that file.

GaganpreetKaurKalsi commented 2 years ago

Hi Rishabh! To add the theme feature we can have a theme.css file which includes the theme name as className and have all the theme related css in it. Then we can use useState hook to determine the theme. We can pass this state into the components as props and use it as className. Whenever the user changes the theme, the state is updated and as it is passed as prop(className) to components, the css will be applied based on the theme.css file and the component will rerender with the new theme. I hope I am clear with my approach.

If you find that my approach is feasible, you may assign me the issue. I would be happy to work on it.

AshokRajKoribilli commented 2 years ago

Hi Rishabh! To add the light theme feature to all components we create a global CSS file with both light and dark themes. Then we can use the useState hook to determine the theme. We can pass this state into the components as props and use it as className. Whenever the user changes the theme, the state is updated and as it is passed as a prop(className) to components, the CSS will be applied based on the theme.css file and the component will rerender with the new theme. I hope I am clear with my approach.

If you find that my approach is feasible, you may assign me the issue. I would be happy to work on it.

ashutosh4036 commented 2 years ago

We can add a slider button that can switch between light and dark theme