Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dark mode #299

Merged
merged 9 commits into from
May 14, 2024
Merged

Dark mode #299

merged 9 commits into from
May 14, 2024

Conversation

LilithSilver
Copy link
Contributor

Closes #298.

Screenshots:
image
image
image

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.

Copy link

codecov bot commented May 7, 2024

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
Copy link
Owner

Tyrrrz commented May 7, 2024

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.

image

Maybe lowering the opacity would serve as a universal solution?

Otherwise, it looks really nice :)

LightBulb/App.axaml Outdated Show resolved Hide resolved
@@ -156,7 +166,8 @@
MinWidth="24"
HorizontalAlignment="Right"
DockPanel.Dock="Right"
Theme="{DynamicResource CompactTextBox}">
Theme="{DynamicResource CompactTextBox}"
Classes.accent="{DynamicResource UseAccentControls}">
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm what does this do on text box?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@LilithSilver
Copy link
Contributor Author

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
Copy link
Owner

Tyrrrz commented May 8, 2024

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
Copy link
Contributor Author

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.

</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">
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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">

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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}">
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@Tyrrrz Tyrrrz merged commit bf98eb1 into Tyrrrz:master May 14, 2024
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Support dark mode
2 participants