Nuxt•3w ago

force dark theme

usng nuxt and nuxt/ui, is there a way to force darktheme? instead of it just using whatever the device theme is?

2 Replies

Hi @Paul. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can force the dark theme in a Nuxt app using the @nuxt/ui module by setting the color mode preference to 'dark'. The recommended approach is to use the useColorMode composable in your app.vue or a plugin to set the preference at runtime:

const colorMode = useColorMode()
colorMode.preference = 'dark'

const colorMode = useColorMode()
colorMode.preference = 'dark'

This will force the dark mode regardless of the user's device or system settings. Note that if the user has a color mode preference saved in localStorage, it will take precedence over this setting. To ensure dark mode is always used, you may want to clear or ignore localStorage, or set the preference before the app renders. This approach is confirmed to work for all pages, including those rendered with @nuxt/content, as long as you set the preference in a global context like app.vue How to enable dark mode for all for .md pages in @nuxt/content > Conclusion. Additionally, you can configure the colorMode module in your nuxt.config.ts:

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

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

However, be aware that localStorage settings may still override this unless you handle them explicitly How to enable dark mode for all for .md pages in @nuxt/content. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@1267552151454875751> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

force dark theme

Did you find this page helpful?