search

stuysu / epsilon

all in one service for stuyvesant high school.
8 stars 0 forks source link

light theme is kind of lackluster #125

Open randysim opened 4 days ago

randysim commented 4 days ago

outlines become very faint and everything just looks white.

hard to use the site in bright theme.

though this isn't really the biggest issue because who uses light theme anyways?

SnowyNate commented 3 days ago

I always use the light theme for this site. We could fix this by using a gradient color as the background.

SnowyNate commented 2 days ago

It turns out this is much more tedious than I thought. We would have to switch from ThemeProvider to CSS, which from my research actually improves performance. Thoughts? @randysim @Rahuldeb5 @TheEgghead27

randysim commented 2 days ago

Ideally the site would have a minimal, sleek design, which I think having the ENTIRE background be a gradient goes against.

The problem with light theme is the lack of contrast between UI components and the background (everything just turns white), not that the background isn't interesting enough.

TheEgghead27 commented 2 days ago

If I am understanding you correctly, you want to switch to raw CSS?

MUI ThemeProvider has ample dark/light features that work well, I wonder if the issue here is improper integration with it?

SnowyNate commented 2 days ago

Ideally the site would have a minimal, sleek design, which I think having the ENTIRE background be a gradient goes against.

The problem with light theme is the lack of contrast between UI components and the background (everything just turns white), not that the background isn't interesting enough.

I see, then we would have to change the colors of the tiles themselves.

SnowyNate commented 2 days ago

If I am understanding you correctly, you want to switch to raw CSS?

MUI ThemeProvider has ample dark/light features that work well, I wonder if the issue here is improper integration with it?

Yes, and use the Typescript to activate triggers in the CSS rather than handling the actual colors. Some backgrounds, such as the gradients I suggested, only work through CSS with our site. I tried using lineargradient inline and it broke the entire site.

TheEgghead27 commented 2 days ago

I have a feeling that what we actually need (readable light mode) is very much attainable without too many CSS hacks, and while gradiants look nice, I am of the opinion this disproportionately large struggle is not necessary.

SnowyNate commented 2 days ago

I have a feeling that what we actually need (readable light mode) is very much attainable without too many CSS hacks, and while gradiants look nice, I am of the opinion this disproportionately large struggle is not necessary.

Alright then. It seems pretty universal that we should ditch the gradients then and maybe reserve them for a future update. I'll move onto attempting to change the colors of components themselves, such as the tiles.

SnowyNate commented 18 hours ago

After performing some more experimentation, changing the colors of components themselves such as the tiles is also not very sufficient. Changing the tiles to a different color other than white makes them weirdly stand out, and making them darker also looks weird. Plus, if I stick with that idea, then I have to go hunting for every component and tile that the site has. While I understand Randy's desire for the site to be sleek and minimalistic, at this point, I'm going to consider my two options and go with whatever's easier and most visually appealing.