Add Dark Mode Support to Vue Package

[thombruce]

RockBand currently uses Nuxt Color Mode to enable theme toggling in the Nuxt module distribution of the package. This unfortunately leaves the Vue version with a lack of support for the feature at this time...

Consider instead something like Vue Dark Mode from Vue A11y. This could be installed at the level of the Vue plugin, which the Nuxt module uses anyway.

The clearest guide to how we might achieve this is, I think, this quick little tutorial which lists all of the customisable props for the Dark Mode toggle component: https://www.vuescript.com/customizable-dark-mode/

Should also explore the Vue A11y project in further detail, given a want to focus on accessibility.

[thombruce]

Just happened across this while reviewing the Vue plugin ahead of doing the work:

if (!options.nuxt) {
  Vue.use(VueMeta)
}

We could do the same with Vue Dark Mode. It's just a question of whether we want to.

Pros

• It already works

Cons

• It adds additional weight/bloat
• It means maintaining two sets of Dark Mode functionality

Probably makes the most sense to try and remove the use of Nuxt Color Mode, so that we're only maintaining the one piece of theming functionality.

Think of it like this: The Nuxt module really should just be a wrapper which makes RockBand useable with Nuxt; the core behaviours should ALWAYS be added to the Vue level first. At the moment, we have this backwards because of how I've been working and using this.

The reason that VueMeta is an exception, is because this plugin is already installed by default within Nuxt and has conflicting functionality.

[thombruce]

Addition Pro for Nuxt Color Mode

• Better implementation of "system" dark mode

If default is set to "system", Vue Dark Mode does not respect this on initial load. On repeat loads, it does work if "system" is set in local storage... so why is this? It's probably an upstream bug - something like, on load of component check for stored variable to apply theme; logic that probably should fallback to whatever the given default is if that isn't set, but doesn't handle a default of "system" the way that it should.

Consider investigating the upstream package and adding an issue: https://github.com/vue-a11y/vue-dark-mode (Note that even though the package has not received an update in 2 years, the dev was active as of November 2021 discussing an issue and potential PR for the project).

I do still think the best option is to have just the one implementation handling dark mode (so doing without the Nuxt Color Mode module), at least for now. I don't think the Nuxt Color Mode module adds enough for me to consider having both, one for each level...

But I am going to keep it under consideration, because the Nuxt module does have baked in SSR support which is very nice to have.

Will deliver this as, but consider these future objectives:

1. Fork @vue-a11y/vue-dark-mode and fix implementation of 'system' for initial load, changing our default when we do so
2. Reimplement @nuxtjs/color-mode at the Nuxt module level; the additional SSR support is worth having

[thombruce]

Closed by f9ac33511187620893c8a9e11ffbf56de8ab4fad