Add system dark mode detection for Vue apps #11624

[jacobtylerwalls]

Types of changes

• Bugfix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)

Description of Change

A vue app no longer has to query for the system dark mode itself, and can depend on a user's persisted dark mode preference being hydrated (although a vue app's toggle will need to persist the choice, see example in archesproject/arches-lingo#91).

Issues Solved

Closes #11624

Checklist

• I targeted one of these branches:
  • dev/8.0.x (under development): features, bugfixes not covered below
  • dev/7.6.x (main support): regressions, crashing bugs, security issues, major bugs in new features
  • dev/6.2.x (extended support): major security issues, data loss issues
• I added a changelog in arches/releases
• I submitted a PR to arches-docs (if appropriate)
• Unit tests pass locally with my changes
• I added tests that prove my fix is effective or that my feature works
• My test fails on the target branch

Ticket Background

• Sponsored by: Getty Conservation Institute

[jacobtylerwalls]

This class name is hard coded, because I don't see a way to read it dynamically from the DEFAULT_THEME js file. If project developers have a different use case, as a last resort, this template could be overridden.

[chrabyrd]

looks good! Once the toggle lives outside of lingo we'll probably need to revisit this. I can imagine keying value in localStorage on the username as well -- unless we go with adding a row to the userprofile table -- so that there isn't odd behavior on shared computers.

[jacobtylerwalls]

Thanks for the review!