Contrast changes to join now for dark mode

[JTovalin10]

Author: Justin Hernandez Tovalin

Changes Made

1. "Join the Discord" Button (.link-boxes, a.link-boxes) - Dark Mode

Problem: The "Join the discord" button had poor contrast in dark mode. The button text was using var(--text-header-color) which resolves to a very light color (#ffeaee) in dark mode, making it nearly invisible against the light gray button background (#e5e2ed). Additionally, the hover state had poor contrast.

Solution:

• Base State (Lines 148-151): Added .dark-mode a.link-boxes { color: #000; } to force black text in dark mode for proper contrast against the light background
• Hover State (Lines 153-158): Added body.dark-mode .link-boxes:hover and body.dark-mode a.link-boxes:hover rules with:
  • Background color: #2a1f4a (darker purple for visual feedback)
  • Text color: #f5eaff (light purple for contrast)
  • Used !important flags and body.dark-mode selector for higher specificity to override base hover styles

Impact: The "Join the discord" button now has readable black text in dark mode, and the hover state provides clear visual feedback with proper contrast.

---

2. Next/Previous Buttons (.click-button) - Dark Mode Base State

Problem: The Next and Previous buttons had light text color (#e5e2ed) which provided poor contrast against the purple button background (#9c7ef3) in dark mode, making the text difficult to read.

Solution:

• Added .dark-mode .click-button { color: #000000; } rule (Lines 124-127)
• Forces black text color in dark mode for ADA compliance

Impact: Button text is now clearly readable in dark mode and meets accessibility contrast requirements.

---

3. Next/Previous Buttons (.click-button) - Dark Mode Hover State

Problem:

• The light mode hover rule (.click-button:hover) was applying in dark mode, causing conflicts
• The hover state had poor contrast with unreadable text

Solution:

• Scoped Light Mode Hover (Lines 129-134): Changed .click-button:hover to body:not(.dark-mode) .click-button:hover to prevent it from applying in dark mode
• Added Dark Mode Hover (Lines 136-142): Created body.dark-mode .click-button:hover rule with:
  • Background color: #9c7ef3 (same as base color - no visual change on hover)
  • Text color: #ffffff (white for maximum contrast)
  • Used !important flags and body.dark-mode selector for higher specificity

Impact: Hover state now works correctly in dark mode with readable white text, and light mode hover no longer conflicts.

---

4. "Thanks for Joining!" Box (.thanks-box, .thanks-message) - Dark Mode

Problem: The "Thanks for Joining!" message box had text color that was too similar to the light purple background (#beb8eb80), making the text nearly invisible in dark mode.

Solution:

• Added .dark-mode .thanks-box rule (Lines 186-190) with:
  • Background color: #3d3061 (darker purple for better contrast)
  • Text color: var(--text-subtitle-color) which resolves to #beb8eb (matches the step text color above for visual consistency)

Impact: The "Thanks for Joining!" message is now clearly readable in dark mode and maintains visual consistency with the step labels above it.

[elimelt]

not sure why the action is failing, seems unrelated to your changes though