Configuration
You can configure the module by providing the colorMode property in your nuxt.config.ts. Here are the default options:
export default defineNuxtConfig({
modules: ['@nuxtjs/color-mode'],
colorMode: {
preference: 'system', // default value of $colorMode.preference
fallback: 'light', // fallback value if not system preference found
globalName: '__NUXT_COLOR_MODE__',
componentName: 'ColorScheme',
classPrefix: '',
classSuffix: '',
storage: 'localStorage', // or 'sessionStorage' or 'cookie'
storageKey: 'nuxt-color-mode',
cookieAttrs: { 'max-age': '31536000', path: '/' }
}
})
Options
preference
- Type:
string - Default:
'system'
Default color mode preference. 'system' is a special value that will automatically detect the color mode based on the system preferences.
fallback
- Type:
string - Default:
'light'
Fallback color mode value if no system preference is detected.
dataValue
- Type:
string - Default:
undefined
Optional dataset attribute to add to <html>. For example, if you set dataValue: 'theme', it will set data-theme="dark" on <html>. This is useful when using libraries like daisyUI.
storage
- Type:
'localStorage' | 'sessionStorage' | 'cookie' - Default:
'localStorage'
Storage type to persist the color mode preference.
storageKey
- Type:
string - Default:
'nuxt-color-mode'
Storage key name.
cookieAttrs
- Type:
object - Default:
{ 'max-age': '31536000', path: '/' }
Attributes to set on the cookie when storage is set to 'cookie'. By default, the cookie is set with a one-year max age and scoped to the root path.
You can override these to customise cookie behaviour, for example to set SameSite or Secure:
export default defineNuxtConfig({
modules: ['@nuxtjs/color-mode'],
colorMode: {
storage: 'cookie',
cookieAttrs: {
'max-age': '31536000',
'path': '/',
'SameSite': 'Lax',
'Secure': '',
}
}
})