🧑‍💻: Improve Footer Visibility and Design in Light Mode

[Eva13-sys]

Title

Improve Footer Visibility and Design in Light Mode

Enhancement Aim

The current footer is not fully visible in light mode, which affects readability and the overall user experience. This enhancement aims to:

1.Adjust the footer color and contrast to ensure it stands out in both light and dark modes.
2.Improve the footer design to align better with the site’s overall aesthetic.

Changes

To make a footer that looks good in both light and dark modes, I first choose colors that provide good contrast and adjust subtly between themes. Here’s how I approach it:

Neutral Base Color: I pick a medium to dark neutral color for the footer’s background, like a dark gray or navy, that contrasts well in both themes.

Highlight Color: I select a highlight color that I can soften in light mode to make it more visually comfortable. For example, in light mode, I might desaturate or lighten the highlight color slightly.

Text Color: I make sure the text color has strong contrast with the background: white or off-white for dark mode, and a darker shade (like black or dark gray) for light mode. This keeps the text readable no matter the mode.

Accent Colors: I use subtle accent colors for things like icons or links—something like teal or muted blue usually works well and adjusts smoothly between modes.

Screenshots 📷

Guidelines

• I have read the guidelines
• I have the link to my latest merged PR

Full Name

Eva Balabantaray

Participant Role

GSSOC

[github-actions]

👋 Thank you for raising an issue! We appreciate your effort in helping us improve. Our CodeIt team will review it shortly. Stay tuned!

[multiverseweb]

@Eva13-sys sure, assigned.

[raavan4m3]

In light mode

In dark mode

will this work?

[multiverseweb]

@raavan4m3
Actually the glow isn't required as we are trying to keep the design simple. Only the font color should change upon theme toggle.