iNKORE-NET/UI.WPF.Modern

[Bug] Accent Color Seems off in Dark Mode

Closed this issue · 2 comments

taselanco commented

Describe the bug
Accent color for buttons and other elements does not look right under dark mode. It is specially noticeable on buttons because it does not work too well with the black foreground text.

It's a bit confusing because of all the design recommendations such as WinUI2, WinUI3, Fluent Design 1 & 2. I'm not sure which one this library goes by, but in any case the UI does not feel 100% right.

Taking this as reference: https://learn.microsoft.com/en-us/windows/apps/design/signature-experiences/images/color_dark_controls_940.png

You can see that the accent blue is a brighter / more pale shade that works a little better under black text. Compared to the UI using this library, which uses a darker blue.

In the mean time, I also wonder if you can recommend a method to override these colors in my application, but only for dark mode, taking into account that it allows the user to switch between light and dark dynamically at runtime. I use the ThemeManager class for that.

To Reproduce
Steps to reproduce the behavior:

  1. Modify the starter kit app to use dark mode: https://github.com/iNKORE-NET/UI.WPF.Modern/blob/main/samples/StarterKit/MainWindow.xaml, specify ui:ThemeManager.RequestedTheme="Dark"
  2. Run the app
  3. Compare button appearance to above image

Expected behavior
The background accent color should have a higher contrast ratio against black text.

Screenshots
image
image

Desktop (please complete the following information):

  • Device: PC
  • OS: Windows 10 [Version 10.0.19045.5073]
  • Browser (Not applicable)
  • iNKORE.UI.WPF.Modern.Controls.dll [0.9.30.0]
  • iNKORE.UI.WPF.dll [1.2.8.0]
NotYoojun commented

It looks correct on my machine:

image

How did you apply the accent style? My code is below:

<Window x:Class="StarterKit.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:StarterKit" 
        xmlns:ui="http://schemas.inkore.net/lib/ui/wpf/modern" 
        xmlns:ikw="http://schemas.inkore.net/lib/ui/wpf"
        ui:WindowHelper.UseModernWindowStyle="True"
        ui:WindowHelper.SystemBackdropType="Mica"
        ui:TitleBar.Height="36"
        mc:Ignorable="d"
        ui:ThemeManager.RequestedTheme="Dark"
        Title="Welcome!" Height="450" Width="800" WindowStartupLocation="CenterScreen">
    <ikw:SimpleStackPanel VerticalAlignment="Center" Spacing="5">
        <TextBlock Text="Fluent Design is beautiful." FontSize="24" FontWeight="Bold" TextAlignment="Center"/>
        <TextBlock Text="But hey, we deserve it :-)" FontSize="20" TextAlignment="Center"/>

        <Button Content="Hello world!" HorizontalAlignment="Center" Margin="0,20,0,0"
                Style="{StaticResource {x:Static ui:ThemeKeys.AccentButtonStyleKey}}"/>
    </ikw:SimpleStackPanel>
</Window>
taselanco commented

on my machine

Every. Single. Time.

Based on that clue, I just found out that the accent color in this library actually follows the user's preferences. It even updates the UI if I change Windows's settings while the app is running. Very nice. For some reason, I thought the accent color was based on a default in the library itself, that could be customized only at the app level perhaps.

image
It looks better now. Unfortunately, I have no idea what was the OS-level color I had before. It certainly wasn't any of the preset shades of blue.

image

Thanks for the reply. I think we can close this issue.

  • 👍1