Material3 Themes UI Upgrade

[gabriel-vanca]

Changelog:

1. This updates MaterialDesignThemes.MahApps.
2. This now requires Material 3 so it makes the required changes in App.xaml and MainWindows.xaml in that regard.
3. I've also increased slightly the height of the MainWindow.
4. Font has been changed from the ugly Consolas to Source Code Pro (https://github.com/adobe-fonts/source-code-pro) which is more clear-looking. Presumably the installer will need to pack this font.
5. It also cleans up the files a bit and adds some clarifying comments.

⚠️ Note that this changes the look of the UI. I didn't change any of the colours myself, this is simply how Material 3 looks.
See below the new look. I'm not thrilled about it, but think it's an improvement over the old one.

Dark Mode:

Light Mode (does anyone still use this?):

🗒️ Note: Ignore the top header, that's just from the VS XAML debugger.

Old font (Consolas):

New font (Adobe Source Code Pro):

[coenm]

Thanks for the effort. It's a lot for me right now to review using the Github webpage. Probably after the weekend i will checkout this PR on my machine in order to do a good review.

[coenm]

This is how it looks like on my machine. So that would be the light mode i guess ;-)

[gabriel-vanca]

Yep, that's light mode. I'd suggest locking it in Dark Mode for now as the Light Mode is neither light nor very clear (black text on dark grey background).

  <!--  Material Design  -->
  <materialDesign:BundledTheme
      BaseTheme      = "Inherit"
      PrimaryColor   = "LightBlue"
      SecondaryColor = "LightBlue"
      />

would simply need to be changed to:

  <!--  Material Design  -->
  <materialDesign:BundledTheme
      BaseTheme      = "Dark"
      PrimaryColor   = "LightBlue"
      SecondaryColor = "LightBlue"
      />

(lines 34-39 in App.xaml)

Maybe I can do a more comprehensive UI redesign at a later point which includes a proper Light Mode and that embraces WinUI3 and Fluent design.

[coenm]

My current version looks like:

Which I like.

I'm happy to accept a PR that is updating the UI, but not if the light mode has black text like it has right now. I'm not using the black/dark mode and I don't like forcing others to do so

[coenm]

In your PR, can you remove the this. keyword?

[gabriel-vanca]

In your PR, can you remove the this. keyword?

✅ Done.

[coenm]

My current version looks like:

Which I like.

I'm happy to accept a PR that is updating the UI, but not if the light mode has black text like it has right now. I'm not using the black/dark mode and I don't like forcing others to do so

Is it possible for you to make the text white in light mode (as it was). Then can accept your PR and merge this into main.
I really like you worked the UI as it is not my 'thing'.

Also the text in the help menu and the hamberger menu have black text.

[gabriel-vanca]

Sure, I'll look into getting the UI right, including light mode. Apologies, I only saw your comment from 3 days ago now. GitHub notifications only showed me the comment about "this" for some reason 😅

[gabriel-vanca]

Recommending this PR is superseded by PR #184

[sonarqubecloud]

Quality Gate failed

Failed conditions
C Reliability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE