Attempted to implement theme switching functionality, but encountered some issues

[zhitianguan]

PR Template 🚀

🐛 Fixed Issue

Attempted to implement [FEATURE] To add theme changing functionality, but I am encountering some issues that I will describe below.

🛠 Proposed Changes

I attempted to integrate the ability to toggle between different themes. Below are my key changes:

Implemented a ThemeContext provider that wraps around the entire application. This allows components to dynamically adjust their tailwind CSS colors by reading the current theme state.

Added new colors in tailwind.configure.js that correspond to 2 new themes. The color variables defined have the format themeX_COLOR, ex. theme1_primary. Note that theme0 corresponds to colors that make up the default theme of the current site, and theme0_... and theme1_... are the new colors.

Added three new buttons labelled A, B, and C in the LeftSidebar component. Clicking these buttons changes the theme to have "theme0", "theme1", or "theme2" values, respectively.

Issue: I've encountered an issue where the components seems unable to read the dynamically assigned theme value. Interestingly, if I hardcode a theme directly for a component and then revert the change, the ABC buttons function temporarily. I'm not particularly familiar with tailwindCSS, any help would be greatly appreciated!

🖼️ Screenshots

example of a component dynamically applying different colors by reading the current theme value:

The app seems to have issues with assessing the dynamically assigned colors, and falling back to default values of black and white:

Checklist ✅

• [ ] Starred this repo ⭐.
• [ ] Code adheres to the project's coding standards 💻.
• [ ] No sensitive information is inadvertently exposed 👀.
• [ ] Commit history is clear and concise 📃.

[vercel[bot]]

Someone is attempting to deploy a commit to a Personal Account owned by @anand346 on Vercel.

@anand346 first needs to authorize it.

[anand346]

Hi @zhitianguan, thanks for your valuable contribution. I'll look into the encountered issue and update you ASAP. Thanks :)