Improve dark mode styling for Quickstarts recommendation page

[Bhup-GitHUB]

What has changed?

Fixed dark mode styling issues in the QuickStart filter component where white cards had poor contrast and readability in dark theme.

This PR Resolves #2984

Type of change

• Bug fix (non-breaking change which fixes an issue).
• New feature (non-breaking change which adds functionality).
• Breaking change (fix or feature that would cause existing functionality to not work as expected).
• Documentation update (if none of the other choices apply).

How Has This Been Tested?

Please run npm run build and npm run serve to check if the changes are working as expected. Please include screenshots of the output of both the commands. Add screenshots/gif of the changes if possible.

Checklist:

• My code follows the style guidelines of this project.
• I have performed a self-review of my own code.

Changes Made:

• Replaced hard-coded colors with CSS variables for theme compatibility
• Updated card backgrounds to use var(--ifm-card-background-color)
• Fixed text colors to use theme-aware variables
• Enhanced dark mode hover effects and shadows
• Improved icon wrapper styling for better contrast

###Build

[Achanandhi-M]

Hey @Bhup-GitHUB,

First of all don't change the existing style, the goal of the issue is to make it good in dark mode but the PR changes the existing style can you please fix that issues? Also why there is a black dashed lined around the element?

Could you please separate them and also add a clear title and description? At the moment, it’s a bit difficult to understand what this PR is about.

[Bhup-GitHUB]

you want similar design right?

[Bhup-GitHUB]

will this work sir ? @Achanandhi-M