Dark mode #299
Dark mode #299
Conversation
Codecov ReportAll modified and coverable lines are covered by tests ✅
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. |
|
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 :) |
| @@ -156,7 +166,8 @@ | |||
| MinWidth="24" | |||
| HorizontalAlignment="Right" | |||
| DockPanel.Dock="Right" | |||
| Theme="{DynamicResource CompactTextBox}"> | |||
| Theme="{DynamicResource CompactTextBox}" | |||
| Classes.accent="{DynamicResource UseAccentControls}"> | |||
There was a problem hiding this comment.
Hmm what does this do on text box?
There was a problem hiding this comment.
Two things: it changes the selection cursor, and it changes the underline, both to the secondary color.
Will do.
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? |
Same as the original post. It looks OK on my end and on my phone, but colors tend to be different on different monitors. |
LightBulb/ViewModels/Components/Settings/AdvancedSettingsTabViewModel.cs
Outdated
Show resolved
Hide resolved
| </DockPanel> | ||
|
|
||
| <!-- Auto update --> | ||
| <DockPanel Margin="0,16,0,0" ToolTip.Tip="Keep LightBulb updated by automatically installing new versions as they become available"> | ||
| <DockPanel Margin="0,14,0,0" ToolTip.Tip="Keep LightBulb updated by automatically installing new versions as they become available"> |
There was a problem hiding this comment.
Why 14 here?
| <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"> |
There was a problem hiding this comment.
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.
| DockPanel.Dock="Right" | ||
| ItemsSource="{Binding ThemeArray}" | ||
| SelectedItem="{Binding Theme}" | ||
| Classes.accent="{DynamicResource UseAccentControls}"> |
There was a problem hiding this comment.
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).
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
Let's keep it this way for now, I think I'll try a better solution later
Closes #298.
Screenshots:
Notes:
Question: Do we want/need to have a specific light/dark theme toggle? Currently, it follows the system theme.