Fix incorrect sidebar and sidebar item color

macosui / macos_ui

Flutter widgets and themes implementing the current macOS design language.

https://macosui.github.io/macos_ui/#/

MIT License

1.88k stars 183 forks source link

Fix incorrect sidebar and sidebar item color #484

Closed Adrian-Samoticha closed 10 months ago

Adrian-Samoticha commented 1 year ago

This PR fixes a bug that caused the sidebar to appear darker than intended and attempts to make the sidebar items mimic the color of macOS’ native sidebar items more closely.

This is what the example app now looks like in light mode with the accent color set to green:

Unfortunately, the colors appear a little off, particularly when the window is placed on top of a dark background. This is because the sidebar is still rendered beneath the sidebar items, which is not the case for native macOS apps. I could not find a solution to this issue.

Also, the color of the sidebar icons has remained the same and will be addressed on a future PR.

Pre-launch Checklist

[x] I have incremented the package version as appropriate and updated CHANGELOG.md with my changes
[ ] I have added/updated relevant documentation
[ ] I have run "optimize/organize imports" on all changed files
[ ] I have addressed all analyzer warnings as best I could

Adrian-Samoticha commented 1 year ago

I just noticed that version 2.0.2 has been released which caused some merge conflicts. I’ll resolve those soon.

GroovinChip commented 1 year ago

@Adrian-Samoticha has an issue been filed for this bug? I'd like to see what it looks like prior to your changes - additionally, is this bug only present in light mode, or dark mode as well?

Adrian-Samoticha commented 1 year ago

@Adrian-Samoticha has an issue been filed for this bug? I'd like to see what it looks like prior to your changes - additionally, is this bug only present in light mode, or dark mode as well?

The sidebar appears darker than it should both in light and dark mode, though it is obviously more noticeable in light mode. The cause is that the CupertinoApp widget is drawing a transparent black rectangle beneath all its child widgets for some reason, and the fix was to wrap that sidebar’s content with a DecoratedBox with backgroundBlendMode: BlendMode.clear.

Here’s a screenshot from #471. This may not be the best image to showcase the effect, but I think the issue is visible:

The sidebar appears visibly darker than it would in a native macOS app.

I haven’t seen any issue related to that bug. In fact, I originally only intended to fix the color of the sidebar buttons in this PR, but the incorrect sidebar color was getting in the way of doing that, so I fixed it.

GroovinChip commented 1 year ago

Gotcha, thanks for the clarification. I'll try to review ASAP.

Adrian-Samoticha commented 1 year ago

Alright, merge conflicts resolved. :)