Dark mode too dark, light mode too light

[saumyasinghal747]

I introduced myself in a previous issue also, I'm the author of YMath.io. There, I have programmed my own dark mode using CSS variables but want to switch over to Halfmoon because I'm redoing the site. I was feeling that there are some improvements that could be made to the Halfmoon dark mode.

1. For one, I highly recommend using Apple's Human Interface Guidelines for light and dark mode for the different colors.
2. If you don't do that, then what really matters is depth. The dark mode is good in the sense that different components are different greys. But when I switch to light mode, everything is white. It would definitely help to keep the depth that you introduced in dark mode when the user enables light mode. YMath uses Apple's colors to do this, for example, notice how there are 3 different shades used here:

Discord is also a site that has written a great light/dark transition, although they are quite blue.

This framework is going in a great direction, keep it up! I especially love the sidebar!

[halfmoonui]

I will use this issue to explain the design choices I made regarding the light mode and dark mode, specifically in relation to the depth:

• In light mode, everything is white, that much is true.
• In dark mode, different sections have different shades of gray, but this is not for depth. If it was, the card would be lighter than the background, but it is actually darker. The different components have different colors for the sake of readability and visual separation. Having them be the same color (like in light mode) would blend everything together, unless a light border is used between them, and I did not want to use a light border to separate the main sections in dark mode. It is a very generic look in my opinion.

What you are saying is a concept popularized by design systems such as Material Design, where the webpage is treated like a piece of paper with a light source on top. In such a system, cards would lay on top of the background, so it would be a lighter color than the background. However, Halfmoon is not a design system, and personally, I think the current design maximizes readability while keeping the sections separate and distinct. It can be argued that having the background be gray in light mode (instead of white) would make the text harder to read, because the contrast would go down.

Moreover, I think a lot of times, the use of depth brings almost nothing beneficial in terms of usability, because a webpage is not a piece of paper with a light source on top. The only thing I personally care about is keeping the sections distinct and separate, and making sure everything is readable and nice to look at. The separation can be achieved by nice strong borders, different background colors, box shadows, whatever. But again, that is just my opinion and I am not a fan of those types of design systems.

In any case, this is probably one of those things that really comes down to personal preference. In your case, if you want your version of Halfmoon to look like what you described, all you have to do is change the --lm-base-body-bg-color variable.

[halfmoonui]

Since I have explained the design choices I made regarding the light mode and dark mode, I will go ahead and close this issue. You can re-open it if you think the issue is still not resolved, or open another issue. Thank you.