Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accent color and dark mode platform settings #9913

Merged
merged 15 commits into from Jan 17, 2023
Merged

Conversation

maxkatz6
Copy link
Member

@maxkatz6 maxkatz6 commented Jan 6, 2023

What does the pull request do?

This PR implements new low-level API for next features:

  • Get current dark theme preference and accent color(s).
  • Listen for changes of these color values
  • Possibility to apply theme to the OS window/view, if it was changed by the app and not the system

New low-level API:
(Higher level API will come later in 11.0, at least for dark theme, see #8166, where this API will be actively used)

public enum PlatformThemeVariant
{
    Light,
    Dark
}
public enum ColorContrastPreference
{
    NoPreference,
    High
}
public record PlatformColorValues
{
    public PlatformThemeVariant ThemeVariant { get; init; }
    public ColorContrastPreference ContrastPreference { get; init; }
    public Color AccentColor1 { get; init; }
    public Color AccentColor2 { get; init; }
    public Color AccentColor3 { get; init; }
}
public interface IPlatformSettings
{
// ...
    PlatformColorValues GetColorValues();
    event EventHandler<PlatformColorValues>? ColorValuesChanged;
// ...
}

public interface ITopLevelImpl
{
// ...
    void SetFrameThemeVariant(PlatformThemeVariant themeVariant);
// ...
}

Platform details

Windows

Straightforward implementation. But only Win10 supported for reasons of maintability.

win.mp4
macOS

Also, a straightforward implementation. But a bit painful with all of these Obj C.
Note, this video is recorded from another branch (ThemeDictionary one), but it uses the same low level implementation as here.

mac.mp4
Linux (FreeDesktop)

Only works if distro implements newest (~2021) standard of FreeDesktop. GTK and others specific settings are ignored.
Accent colors are not supported, and frame theme isn't changeable from the app (not sure if it's possible, if anybody wants to help - please do).
No high contrast support.

lin.mp4
Browser

Only preferred dark mode changes API is implemented. There is no readable accent colors API in the web standard.

wasm.mp4
Android

Dark mode, accent colors (up to three different accent colors) are supported.
Status bar color changes are not there, as we don't have ready API for the status bar anyway.

android.mp4
iOS

Status bar status is the same as with android.

There is no video, "just trust me, it works".

Fixed issues

Fixes #4026
Fixes #9560
Fixes #3695

@maxkatz6 maxkatz6 requested a review from a team January 6, 2023 07:46
@avaloniaui-team
Copy link
Contributor

You can test this PR using the following package version. 11.0.999-cibuild0028282-beta. (feed url: https://pkgs.dev.azure.com/AvaloniaUI/AvaloniaUI/_packaging/avalonia-all/nuget/v3/index.json) [PRBUILDID]

Copy link
Contributor

@emmauss emmauss left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, other than a couple comments. I've tested it on windows 11 and android, and it works as described.

samples/ControlCatalog/MainView.xaml.cs Outdated Show resolved Hide resolved
src/iOS/Avalonia.iOS/AvaloniaViewController.cs Outdated Show resolved Hide resolved
@hez2010
Copy link
Contributor

hez2010 commented Jan 6, 2023

For better accessibility, how about adding a HighContrast value to PlatformThemeVariant

@maxkatz6 maxkatz6 requested a review from emmauss January 7, 2023 03:40
@avaloniaui-team
Copy link
Contributor

You can test this PR using the following package version. 11.0.999-cibuild0028348-beta. (feed url: https://pkgs.dev.azure.com/AvaloniaUI/AvaloniaUI/_packaging/avalonia-all/nuget/v3/index.json) [PRBUILDID]

@maxkatz6 maxkatz6 requested a review from a team January 8, 2023 02:32
@maxkatz6 maxkatz6 requested a review from emmauss January 8, 2023 20:07
@avaloniaui-team
Copy link
Contributor

You can test this PR using the following package version. 11.0.999-cibuild0028434-beta. (feed url: https://pkgs.dev.azure.com/AvaloniaUI/AvaloniaUI/_packaging/avalonia-all/nuget/v3/index.json) [PRBUILDID]

@maxkatz6 maxkatz6 merged commit 8125894 into master Jan 17, 2023
@maxkatz6 maxkatz6 deleted the color-platform-settings branch January 17, 2023 01:02
@avaloniaui-team
Copy link
Contributor

You can test this PR using the following package version. 11.0.999-cibuild0028684-beta. (feed url: https://pkgs.dev.azure.com/AvaloniaUI/AvaloniaUI/_packaging/avalonia-all/nuget/v3/index.json) [PRBUILDID]

@laolarou726
Copy link
Contributor

@maxkatz6 It seems ColorValuesChanged event failed to fire when dark mode settings changed. Using the latest Avalonia nightly build with Windows 11 22H2.

@maxkatz6
Copy link
Member Author

@laolarou726 can you debug if WM_SETTINGCHANGE in Win32Platform.WndProc is raised for you?
It works perfectly fine for me on 22H2 (22621.1105).

@maxkatz6
Copy link
Member Author

Instead of WM_SETTINGCHANGE we can handle WinRT UISettings.ColorValuesChanged COM event. But writing a com wrapper for that will be more time-consuming comparing to WM_SETTINGCHANGE which also should just work.

@laolarou726
Copy link
Contributor

Instead of WM_SETTINGCHANGE we can handle WinRT UISettings.ColorValuesChanged COM event. But writing a com wrapper for that will be more time-consuming comparing to WM_SETTINGCHANGE which also should just work.

I'm also using the same system version, the event will fire when accent color changed. But not when dark mode settings changed? How should I capture WM_SETTINGCHANGE message?

@laolarou726
Copy link
Contributor

Instead of WM_SETTINGCHANGE we can handle WinRT UISettings.ColorValuesChanged COM event. But writing a com wrapper for that will be more time-consuming comparing to WM_SETTINGCHANGE which also should just work.

nvm, I made a stupid mistake. The event is perfectly fine. Sorry about that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Feature: Theme-awareness Equivalent of UISettings System Theme Support
6 participants