Visibility Issue in Dark Mode

[18Venus]

Describe the bug
Guidelines are not visible in dark mode. The text and background color seem to be overlapping.

To Reproduce
Steps to reproduce the behavior:

1. Go to the site.
2. Click on dark mode ('Half Moon' icon) (if the icon is 'Sun' you are already in dark mode)
3. Click on the 'book' icon on the leftmost top.
4. A text area will appear which will have visibility issues.

Expected behavior
The guideline box that appears has the same/ very close color for text and background making it very difficult to read.
Rather the background should be darker and text of the same color to adhere with the dark mode.

Screenshots

Desktop:

• OS: Windows
• Browser: Bing, Chrome

Smartphone:

• Device: Samsung A14
• OS: Android
• Browser : Chrome

[github-actions]

Hi there! Thanks for opening this issue. We appreciate your contribution to this open-source project. We aim to respond or assign your issue as soon as possible. In the meantime you can star the repo and read the contributing.md

[Utsavladia]

Dear @singodiyashubham87,

I understand the issue and am confident I can address it effectively. I request that you assign this issue to me under GSSOC '24.
I have extensive experience working on projects with dark and light mode options and I will also improve the UI of this guidelines section for better responsiveness and user experience.

Hope you will consider my request.
Thank you.

[singodiyashubham87]

@18Venus Do you want to work on the issue?
@Utsavladia If the issue raiser declines to take up the issue, then I'll assign it to you.

[18Venus]

Hey @singodiyashubham87, yes I do want to work on the issue under GSSOC'24. Thank you!

[singodiyashubham87]

@18Venus Assigned, Best of Luck :)