SideNavigation Dark Theme Font is not eye friendly.

[dicksonpun]

Is there a way to make the text "pop" more in dark mode?

[dicksonpun]

I ended up figuring a workaround. I wrapped the SideNav using a ColorZone. Hope it helps others!

[dicksonpun]

Actually I'm going to re-open this issue for visibility for a real fix. This workaround is only for color zones of Light (lesser of 2 evils but also unusable for bright primaries like yellow and lime) and PrimaryLight (barely usable) . All other combinations are unusable.

[spiegelp]

@dicksonpun As I understand your posts, you need other colors for the text and highlight border to get more contrast. Try to set the SelectionForeground, SelectionBackground and NavigationItemFeedback properties of the SideNavigation.

Please let me know if this solves your issue.

[dicksonpun]

Thanks for the prompt response. This partially addresses my issue. It helps address the colors regarding the selected item. The part I'm still having a roadblock on is how to set the unselected/unselectable items like unselected FirstLevelNavigationItems and SubheaderNavigationItems. Any ideas?

[spiegelp]

@dicksonpun The SideNavigation looks fine in the demo app. The templates use dynamic resources as the foreground, which will be set inside the specific theme resource dictionary.

I think that something in your app setup or control styles messes up the text block foreground. You might have a conflicting style definition in your app. Do you have an own definition for MaterialDesignNavigationItemSubheader or MaterialDesignNavigationItemText? Do you use the predefined classes for the items or do you use any custom classes implementing the necessary interface?

If you do not find any problems on your own, could you please attach a sample project with the reproduced behavior? I can do a much better analysis with the full source code.

[dicksonpun]

I think that something in your app setup or control styles messes up the text block foreground. You might have a conflicting style definition in your app.

Ahh I think that sounds very plausible.

I was referencing this github project (Bachup) for the style and themes in my learning demo project. I wonder if the way this project implemented the style conflicts/overrides the predefined settings.

I've since switched to using the ColorTool example in the MaterialDesignInXamlToolkit for in my non-learning project (not public on Github unfortunately). I haven't had a chance to experiment with the SideNavigation with the ColorTool in that project yet.

Not-related but kinda, something I did notice was that the dark modes seem different between these Demos and I'm not sure why:

If you don't mind taking a quick look see if anything sticks out to you in my demo project, I'd appreciate it. Please let me know if I goofed up the settings, I'd be interested in learning what I did wrong. Thanks!

[spiegelp]

@dicksonpun The dark modes look different because of a different brush for the background. Material Design Extensions uses Background="{DynamicResource MaterialDesignBackground}" while Material Design in XAML uses Background="{DynamicResource MaterialDesignPaper}" instead. Both projects define the background in their MainWindows.xaml.

I was very busy the last two weeks. I hope that I can have a deeper look into your demo project this week.

[spiegelp]

@dicksonpun

• Your configuration seems to be fine.
• I would remove the ColorZone from inside the drawer, because it is a temporary hack solution.
• If you are having problems with colors, it is usually an issue with conflicting resources. Just try to add the desired theme resources into the problematic control's resources. See StepperControl.xaml line 102 of the demo for an example.

[dicksonpun]

@spiegelp

Thank you for looking at this issue. Your recent comments helped point me in the right direction. I ended up figuring out how to properly resolve this issue, in case you were interested.

App.xaml As it turns out I did not include the DarkTheme counterpart in the MergedDictionary section. Even when I did, (you may already know this) it appears as though the ResourceDictionary is loaded in sequential order such that it favors the last loaded item.

CASE 1 (DarkTheme is loaded first, followed by LightTheme) As you can see the LightTheme looks great, and the DarkTheme not so much.

CASE 2 (LightTheme is loaded first, followed by DarkTheme) As you'd expect the observed pattern is consistent here.

SOLUTION! App.xaml Only add either the LightTheme or DarkTheme ResourceDictionary.

<Whatever file/function is handling the Theme switch event> Add logic to update the ResourceDictionary before setting the Theme. Someone smarter than me can probably optimize it but for now... it works!