@nuxtjs/color-mode dark mode

[jade moss]

how to set @unborn cipherjs/color-mode to always be dark mode? and not system

[golden quartz]

Hi @jade moss. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To force @nuxtjs/color-mode to always use dark mode (and ignore system), you can set the preference in two places:

1. In nuxt.config.ts

Configure the module so dark is the default/fallback:

export default defineNuxtConfig({
  modules: ['@nuxtjs/color-mode'],
  colorMode: {
    classSuffix: '',
    preference: 'dark',  // default preference
    fallback: 'dark',    // used if nothing stored yet
  }
})

Note: this is overridden if the user already has a value stored in localStorage. [Dark mode answer]

2. Force dark mode at runtime (ignores stored/system value)

In app.vue (or a layout), you can force dark mode on every load:

<script setup lang="ts">
const colorMode = useColorMode()
colorMode.preference = 'dark'
</script>

This ensures all pages use dark mode regardless of system or previous choice. [Dark mode answer]

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: