Dark mode

[LilithSilver]

Closes #298.

Screenshots:

Notes:

• Colors are up for debate, feel free to make tweaks.
• This upgrades Avalonia.Material to 3.6; dark mode needs the toggle button rework to be legible.
• All the controls switch to accent color-mode in dark mode, with a boolean resource at the application theme level. TextBox and Slider didn't have the accent color-mode built in for some reason, so I added some extra styling.

Question: Do we want/need to have a specific light/dark theme toggle? Currently, it follows the system theme.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.35%. Comparing base (0dd6505) to head (90ee7bb).

Additional details and impacted files

@@           Coverage Diff           @@
##           master     #299   +/-   ##
=======================================
  Coverage   96.35%   96.35%           
=======================================
  Files           7        7           
  Lines         192      192           
  Branches       15       15           
=======================================
  Hits          185      185           
  Misses          6        6           
  Partials        1        1           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[Tyrrrz]

Thanks for the PR.

Yes, I think there should be a switch in the advanced settings section (after "Start with Windows").

As for colors, I think the sundial brushes need to be adjusted to be darker in dark mode, as they create too much contrast right now.

Maybe lowering the opacity would serve as a universal solution?

Otherwise, it looks really nice :)

[Tyrrrz]

Hmm what does this do on text box?

[LilithSilver]

Two things: it changes the selection cursor, and it changes the underline, both to the secondary color.

[LilithSilver]

Yes, I think there should be a switch in the advanced settings section (after "Start with Windows").

Will do.

As for colors, I think the sundial brushes need to be adjusted to be darker in dark mode, as they create too much contrast right now.

I already did some adjustment, they're much darker - I was having trouble going darker without them looking "muted" and losing their glowy feel. Could you maybe suggest some colors?

[Tyrrrz]

I already did some adjustment, they're much darker - I was having trouble going darker without them looking "muted" and losing their glowy feel. Could you maybe suggest some colors?

Could you share what it looks like now? Or is it the same as in the original post?

[LilithSilver]

Could you share what it looks like now? Or is it the same as in the original post?

Same as the original post. It looks OK on my end and on my phone, but colors tend to be different on different monitors.

[Tyrrrz]

Why 14 here?

Suggested change

	<DockPanel Margin="0,14,0,0" ToolTip.Tip="Keep LightBulb updated by automatically installing new versions as they become available">
	<DockPanel Margin="0,16,0,0" ToolTip.Tip="Keep LightBulb updated by automatically installing new versions as they become available">

[LilithSilver]

The spacing for the dropdown selector is weird by default and this was the best way I could figure to adjust it. Margins on the combo selector itself wasn't working properly.

[Tyrrrz]

Let's not assign accent like that and instead due it either globally in the templates, or just keep to the default look and feel of the dark theme (without accents).

[LilithSilver]

As far as I can tell, there's no way to add a class globally, and Material.Avalonia uses classes exclusively to denote primary vs. accent theme colors. Is there a way to specify it in the template you're aware of?

The primary color doesn't meet accessibility standards for control contrast against the backdrop, unfortunately. We'd have to change the primary color to something else, and then edit the sidebar/header/border/etc to specifically show a different color than primary while in dark mode. That seems like a more convoluted solution to me, but I guess I could try.

[Tyrrrz]

Let's keep it this way for now, I think I'll try a better solution later