Dark mode Main page

Hi Amr, congratulations on the project!

I’d like to highlight an important point related to the use of dark mode, as it directly impacts usability, visual consistency, and interface hierarchy.

In your current layout, dark mode is applied mainly to the overall background, while key components such as cards, inputs, and secondary surfaces remain white. This creates a visual system inconsistency, making the interface feel more like an inverted light mode rather than a properly structured dark theme.

From a UI perspective, a well-executed dark mode is not just about switching the background to black. It requires working with a hierarchy of dark surfaces, where each interface layer — background, cards, inputs, modals, etc. — uses controlled variations of dark tones to maintain hierarchy, readability, and focus.

To address this, I recommend creating a small style guide that includes:

• A color palette for Light Mode
• An equivalent palette for Dark Mode
• A grayscale scale (e.g., background, surface, elevated surface, borders)

In this context:

• Cards should not be white, but rather a dark gray slightly lighter than the background, creating a sense of elevation.
• Inputs and form fields should also use dark surfaces, with well-defined borders, focus states, and placeholders to ensure contrast and accessibility.

This approach significantly improves:

• Visual hierarchy
• Information readability
• Focus on interactive elements
• Overall design system consistency

If you need anything, feel free to reach out — I’m happy to help!