Improve Menu Contrast and Brightness in Dark Mode

[Bonapara]

Current Behavior

In dark mode, the menu borders are currently darker than the content, and the menu background appears too light.

Contrast is set to 50% in both light and dark mode

backdrop-filter: blur(12px) saturate(200%) contrast(50%) brightness(130%);

Desired Behavior

Contrast should be set to 100% in dark mode:

backdrop-filter: blur(12px) saturate(200%) contrast(100%) brightness(130%);

[greptile-apps]

Disclaimer: This comment was automatically generated with AI. It can give some useful hints as to where to look for, but sometimes it can also give very inaccurate answers so takes this with a pinch of salt :).
To improve the menu contrast and brightness in dark mode, update the CSS properties in the relevant theme files:

1. Modify OverlayBackground.ts to include the desired backdrop-filter properties for dark mode:

// OverlayBackground.ts
const darkModeStyles = {
  backdropFilter: 'blur(12px) saturate(200%) contrast(100%) brightness(130%)',
  // other styles
};

2. Ensure BackgroundDark.ts and BackgroundLight.ts are consistent with the new design requirements.

References

[Bonapara]

@charlesBochet, wouldn't this break the design system? How would you implement it?

[its-id]

I think I might have done similar fixes in the past. Awaiting here.

Can I take a look?

[FelixMalfait]

Thanks @its-id! Assigning you

[Bonapara]

Hi @its-id are you still on it?

[its-id]

Hi,
really sorry for the delay. was busy for the past weeks due to personal reason. will complete by today.

[Bonapara]

Thanks @its-id 🙏

[its-id]

I think this issue has already been fixed 3 days ago.

can you confirm? @Bonapara

once again, am really sorry for the delay. will not happen again.

[Bonapara]

Don't worry, and thanks for contributing! Yes, it seems to have been fixed.