💡 [REQUEST] - Persistent Dark mode

[Saeid Zareie]

Describe the feature

First of all, thanks for this great nuxt-module.
As the title suggests, nuxt-quasar could add utilities to support cookie-based dark mode. in this scenario, dark mode settings would be saved on client's browser and server would render html based on user's preference.
I've added a simple implementation to my own projects, and i'll be glad to help contributing this feature if approved.

One concern would be that, implementing this feature would segregate this repository from being a nuxt-quasar module only as it would be a feature that quasar doesn't support currently.
The same idea could be applied on supporting quasar locales and direction (LTR/RTL)

Additional information

• Would you be willing to help implement this feature?
• Does this feature have a potential to break existing features?

[Jason Landbridge]

Interesting idea! Maybe we could move towards splitting up this repository:

1. nuxt-quasar - The barebones Quasar plugin for Nuxt
2. nuxt-quasar-extras - Same system as how Quasar does it, where optional features can be enabled such as cookie-based dark mode
3. nuxt-quasar-playground - The example playground project with various configurations where features or bugs could be showcased and reproduced

@Maiquu, what do you think?

[Ege İliklier]

1. nuxt-quasar - The barebones Quasar plugin for Nuxt
2. nuxt-quasar-extras - Same system as how Quasar does it, where optional features can be enabled such as cookie-based dark mode
3. nuxt-quasar-playground - The example playground project with various configurations where features or bugs could be showcased and reproduced

In following weeks I will be extremely busy with work so I won't have that much time to commit to this project. So I do not plan to split this repository at the moment.

[Ege İliklier]

Persistent Dark mode will be possible in v1.3.0. You will be able to achieve it with nuxt's own useCookie method.

For example:

const { dark } = useQuasar()
const cookie = useCookie<'auto' | boolean>('dark');
dark.set(cookie.value || 'auto');
watch(
  () => dark.mode,
  (mode) => {
    cookie.value = mode
  }
);