fix!: disallow setting colorMode.value + test types

resolves #317

Author: danielroe

package.json

@@ -42,7 +42,7 @@
     "lint": "eslint .",
     "prepublishOnly": "pnpm run prepack",
     "release": "pnpm lint && pnpm test && changelogen --release && npm publish && git push --follow-tags",
-    "test": "vitest run --coverage"
+    "test": "vitest run --coverage && vue-tsc --noEmit"
   },
   "dependencies": {
     "@nuxt/kit": "^4.2.1",
@@ -68,6 +68,7 @@
     "husky": "9.1.7",
     "nuxt": "^4.2.1",
     "typescript": "^5.9.3",
+    "unbuild": "^3.6.1",
     "vitest": "^4.0.8",
     "vue-tsc": "^3.1.3"
   }

playground/package.json

@@ -7,7 +7,8 @@
     "@nuxt/icon": "^2.1.0",
     "@nuxtjs/color-mode": "latest",
     "@nuxtjs/tailwindcss": "^6.14.0",
-    "nuxt": "^4.2.1"
+    "nuxt": "^4.2.1",
+    "tailwindcss": "^3.4.18"
   },
   "scripts": {
     "postinstall": "pnpm -C .. run dev:prepare",

pnpm-lock.yaml

@@ -1,5 +1,6 @@
 import type { NitroAppPlugin } from 'nitropack'
 
+// @ts-expect-error untyped virtual module
 import { script } from '#color-mode-options'
 
 export default <NitroAppPlugin> function (nitro) {

src/runtime/nitro-plugin.ts

@@ -45,17 +45,18 @@ export default defineNuxtPlugin((nuxtApp) => {
     const forcedColorMode = to.meta.colorMode
 
     if (forcedColorMode && forcedColorMode !== 'system') {
-      colorMode.value = forcedColorMode
+      setColorModeValue(colorMode, forcedColorMode)
       colorMode.forced = true
     }
     else {
       if (forcedColorMode === 'system') {
         console.warn('You cannot force the colorMode to system at the page level.')
       }
       colorMode.forced = false
-      colorMode.value = colorMode.preference === 'system'
+      const newValue = colorMode.preference === 'system'
         ? helper.getColorScheme()
         : colorMode.preference
+      setColorModeValue(colorMode, newValue)
     }
   })
 
@@ -69,7 +70,7 @@ export default defineNuxtPlugin((nuxtApp) => {
     darkWatcher = window.matchMedia('(prefers-color-scheme: dark)')
     darkWatcher.addEventListener('change', () => {
       if (!colorMode.forced && colorMode.preference === 'system') {
-        colorMode.value = helper.getColorScheme()
+        setColorModeValue(colorMode, helper.getColorScheme())
       }
     })
   }
@@ -93,11 +94,11 @@ export default defineNuxtPlugin((nuxtApp) => {
       return
     }
     if (preference === 'system') {
-      colorMode.value = helper.getColorScheme()
+      setColorModeValue(colorMode, helper.getColorScheme())
       watchMedia()
     }
     else {
-      colorMode.value = preference
+      setColorModeValue(colorMode, preference)
     }
 
     setPreferenceToStorage(storage, preference)
@@ -129,10 +130,15 @@ export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.hook('app:mounted', () => {
     if (colorMode.unknown) {
       colorMode.preference = helper.preference
-      colorMode.value = helper.value
+      setColorModeValue(colorMode, helper.value)
       colorMode.unknown = false
     }
   })
 
   nuxtApp.provide('colorMode', colorMode)
 })
+
+function setColorModeValue(colorMode: ColorModeInstance, value: string) {
+  // @ts-expect-error readonly property
+  colorMode.value = value
+}

src/runtime/plugin.client.ts

@@ -29,7 +29,9 @@ export default defineNuxtPlugin((nuxtApp) => {
     const forcedColorMode = to.meta.colorMode
 
     if (forcedColorMode && forcedColorMode !== 'system') {
-      colorMode.value = htmlAttrs['data-color-mode-forced'] = forcedColorMode
+      htmlAttrs['data-color-mode-forced'] = forcedColorMode
+      // @ts-expect-error readonly property
+      colorMode.value = forcedColorMode
       if (dataValue) {
         htmlAttrs[`data-${dataValue}`] = colorMode.value
       }

src/runtime/plugin.server.ts

@@ -1,6 +1,6 @@
 export interface ColorModeInstance {
   preference: string
-  value: string
+  readonly value: string
   unknown: boolean
   forced: boolean
 }

src/runtime/types.ts

@@ -18,6 +18,7 @@
 
   addColorScheme(value)
 
+  // @ts-expect-error global name is not of correct type
   w['<%= options.globalName %>'] = {
     preference,
     value,

src/script.js

@@ -1,3 +1,8 @@
 {
-  "extends": "./.nuxt/tsconfig.json"
+  "extends": "./.nuxt/tsconfig.json",
+  "exclude": [
+    "dist",
+    "docs",
+    "playground"
+  ]
 }