Fix text-muted visibility in dark mode on welcome page

[Copilot]

The difficulty and environment explanation text was not visible in dark mode on the main welcome screen. The text "Difficulty: ⭐ (Easy) ⭐⭐ (Medium) ⭐⭐⭐ (Hard) ⭐⭐⭐⭐ (Expert) ⭐⭐⭐⭐⭐ (Master) | Environment: Where the challenge can be solved" used Bootstrap's text-muted class which has poor contrast against the dark background.

Root Cause

The text-muted class in Bootstrap applies a gray color (#6c757d) that becomes virtually invisible when the page is in dark mode with a dark background.

Solution

Added a CSS rule .dark-mode .text-muted { color: var(--bs-gray-300) !important; } to ensure proper contrast in dark mode. The fix uses the existing CSS variable --bs-gray-300 which provides good readability against the dark background while maintaining consistency with the existing dark mode color scheme.

Before and After

Before Fix (Dark Mode):

After Fix (Dark Mode):

Files Changed

• src/main/resources/static/css/dark.css - Added dark mode styling for text-muted
• static-site/pr-2125/pages/welcome.html - Applied same fix to static site preview

The fix is minimal, targeted, and maintains backward compatibility while significantly improving readability in dark mode.

Fixes #2230.

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[github-actions]

🌐 GitHub Pages Preview Ready!

Your static preview is now available at:
🔗 Preview PR #2231

📄 What's included:

• ✅ All CSS, JavaScript, and static assets (embedded inline)
• ✅ Current styling and layout preview
• ✅ Images, icons, and UI components
• ✅ NEW: Generated HTML from Thymeleaf templates
  • 🏠 Home/Welcome Page
  • ℹ️ About Page
  • 📊 Stats & Config Page
  • 🤖 Challenge 57: LLM Security (Latest)
  • 🧩 Challenge Example

For full functionality testing: Use the Docker preview instead.

🔄 Auto-updates: This preview will be updated automatically when you push new commits to this PR.

---

_{Static preview with Thymeleaf generation by GitHub Actions}

[github-actions]

🔨 Preview Build Complete!

Your changes have been built and pushed to GitHub Container Registry.

🐳 Docker Image: ghcr.io/owasp/wrongsecrets/wrongsecrets-pr:pr-2231-7768514

📦 Download & Test Locally:

1. 📁 Download Docker Image Artifact (look for wrongsecrets-preview-pr-2231)
2. Load and run the image:

# Download the artifact, extract it, then:
docker load < wrongsecrets-preview.tar
docker run -p 8080:8080 wrongsecrets-preview

🚀 Alternative - Pull from Registry:

docker pull ghcr.io/owasp/wrongsecrets/wrongsecrets-pr:pr-2231-7768514
docker run -p 8080:8080 ghcr.io/owasp/wrongsecrets/wrongsecrets-pr:pr-2231-7768514

Then visit: http://localhost:8080

📝 Changes in this PR:
- src/main/resources/static/css/dark.css

Visual diff screenshots will be available shortly...

---

_{Preview built by GitHub Actions}

[github-actions]

🔨 Preview Build Complete!

Your changes have been built and pushed to GitHub Container Registry.

🐳 Docker Image: ghcr.io/owasp/wrongsecrets/wrongsecrets-pr:pr-2231-7768514

📦 Download & Test Locally:

1. 📁 Download Docker Image Artifact (look for wrongsecrets-preview-pr-2231)
2. Load and run the image:

# Download the artifact, extract it, then:
docker load < wrongsecrets-preview.tar
docker run -p 8080:8080 wrongsecrets-preview

🚀 Alternative - Pull from Registry:

docker pull ghcr.io/owasp/wrongsecrets/wrongsecrets-pr:pr-2231-7768514
docker run -p 8080:8080 ghcr.io/owasp/wrongsecrets/wrongsecrets-pr:pr-2231-7768514

Then visit: http://localhost:8080

📝 Changes in this PR:
- src/main/resources/static/css/dark.css

Visual diff screenshots will be available shortly...

---

_{Preview built by GitHub Actions}

[github-actions]

📸 Visual Diff Available!

Screenshots have been generated comparing your changes with the main branch.

Download Visual Diff Artifacts

The artifacts contain:

• pr-home.png - Your version of the home page
• main-home.png - Current main branch home page
• pr-about.png - Your version of the about page
• main-about.png - Current main branch about page

Compare these images to see the visual impact of your changes!

---

_{Visual diff generated by GitHub Actions}

[github-actions]

📸 Visual Diff Available!

Screenshots have been generated comparing your changes with the main branch.

Download Visual Diff Artifacts

The artifacts contain:

• pr-home.png - Your version of the home page
• main-home.png - Current main branch home page
• pr-about.png - Your version of the about page
• main-about.png - Current main branch about page

Compare these images to see the visual impact of your changes!

---

_{Visual diff generated by GitHub Actions}

[github-actions]

📸 Visual Diff Ready!

Screenshots comparing your changes with the main branch are available:

📁 Download Visual Diff Artifacts

🖼️ Included screenshots:

• pr-home.png vs main-home.png - Welcome page comparison
• pr-about.png vs main-about.png - About page comparison
• pr-challenge.png vs main-challenge.png - Challenge page comparison

🔍 How to review:

1. Download the artifact zip file
2. Extract and compare the pr-* and main-* images side by side
3. Look for visual differences in layout, styling, and content

💡 Tip: Use an image comparison tool or open both images in separate browser tabs to spot differences easily.

---

_{Visual diff generated by GitHub Actions • PR #2231}

[github-actions]

📸 Visual Diff Ready!

Screenshots comparing your changes with the main branch are available:

📁 Download Visual Diff Artifacts

🖼️ Included screenshots:

• pr-home.png vs main-home.png - Welcome page comparison
• pr-about.png vs main-about.png - About page comparison
• pr-challenge.png vs main-challenge.png - Challenge page comparison

🔍 How to review:

1. Download the artifact zip file
2. Extract and compare the pr-* and main-* images side by side
3. Look for visual differences in layout, styling, and content

💡 Tip: Use an image comparison tool or open both images in separate browser tabs to spot differences easily.

---

_{Visual diff generated by GitHub Actions • PR #2231}

[github-actions]

🧹 Preview Cleanup Complete

The static preview for this PR has been removed from GitHub Pages.

Thanks for contributing to WrongSecrets! 🎉

---

_{Cleanup completed by GitHub Actions}