Custom colors for Mail app with dark theme from accessibility

ℹ️ Support
1

Nextcloud version (eg, 12.0.2): 18.0.3
Operating system and version (eg, Ubuntu 17.04): Raspbian 10 buster
Apache or nginx version (eg, Apache 2.4.25): nginx 1.10.3
PHP version (eg, 7.1): 7.3

The issue you are facing:

I am using the Dark theme from the Accessibility app.
In the mail app, I have two colors which I would like to change:

  • Active mail folder
    This is currently #161823, and I honestly don’t know where it comes from. I tried this:
    .app-mail #accounts-list .active { background-color : #ccc !important; }
    Even if it shows in the console, it looks like overridden by a strange color from body#body-user.dark.

  • Default background color for HTML mail messages
    Since badly formatted HTML mails don’t have a defined background color, I would like to define a lighter one. I tried
    .app-mail iframe#message-frame body { background-color : #ccc !important; }
    It doesn’t work, but since we are in a iframe, I’m not sure, I could go this way.

Steps to replicate it:

  1. Install Mail app
  2. Install Custom css app
  3. Enable Dark theme in Accessibility

Conclusion

Is there any chance I can change these two colors with the custom css engine ?

Thanks for your comments.

Regards

2

Hi,

  • Active mail folder
    The reason this isn’t working for you is because the styling you are trying to override is defined for 2 child elements of the one you have styled. Try this instead:
.app-mail #accounts-list .app-navigation-entry.active > a,
.app-mail #accounts-list .app-navigation-entry.active > a ~ .app-navigation-entry__utils {
    background-color: #ccc !important;
}
  • Default background color for HTML mail messages

You are correct that iframes can’t be styled, but I think I get what you’re trying to do. You can more or less defined a background colour for the top level iframe, which in this situation prevents the “floating” scroll bar. For that, this is all you need:

.app-mail iframe#message-frame {
    background-color: #ccc !important;
}

I hope that helps.

3

Thank you very much, mwalbeck.

Both worked perfectly.
I just set the accounts-list to #333 and the mail bg to #444.

I actually missed the style was on the anchor and not on the li item.
And I didn’t try to get one step up the body.

Thanks for digging into this

1 Like