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'
}
})
preferencestring'system'Default color mode preference. 'system' is a special value that will automatically detect the color mode based on the system preferences.
fallbackstring'light'Fallback color mode value if no system preference is detected.
dataValuestringundefinedOptional 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'localStorage' | 'sessionStorage' | 'cookie''localStorage'Storage type to persist the color mode preference.
storageKeystring'nuxt-color-mode'Storage key name.