dark theme issue solved #2986

[AzhaanGlitch]

InstallReminder Component UI Bug Fix

Overview

This project addresses a UI bug in the InstallReminder component where the heading and paragraph text remained dark in dark mode, causing readability issues against the dark background.

Changes Made

• Removed Inline Styles: Eliminated all inline styles from the InstallReminder.js component to ensure theme adaptability.
• Introduced CSS Classes: Replaced inline styles with two new CSS classes:
  • install-reminder-container
  • install-reminder-button
• Updated Stylesheet: Added styling for the new classes to the global custom.css stylesheet.
• Dark Mode Support: Implemented a [data-theme='dark'] rule to adjust the component's background and text colors for dark mode, ensuring proper visibility.

Issue Resolution

This pull request resolves issue keploy/keploy#2986

Type of Change

• Bug fix (non-breaking change that fixes an issue).

Testing

The changes were tested by:

• Running npm run build and npm run serve locally.
• Verifying that the InstallReminder component renders correctly in both light and dark themes.
• Confirming that text color inverts appropriately when toggling themes.

Screenshots

• Light Mode:

- **Dark Mode (Fixed)**:

Checklist

• Code adheres to the project's style guidelines.
• Performed a self-review of the code.

[github-actions]

Thank you and congratulations 🎉 for opening your very first pull request in keploy

[AzhaanGlitch]

@Achanandhi-M, I've resolved the dark mode styling issue in the Keploy Installation component. Could you please review the changes? Thanks!
For your ease - keploy/keploy#2986

[Achanandhi-M]

Hey @AzhaanGlitch thanks for raising the PR, can you please change colour in the dark mode it is not really good

[AzhaanGlitch]

Hey @AzhaanGlitch thanks for raising the PR, can you please change colour in the dark mode it is not really good

Yaa sure, I will make it look more catchy.

[AzhaanGlitch]

Hello @Achanandhi-M, thank you for your feedback on the PR. I have made the necessary color adjustments for dark mode as requested. Please review the changes and let me know if there are any further modifications needed.

[Achanandhi-M]

Hey @AzhaanGlitch, I’ve reviewed your PR. The design currently looks a bit too dark, and I think it could be improved further. Could you please adjust it to make it look even better?

[AzhaanGlitch]

Hello @Achanandhi-M, thank you for your feedback on the PR. I have made the necessary color adjustments for dark mode as requested. Please review the changes.

Here is the changed glance -

[Achanandhi-M]

Hey @AzhaanGlitch,
I don’t think any changes are needed in the custom.css file to fix the issue with the dark installation component. Could you please explain why those changes were made in custom.css?

[AzhaanGlitch]

Hi @Achanandhi-M ,
The changes were necessary to fix critical CSS conflicts that were breaking the dark theme functionality. There were duplicate color variable declarations and conflicting CSS rules that prevented the installation component from displaying properly in dark mode. These weren't optional improvements, they were essential fixes to resolve syntax errors and ensure the component works correctly across both light and dark themes.

[Achanandhi-M]

Hey @AzhaanGlitch , thank you so much for raising this PR! 🙌 We’ve already merged similar changes from another contributor, so we’ll be closing this one.

We really appreciate your effort and would love for you to pick a new good first issue — your contributions are always welcome! 💛