Skip to content

Issue: Poor Theme Adaptation for Header Elements (Dark/Light Modes) #754

@DanishIbrahimKhan

Description

@DanishIbrahimKhan

problem:

  • The light/dark mode toggle icon has very low contrast in both themes, making it hard to see.
  • The "Speak to an Expert" button looks identical in light and dark modes, lacking contrast and a proper hover/focus state.
  • These issues make the navigation feel visually inconsistent and hurt accessibility for visually impaired users.

1 Proposed Improvement:
Update the theme toggle icon:

  • Use a distinct sun (yellow/orange) and moon (blue/white) icon.
  • Add subtle background or hover highlights.
  • Ensure WCAG AA-level contrast ratios.

2 Adjust the "Speak to an Expert" button:

  • Use theme-adaptive colors (e.g., lighter button on dark mode, darker or bordered button on light mode).
  • Add hover/focus states for better usability.
  • Ensure consistent size and spacing with other nav items.

Screenshots (Current):
Light Mode (low contrast elements):

Image

Dark Mode (same issue):

Image

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions