search

icssc / fellowship

https://fellowship.icssc.club
MIT License
5 stars 13 forks source link

Update logo and color scheme #19

Closed ChaseC99 closed 2 years ago

ChaseC99 commented 2 years ago

Added a new logo and set the color scheme to a pink. Idk the pink might be too bright - I'm undecided on it.

Light Mode Dark Mode
image image
image image
ramanxg commented 2 years ago

I like the pink on the course pages, when it's more subtle (highlighting the words). For the home page, I think the pink works on light mode, but in dark mode, it's a little too bright (It doesn't really feel like dark mode anymore).

This is the color pallete that ICSSC uses: https://coolors.co/222222-f1f1f1-ffb0e1-6b7aab-a0a6b1

ChaseC99 commented 2 years ago

in dark mode, it's a little too bright (It doesn't really feel like dark mode anymore).

Hmm yeah, what should we go with instead?

This is the color pallete that ICSSC uses: https://coolors.co/222222-f1f1f1-ffb0e1-6b7aab-a0a6b1

Yep! I got the current color scheme from there and then converted it to HSL and normalized it a bit hsl(323, 100%, 85%) -> hsl(325, 75%, 75%). If you're interested in learning more about hsl, here's a good video: https://youtu.be/Ab9pHqhsfcc

ramanxg commented 2 years ago

I was thinking something like this for light mode:

image

And this for dark mode: image

I think it's important we have as much contrast as possible and follow accessibility guidelines. I'm even more concerned about the pink text on white. Not sure how to use the darker/darkest colors in Infima, but those look better in light mode with the contrast.

Maybe the footer color needs to be changed too. Possibly the black in our color palette. ( I experimented with Inspect Element so I don't have the code for it, but I can work on it if you want).

ChaseC99 commented 2 years ago

Ohhh that looks good! What are the color codes?

ramanxg commented 2 years ago

Ohhh that looks good! What are the color codes?

Light mode: Pink is the same The main background is #F1F1F1(the lighter gray in the palette). For the text we can use the black in the palette, or just #000000

Dark mode: Pink is the same The main background is #222222, (black in the palette) Every other background is #000000 (navbar, and feature list) For the text it's just white.

ChaseC99 commented 2 years ago

I’m struggling with the colors... will try again later today before board meeting.

ramanxg commented 2 years ago

I was trying it out, and went ahead and did it myself. Let me know how it looks. I've also changed the footer, so it matches our theme more, but not sure about it still.

I'm still worried about the pink contrast with the white on light mode. There isn't a lot of contrast, and I've did some online testing for accessibility, it does fail.

ChaseC99 commented 2 years ago

You beat me to the color updates by a few minutes lol. Here's what my changes looked like: https://github.com/icssc-projects/fellowship/commit/c4e8765a29b36345e7cb65bbcb3241dfbb8a4cea

It also matches your suggestions exactly, so let me know which one you want to go with.

ChaseC99 commented 2 years ago

Actually I like your approach of modifying the custom properties better.