UI: "Get Started" button low contrast in dark mode — improve CTA visibility #793
Description
Describe the bug
Summary
In dark mode the "Get Started" button in the navbar has low visibility and contrast compared to the light-mode variant — it blends into the dark navbar and is harder to spot. See attached screenshots for light vs dark mode.
This reduces CTA prominence and may hurt usability/accessibility.
Please assign this issue to me and add the hacktoberfest label.
To Reproduce
- Open the site (desktop).
- Toggle to dark mode using the dark/light switch in the header.
- Observe the navbar at the top-right corner.
- Look at the "Get Started" button — it appears less visible/contrasty compared to the light-mode button.
Expected behavior
The "Get Started" button should remain clearly visible and attention-grabbing in dark mode, matching the CTA prominence in light mode. It should meet accessible contrast (WCAG AA) for text/background and behave consistently across themes.
Additional context
Suggested color options & CSS
I recommend keeping the same brand CTA color/gradient used in light mode, but add a subtle border and box-shadow in dark mode to improve contrast — or use a slightly brighter solid purple.
Option A (recommended — gradient like light mode):
- Gradient:
linear-gradient(90deg, #6B46FF 0%, #8B5CF6 100%) - Text:
#FFFFFF - Hover:
#5A3DE0 - Border:
1px solid rgba(255,255,255,0.08) - Focus ring:
rgba(107,70,255,0.14)
Option B (higher contrast solid):
- Background:
#7C6CFF - Text:
#FFFFFF
Example CSS to apply in dark theme
.dark .navbar .get-started-btn,
@media (prefers-color-scheme: dark) {
.get-started-btn {
background: linear-gradient(90deg, #6B46FF 0%, #8B5CF6 100%); /* or use #7C6CFF */
color: #ffffff;
border: 1px solid rgba(255,255,255,0.08);
padding: 8px 14px;
border-radius: 10px;
font-weight: 600;
box-shadow: 0 6px 18px rgba(107,70,255,0.16);
}
.get-started-btn:hover {
transform: translateY(-1px);
background: #5A3DE0;
box-shadow: 0 10px 26px rgba(90,61,224,0.20);
}
.get-started-btn:focus {
outline: none;
box-shadow: 0 0 0 4px rgba(107,70,255,0.12);
}
}