Should there be a way to force a color mode in the root of the app?

[vitorCamarotto]

Should it be possible to define the page meta in the app.vue?

The problem: If I have 90% of pages that I want in dark mode, I should be able to do it by only forcing light mode in the 10%, not forcing dark in the 90%. Does this make sense?

In the docs it says the only way to force a color mode is by using definePageMeta, and preference does not overrides the colorMode that system has.

The solution: (?)

// app.vue
definePageMeta({
  colorMode: 'dark',
})

// forces dark mode to all pages by default. 

[damisparks]

@vitorCamarotto Using that approach is wrong. It will lead to the error below.

 WARN  definePageMeta() is a compiler-hint helper that is only usable inside the script block of a single file component which is also a page. Its arguments should be compiled away and passing it at runtime has no effect.

Recommendation

Ideally, you'd like to dark mode by default, Here is what your config should look like. The solution works for me.

export default defineNuxtConfig({
  colorMode: {
    preference: 'dark',
    fallback: 'dark'
  }
})

Note 💡

If you're stuck in light mode even after changing this setting, you might need to remove the nuxt-color-mode entry from your browser's local storage.