Riverlea - set color-scheme in DynamicCss so system elements respect dark_mode setting

[ufundo]

Overview

Set the CSS color-scheme property to match your dark mode setting preference. This means system elements (like checkboxes) will respect this setting.

Note: Thames is currently setting light dark unconditionally. This means even if you set the Riverlea mode to "Always light", there are some leaks if your OS is set to dark mode.

Before

Drupal Garland, Riverlea Dark Mode = Always Light, OS Dark Mode ON

Note titles and checkbox backgrounds:

After

Same configuration as above:

Riverlea dark mode = Always Dark, OS Dark Mode = OFF or ON:

Note checkbox backgrounds are dark (obviously setting Always Dark is a bad idea when you are using Garland)

Other permutations work as expected.

cc @vingle @artfulrobot

[civibot]

🤖 Thank you for contributing to CiviCRM! ❤️ We will need to test and review this PR. 👷

Introduction for new contributors...

• If this is your first PR, an admin will greenlight automated testing with the command ok to test or add to whitelist.
• A series of tests will automatically run. You can see the results at the bottom of this page (if there are any problems, it will include a link to see what went wrong).
• A demo site will be built where anyone can try out a version of CiviCRM that includes your changes.
• If this process needs to be repeated, an admin will issue the command test this please to rerun tests and build a new demo site.
• Before this PR can be merged, it needs to be reviewed. Please keep in mind that reviewers are volunteers, and their response time can vary from a few hours to a few weeks depending on their availability and their knowledge of this particular part of CiviCRM.
• A great way to speed up this process is to "trade reviews" with someone - find an open PR that you feel able to review, and leave a comment like "I'm reviewing this now, could you please review mine?" (include a link to yours). You don't have to wait for a response to get started (and you don't have to stop at one!) the more you review, the faster this process goes for everyone 😄
• To ensure that you are credited properly in the final release notes, please add yourself to contributor-key.yml
• For more information about contributing, see CONTRIBUTING.md.

Quick links for reviewers...

• ➡️ PR Demo site (can be rebuilt with the command test this please).
• 📖 Review standards
• 🗒️ Review template (brief or verbose)

➡️ Online demo of this PR 🔗

[vingle]

Thanks @ufundo looks a v useful PR, a yes from me.

Just to check, are you saying that Drupal Garland, Riverlea Dark Mode = Always Light, OS Dark Mode ON leaks darkmode as in the top pic despite the RL setting? Or is this just in Thames? cc @artfulrobot.

[ufundo]

Just in Thames in my experience, because the Thames vars include that unconditional color-scheme.

I think it could be a bit browser dependent.

I would hope declaring color-scheme explicitly based on our setting would reduce chance of browser quirks.

[vingle]

I would hope declaring color-scheme explicitly based on our setting would reduce chance of browser quirks.

Yes - and it would make a good explanation for why that's happening in Thames. If, say, the BG colour of a checkbox isn't set in Thames it takes the next definition, which is the dark-mode browser's colour.

[ufundo]

retest this please