Needs light mode

[sreekaransrinath]

Dark background + light text is not very accessible/vision-impairment friendly.

Imo we should have a light mode that people can at least shift to.

[tusharnankani]

@HarshKapadia2 what do you feel about it?

@sreekaransrinath, instead of adding a light mode, do you think softening the colors but retaining the mode would help?

Either way, we'll have to modify css in all repositories.

[HarshKapadia2]

I don't mind supporting a light mode, but you're right @tusharnankani, we'll have to change the CSS, add theme switchers, check responsiveness and all of that everywhere, which will be a task.

I keep thinking that we need to build some kind of a npm package or some plugin system to be able to update and keep our UI consistent across repos. I know that Razorpay does this. It will be time consuming, but it will reduce work going down the line, I guess. I've also wanted to include Web Components for repetitive things like our burger menus, because adding one page implies changing the menu HTML on every page, which is obviously irritating (OurTechCommunity/catchup#55). (Cc: @KartikSoneji)

That being said though, I don't think we have the time to do any of these (add a separate theme or create a template) for now. Good suggestion though @sreekaransrinath. This will be an update that we will look to add in the future.

[KartikSoneji]

Either way, we'll have to modify css in all repositories.

How about a page-wide invert filter for everthing except images?

[tusharnankani]

Yep, possible.

html {
    filter: invert(1) hue-rotate(180deg);
}

img {
    /* reverse the effect for images, svgs and other assets*/
    filter: invert(1) hue-rotate(180deg); 
}

[KartikSoneji]

I think we can use the :not() selector

:not(img, svg) {
    filter: invert(1) hue-rotate(180deg);
}

[tusharnankani]

Best.

[HarshKapadia2]

Good idea @KartikSoneji. Here is how it looks on our OTC home page. It seems okay to me for this page, but I haven't checked other pages.

Before:

After:

[tusharnankani]

Too strong colours. That’s why I said — let’s soften the colours.

[HarshKapadia2]

How?

[tusharnankani]

I meant the colors are too strong, a little too contrasting.
And sometimes, it is difficult to read.

[HarshKapadia2]

Okay, but how do we do that without adding a lot of CSS across all our repos?

[KartikSoneji]

We can add a selector like:

body.invert :not(img, svg) {
    filter: invert(1) hue-rotate(180deg);
}

Then have the theme selector toggle the class:

document.body.classList.toggle("invert");

[HarshKapadia2]

Yes, but as Tushar said:

I meant the colors are too strong, a little too contrasting.
And sometimes, it is difficult to read.

[KartikSoneji]

invert(0.97) instead of invert(1) ?

Side note:
Maybe there can be a common css file across all repos that only defines css variables for the theme colors.

[HarshKapadia2]

invert(0.97) instead of invert(1) ?

What do you think @tusharnankani?

Side note:
Maybe there can be a common css file across all repos that only defines css variables for the theme colors.

Why not have a common CSS library in that case?