Usage
Configuration
Configure the Color Mode module
You can configure the module by providing the colorMode property in your nuxt.config.ts. Here are the default options:
nuxt.config.ts
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'
}
})
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.