Problem statement
When dark mode is enabled, the landing page's hero section does not fully adapt to the dark theme. The background remains predominantly light gray with bright gradients, making the interface look like a dimmed light theme instead of a true dark theme. This creates inconsistent visual styling, reduces text contrast, and negatively impacts the overall user experience. The hero section should switch to a darker background with appropriate gradients and contrast to maintain consistency across the application.
Proposed solution
Update the hero section to properly support dark mode by applying dark-specific background colors, gradients, and surface styles when the dark theme is active. Ensure that text, buttons, borders, and glow effects maintain sufficient contrast and align with the rest of the application's dark design. This can be implemented using theme-aware styling (e.g., conditional CSS classes or CSS variables) so that the hero section automatically switches between light and dark variants based on the selected theme.
Alternatives considered
An alternative would be to simply darken the current hero section using a semi-transparent overlay. However, this would still leave the underlying light background and gradients visible, resulting in an inconsistent appearance. Another option is to reduce the brightness of the existing background, but that may not provide sufficient contrast or align with the rest of the dark theme. Implementing dedicated dark mode styles for the hero section is the most consistent and maintainable solution.
Additional context
The attached screenshots demonstrate the issue. In dark mode, the navigation bar correctly switches to a dark theme, but the hero section retains a light gray background with bright gradients. This results in poor visual consistency and makes the page appear as though a light theme has been dimmed rather than fully converted to dark mode. A dedicated dark background and adjusted gradients would provide a more cohesive user experience.
Screenshots:
Screenshot 1: Hero section in Dark Mode (current issue).
Problem statement
When dark mode is enabled, the landing page's hero section does not fully adapt to the dark theme. The background remains predominantly light gray with bright gradients, making the interface look like a dimmed light theme instead of a true dark theme. This creates inconsistent visual styling, reduces text contrast, and negatively impacts the overall user experience. The hero section should switch to a darker background with appropriate gradients and contrast to maintain consistency across the application.
Proposed solution
Update the hero section to properly support dark mode by applying dark-specific background colors, gradients, and surface styles when the dark theme is active. Ensure that text, buttons, borders, and glow effects maintain sufficient contrast and align with the rest of the application's dark design. This can be implemented using theme-aware styling (e.g., conditional CSS classes or CSS variables) so that the hero section automatically switches between light and dark variants based on the selected theme.
Alternatives considered
An alternative would be to simply darken the current hero section using a semi-transparent overlay. However, this would still leave the underlying light background and gradients visible, resulting in an inconsistent appearance. Another option is to reduce the brightness of the existing background, but that may not provide sufficient contrast or align with the rest of the dark theme. Implementing dedicated dark mode styles for the hero section is the most consistent and maintainable solution.
Additional context
The attached screenshots demonstrate the issue. In dark mode, the navigation bar correctly switches to a dark theme, but the hero section retains a light gray background with bright gradients. This results in poor visual consistency and makes the page appear as though a light theme has been dimmed rather than fully converted to dark mode. A dedicated dark background and adjusted gradients would provide a more cohesive user experience.
Screenshots:
Screenshot 1: Hero section in Dark Mode (current issue).