feat: cookie storage

src/module.ts

@@ -2,8 +2,8 @@ import { promises as fsp } from 'fs'
 import { join, resolve } from 'pathe'
 import template from 'lodash.template'
 import { addPlugin, addTemplate, defineNuxtModule, isNuxt2, addComponent, addImports, createResolver } from '@nuxt/kit'
-
 import { name, version } from '../package.json'
+import type { ColorModeStorage } from './runtime/types'
 
 const DEFAULTS: ModuleOptions = {
   preference: 'system',
@@ -14,7 +14,8 @@ const DEFAULTS: ModuleOptions = {
   classPrefix: '',
   classSuffix: '-mode',
   dataValue: '',
-  storageKey: 'nuxt-color-mode'
+  storageKey: 'nuxt-color-mode',
+  storage: 'localStorage'
 }
 
 export default defineNuxtModule({
@@ -158,6 +159,11 @@ export interface ModuleOptions {
    * @default 'nuxt-color-mode'
    */
   storageKey: string
+  /**
+   * The default storage
+   * @default `localStorage`
+   */
+  storage?: ColorModeStorage
   /**
    * The script that will be injected into the head of the page
    */

src/runtime/plugin.client.ts

@@ -2,7 +2,7 @@ import { computed, reactive, watch } from 'vue'
 
 import type { ColorModeInstance } from './types'
 import { defineNuxtPlugin, isVue2, isVue3, useRouter, useHead, useState } from '#imports'
-import { globalName, storageKey, dataValue } from '#color-mode-options'
+import { globalName, storageKey, dataValue, storage } from '#color-mode-options'
 
 // Initialise to empty object to avoid hard error when hydrating app in test mode
 const helper = (window[globalName] || {}) as unknown as {
@@ -72,6 +72,20 @@ export default defineNuxtPlugin((nuxtApp) => {
     })
   }
 
+  function setPreferenceToStorage (storageType: typeof storage, preference: string) {
+    switch (storageType) {
+      case 'cookie':
+        window.document.cookie = storageKey + '=' + preference
+        break
+      case 'sessionStorage':
+        window.sessionStorage?.setItem(storageKey, preference)
+        break
+      case 'localStorage':
+      default:
+        window.localStorage?.setItem(storageKey, preference)
+    }
+  }
+
   watch(() => colorMode.preference, (preference) => {
     if (colorMode.forced) {
       return
@@ -83,8 +97,9 @@ export default defineNuxtPlugin((nuxtApp) => {
       colorMode.value = preference
     }
 
+    setPreferenceToStorage(storage, preference)
     // Local storage to sync with other tabs
-    window.localStorage?.setItem(storageKey, preference)
+    // window.localStorage?.setItem(storageKey, preference)
   }, { immediate: true })
 
   watch(() => colorMode.value, (newValue, oldValue) => {

src/runtime/plugin.server.ts

@@ -1,8 +1,8 @@
 import { reactive, ref } from 'vue'
 
 import type { ColorModeInstance } from './types'
-import { defineNuxtPlugin, isVue2, isVue3, useHead, useState, useRouter } from '#imports'
-import { preference, hid, script, dataValue } from '#color-mode-options'
+import { defineNuxtPlugin, isVue2, isVue3, useHead, useState, useRouter, useRequestHeaders } from '#imports'
+import { preference, hid, script, dataValue, storage, storageKey } from '#color-mode-options'
 
 const addScript = (head) => {
   head.script = head.script || []
@@ -45,6 +45,13 @@ export default defineNuxtPlugin((nuxtApp) => {
   }
 
   if (isVue3) {
+    if (storage === 'cookie') {
+      const { cookie } = useRequestHeaders(['cookie'])
+      const [, value] = cookie?.split('; ').map(s => s.split('=')).find(([k]) => k === storageKey) ?? []
+      if (value) {
+        colorMode.preference = value
+      }
+    }
     useHead({ htmlAttrs })
   }
 

src/runtime/types.ts

@@ -6,6 +6,8 @@ export interface ColorModeInstance {
   forced: boolean
 }
 
+export type ColorModeStorage = 'localStorage'|'sessionStorage'|'cookie';
+
 // @ts-ignore
 declare module 'vue/types/vue' {
   interface Vue {

src/script.ts

@@ -6,7 +6,7 @@
 
   const knownColorSchemes = ['dark', 'light']
 
-  const preference = (window && window.localStorage && window.localStorage.getItem && window.localStorage.getItem('<%= options.storageKey %>')) || '<%= options.preference %>'
+  const preference = getStorageValue('<%= options.storage %>', '<%= options.storageKey %>') || '<%= options.preference %>'
   let value = preference === 'system' ? getColorScheme() : preference
   // Applied forced color mode
   const forcedColorMode = de.getAttribute('data-color-mode-forced')
@@ -71,3 +71,26 @@
     return '<%= options.fallback %>'
   }
 })()
+
+// @ts-ignore
+function getStorageValue (storageType, storageKey) {
+  if (window?.document === 'undefined') { return null }
+
+  switch (storageType) {
+    case 'localStorage':
+      return window.localStorage.getItem(storageKey)
+    case 'sessionStorage':
+      return window.sessionStorage.getItem(storageKey)
+    case 'cookie':
+      return getCookie(storageKey)
+    default:
+      return null
+  }
+}
+
+// @ts-ignore
+function getCookie (name) {
+  const value = '; ' + window.document.cookie
+  const parts = value.split('; ' + name + '=')
+  if (parts.length === 2) { return parts.pop()?.split(';').shift() }
+}