microsoft-ui-xaml
microsoft-ui-xaml copied to clipboard
Why is the window edge bright stroke on the outside of the window in dark mode instead of the inside?
The Appearance Now
In macOS,the windows have a light stroke inside and a dark one outside while the windows have a light stroke outside. It's confusing.
In macOS, the white semi-transparent stroke is on the inside of the window, and the black semi-transparent stroke is on the outside of the window combined with the drop shadow. This not only ensures that the projection and the window are natural, but also ensures that the layers are clear when the windows are superimposed.
What Should we do
https://developer.apple.com/videos/play/wwdc2018/210/?time=537 (08:57)
"Next, we took a look at the rim shadows and saw what changes we needed to do for those, and the changes that we did for Dark Mode where we adjusted the opacity to make them a little bit higher so that the contrast edge was more defined and that we made them a little bit crisper. To further the focus and the edge detail on the windows, we added an inner rim stroke to the windows to really help define the windows and pop them off. The end result is that the visual cue still looks very similar to the light appearance, but the end result has been finely tuned for dark appearance so that it works much better."
The Prinple of Drawing
I know part of the reason here is that since Windows 8, that edge is part of the window's accent color. But that doesn't really tell the story, because even then, as of today, it should be a white inner stroke instead of a white outer stroke.
The defect of white outer stroke + black shadow is obvious, compared to the white inner stroke, it can not clearly show the window hierarchy, it gives a strange feeling. The white stroke inside the window + black outer stroke + black projection is very clear, just like the reflection + projection of the dark part of the object in the sketch.
The green arrow is the reflection of the dark part of the object (like the white translucent inner stroke), the red arrow area is the darkest projection (like the black translucent outer stroke), and the blue arrow is the shadow that fades out (like the window projection)