nuxt-modules · Arecsu · Feb 8, 2022 · Jun 14, 2022 · Aug 17, 2023 · Aug 17, 2023
diff --git a/README.md b/README.md
@@ -24,6 +24,7 @@
 
 - Nuxt 3 and Nuxt Bridge support
 - Add `.${color}-mode` class to `<html>` for easy CSS theming
+- Automatically set [theme color](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color) of the page
 - Force a page to a specific color mode (perfect for incremental development)
 - Works with client-side and universal rendering
 - Auto detect system [color-mode](https://drafts.csswg.org/mediaqueries-5/#descdef-media-prefers-color-mode)

diff --git a/docs/content/1.index.md b/docs/content/1.index.md
@@ -13,6 +13,7 @@ Dark and Light mode with auto detection made easy with Nuxt 🌗
 
 - Nuxt 3 and Nuxt Bridge support
 - Add `.${color}-mode` class to `<html>` for easy CSS theming
+- Automatically set [theme color](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color) of the page
 - Force a page to a specific color mode (perfect for incremental development)
 - Works with client-side and universal rendering
 - Auto detect system [color-mode](https://drafts.csswg.org/mediaqueries-5/#descdef-media-prefers-color-mode)
@@ -142,7 +143,8 @@ export default defineNuxtConfig({
     componentName: 'ColorScheme',
     classPrefix: '',
     classSuffix: '-mode',
-    storageKey: 'nuxt-color-mode'
+    storageKey: 'nuxt-color-mode',
+    themeColors: null
   }
 })
 ```

diff --git a/playground/nuxt.config.js b/playground/nuxt.config.js
@@ -3,5 +3,12 @@ import colorModeModule from '../src/module'
 export default defineNuxtConfig({
   components: { global: true, dirs: ['~/components'] },
   css: ['~/assets/main.css'],
-  modules: [colorModeModule]
+  modules: [colorModeModule],
+  colorMode: {
+    themeColors: {
+      dark: '#091a28',
+      light: '#f3f5f4',
+      sepia: '#f1e7d0'
+    }
+  }
 })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/module.ts b/src/module.ts
@@ -14,7 +14,8 @@ const DEFAULTS: ModuleOptions = {
   classPrefix: '',
   classSuffix: '-mode',
   dataValue: '',
-  storageKey: 'nuxt-color-mode'
+  storageKey: 'nuxt-color-mode',
+  themeColors: null
 }
 
 export default defineNuxtModule({
@@ -33,7 +34,12 @@ export default defineNuxtModule({
     // Read script from disk and add to options
     const scriptPath = await resolver.resolve('./script.min.js')
     const scriptT = await fsp.readFile(scriptPath, 'utf-8')
-    options.script = template(scriptT)({ options })
+    options.script = template(scriptT)({
+      options: {
+        ...options,
+        themeColors: JSON.stringify(options.themeColors)
+      }
+    })
 
     // Inject options via virtual template
     nuxt.options.alias['#color-mode-options'] = addTemplate({
@@ -162,4 +168,8 @@ export interface ModuleOptions {
    * The script that will be injected into the head of the page
    */
   script?: string
+  /**
+   * Default: null
+   */
+  themeColors: Record<string, string> | null
 }
diff --git a/src/script.ts b/src/script.ts
@@ -1,12 +1,23 @@
+// @ts-nocheck
 // Add dark / light detection that runs before loading Nuxt
 (() => {
   // Global variable minimizers
   const w = window
-  const de = document.documentElement
+  const d = document
+  const de = d.documentElement
 
   const knownColorSchemes = ['dark', 'light']
 
   const preference = (window && window.localStorage && window.localStorage.getItem && window.localStorage.getItem('<%= options.storageKey %>')) || '<%= options.preference %>'
+
+  /* Backticks are needed to proper escape quotes in options.themeColors.
+     Using ES template literals instead of "interpolate" delimiter (lodash)
+     is needed to preserve the backticks in the minify process
+     */
+  const metaThemeColors = JSON.parse(`${options.themeColors}`)
+
+  // Get previous meta element if the script is run the second time (e.g. in dev mode)
+  let metaElementThemeColor = d.head.querySelector('meta[name=theme-color]')
   let value = preference === 'system' ? getColorScheme() : preference
   // Applied forced color mode
   const forcedColorMode = de.getAttribute('data-color-mode-forced')
@@ -16,7 +27,6 @@
 
   addColorScheme(value)
 
-  // @ts-ignore
   w['<%= options.globalName %>'] = {
     preference,
     value,
@@ -25,7 +35,6 @@
     removeColorScheme
   }
 
-  // @ts-ignore
   function addColorScheme (value) {
     const className = '<%= options.classPrefix %>' + value + '<%= options.classSuffix %>'
     const dataValue = '<%= options.dataValue %>'
@@ -37,9 +46,25 @@
     if (dataValue) {
       de.setAttribute('data-' + dataValue, value)
     }
+
+    // theme-color refers to a meta attribute which indicates a
+    // suggested color user agents can use to customize the interface
+    // more info: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
+    const currentMetaThemeColor = metaThemeColors?.[value]
+    if (currentMetaThemeColor) {
+      if (!metaElementThemeColor) {
+        metaElementThemeColor = d.createElement('meta')
+        metaElementThemeColor.name = 'theme-color'
+      }
+      metaElementThemeColor.content = currentMetaThemeColor
+      if (metaElementThemeColor.parentNode !== d.head) {
+        d.head.appendChild(metaElementThemeColor)
+      }
+    } else if (metaElementThemeColor?.parentNode) {
+      metaElementThemeColor.parentNode.removeChild(metaElementThemeColor)
+    }
   }
 
-  // @ts-ignore
   function removeColorScheme (value) {
     const className = '<%= options.classPrefix %>' + value + '<%= options.classSuffix %>'
     const dataValue = '<%= options.dataValue %>'
@@ -53,13 +78,11 @@
     }
   }
 
-  // @ts-ignore
   function prefersColorScheme (suffix) {
     return w.matchMedia('(prefers-color-scheme' + suffix + ')')
   }
 
   function getColorScheme () {
-    // @ts-ignore
     if (w.matchMedia && prefersColorScheme('').media !== 'not all') {
       for (const colorScheme of knownColorSchemes) {
         if (prefersColorScheme(':' + colorScheme).matches) {