Background is too dark in Light Mode

[kristofferR]

The color of the background of the window seems to match pretty close to how the command-tab background looks in Dark Mode, but in Light Mode it just looks out of place, it's way too dark.

It should preferably match the color of command-tab in Light Mode too.

[gingerr]

Maybe an auto detection of the light/dark mode state of the system and in addition explicit choice of a light and dark variant could be a solution here. Theme in Preferences could list all 6 combinations or be splitted in two options (Theme/Style? and Brightness).

Theme

• macOS: Light
• macOS: Dark
• macOS: Auto
• Windows 10: Light
• Windows 10: Dark
• Windows 10: Auto

or

Theme (Style?)

• macOS
• Windows 10

Brightness

• Light
• Dark
• Auto

[lwouis]

It's extremely easy to make a new theme. You need to add one line here basically. So a first pass on this ticket would be to add one line for the macOS light theme which is what the OP wants.

Now regarding the initial assessment that alt-tab is not matching the native command-tab UI, i'm very aware of that. If you notice, command-tab has the app name outside of the highlight background color. This means that they can get away with readable text easier. In alt-tab case, the highlight color goes behind the text and creates readability challenges.

It would be nice to have OP provide mockups, or even better a PR to showcase what they would like, as the color are difficult to pick once you take contrast into account

[lwouis]

Note that in the v3 branch #114, I enhanced the contrast a little

[rbnis]

Maybe we could simply a different window material, for example popover. This would automaticaly change when dark mode is turned on/off.
Also the material dark, which is currently used, is deprecated.
One problem tough would be to also change text color if needed.

[lwouis]

@Robinhuett you mention that the text would also need to change. The highlight color (background on the macOS theme, and border in the Windows theme) would also need to change. Also the shadows color.

I tried to play with it the other day. A theme would look like this (3 more values at the end):

case "theme":
  let p = try themeMacro.labelToMacro[value].orThrow()
  cellBorderWidth = p.preferences.0
  cellCornerRadius = p.preferences.1
  windowCornerRadius = p.preferences.2
  highlightBorderColor = p.preferences.3
  highlightBackgroundColor = p.preferences.4
  windowMaterial = p.preferences.5
  fontColor = p.preferences.6
  shadowsColor = p.preferences.7

This is me trying to see how a macOS light theme would look like:

static let themeMacro = MacroPreferenceHelper<(CGFloat, CGFloat, CGFloat, NSColor, NSColor, NSVisualEffectView.Material, NSColor, NSColor)>([
  MacroPreference(" macOS (dark)", (0, 5, 20, .clear, NSColor(red: 0, green: 0, blue: 0, alpha: 0.4), .dark, .white, .darkGray)),
  MacroPreference(" macOS (light)", (0, 5, 20, .clear, NSColor(red: 0, green: 0, blue: 0, alpha: 0.2), .light, NSColor(red: 0, green: 0, blue: 0, alpha: 0.8), .white)),
  MacroPreference("❖ Windows 10", (2, 0, 0, .white, .clear, .dark, .white, .darkGray))
])

Making a theme is a simple as changing the values on one line. The problem is finding a combination of colors that is both aligned with macOS consistency, for instance with the built-in app-switcher, but also is usable (i.e. text can be read, and selected window can be noticed).

If someone wants to play with colors and suggest a PR, that would be great. As I said it's just a few lines of code as seen above. It's not a technical PR; more a UI/UX PR. Personally I'm struggling to find the right combination. The built-in app-switcher has some tricks it uses like changing the text color depending on the background. Look at the nuances in these screenshots:

They are changing the text color pixel-by-pixel. I don't know how they are doing that. Some kind of blending mode I think. It would be interesting to find out if there is a reasonably easy way to do this with high-level APIs (I would like to avoid resorting to OpenGL/Metal for text rendering if possible).

Also I'm not sure if the background of the selected app is a simple translucent color. It seems to me that it goes darker on light background and lighter on dark background in a way that additive blending doesn't do.

Lastly, consider that while people usually praise Apple on design, I would argue here that the text of their app-switcher doesn't always have enough contrast. I don't think it would not pass the WCAG for example. My point being that we can do better

[guillaume-d]

Maybe a usable workaround for other mere users like me in the meantime:
"Preferences…" > "Appearance" tab -> "Theme: Windows 10" (in that one case more ergonomic than MacOSX! 😉)
Once done at least the "focusing border" is clearly visible over both white and black backgrounds here.

[lwouis]

I think #126 really helped. I also increased contrast over time. I think at this point the macOS theme is clear for most people. As I detailed above, providing a light theme, or another color strategy is a whole other discussion where I'm still waiting for other people to tell me how that would work in practice.

If you have a precise idea of what you think would improve this topic, please feel free to write it here or open a fresh ticket and develop it in details. If it's good I'll probably implement it. Keep in mind changing color is not a lot of work in terms of code. It's the ergonomics design, experimentation and detailed specification that's hard.