Have a Light mode

[Rishabh-malhotraa]

Requirement

• Have a light mode for the entire editor page. Currently, we only support changing the theme of the Codemirror editor instance, but no other components.

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]

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]

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]

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