feat: Add usage of theme header from http request

src/runtime/plugin.client.ts

@@ -6,6 +6,8 @@ import { globalName, storageKey, dataValue } from '#color-mode-options'
 
 const helper = window[globalName] as unknown as {
   preference: string
+  systemScheme: string | null
+  getSystemScheme: () => string | null
   value: string
   getColorScheme: () => string
   addColorScheme: (className: string) => void
@@ -16,6 +18,7 @@ export default defineNuxtPlugin((nuxtApp) => {
   const colorMode = useState<ColorModeInstance>('color-mode', () => reactive({
     // For SPA mode or fallback
     preference: helper.preference,
+    systemScheme: helper.systemScheme,
     value: helper.value,
     unknown: false,
     forced: false
@@ -65,6 +68,8 @@ export default defineNuxtPlugin((nuxtApp) => {
 
     darkWatcher = window.matchMedia('(prefers-color-scheme: dark)')
     darkWatcher.addEventListener('change', () => {
+      colorMode.systemScheme = helper.getSystemScheme()
+
       if (!colorMode.forced && colorMode.preference === 'system') {
         colorMode.value = helper.getColorScheme()
       }

src/runtime/plugin.server.ts

@@ -1,3 +1,4 @@
+import type { IncomingMessage, ServerResponse } from 'http';
 import { reactive } from 'vue'
 
 import type { ColorModeInstance } from './types'
@@ -15,15 +16,46 @@ const addScript = (head) => {
   head[serializeProp][hid] = ['innerHTML']
 }
 
+const schemeHeader = 'Sec-CH-Prefers-Color-Scheme';
+const getSystemSchemeFromReq = (req: IncomingMessage): string | null => {
+  return req.headers[
+    schemeHeader.toLowerCase()
+  ] as string || null;
+}
+const setSchemeHeaderForRes = (res: ServerResponse): void => {
+  res.setHeader('Accept-CH', schemeHeader);
+}
+
 export default defineNuxtPlugin((nuxtApp) => {
-  const colorMode = nuxtApp.ssrContext && 'islandContext' in nuxtApp.ssrContext
-    ? reactive({})
-    : useState<ColorModeInstance>('color-mode', () => reactive({
+  let colorMode: ColorModeInstance;
+
+  if (nuxtApp.ssrContext && 'islandContext' in nuxtApp.ssrContext) {
+    colorMode = reactive({} as ColorModeInstance);
+  } else {
+    let systemScheme: string | null = null;
+
+    if (isVue2) {
+      const { req, res } = nuxtApp.nuxt2Context;
+
+      setSchemeHeaderForRes(res);
+
+      systemScheme = getSystemSchemeFromReq(req) || systemScheme;
+    } else {
+      const { req, res } = useRequestEvent()?.node || {};
+
+      setSchemeHeaderForRes(res);
+
+      systemScheme = getSystemSchemeFromReq(req) || systemScheme;
+    }
+
+    colorMode = useState<ColorModeInstance>('color-mode', () => reactive({
       preference,
-      value: preference,
-      unknown: true,
+      systemScheme,
+      value: systemScheme || preference,
+      unknown: !systemScheme,
       forced: false
     })).value
+  }
 
   const htmlAttrs: Record<string, string> = {}
 

src/runtime/types.ts

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 export interface ColorModeInstance {
   preference: string
+  systemScheme: string | null
   value: string
   unknown: boolean
   forced: boolean

src/script.ts

@@ -7,6 +7,7 @@
   const knownColorSchemes = ['dark', 'light']
 
   const preference = (window && window.localStorage && window.localStorage.getItem && window.localStorage.getItem('<%= options.storageKey %>')) || '<%= options.preference %>'
+  const systemScheme = getSystemScheme()
   let value = preference === 'system' ? getColorScheme() : preference
   // Applied forced color mode
   const forcedColorMode = de.getAttribute('data-color-mode-forced')
@@ -19,7 +20,9 @@
   // @ts-ignore
   w['<%= options.globalName %>'] = {
     preference,
+    systemScheme,
     value,
+    getSystemScheme,
     getColorScheme,
     addColorScheme,
     removeColorScheme
@@ -58,7 +61,7 @@
     return w.matchMedia('(prefers-color-scheme' + suffix + ')')
   }
 
-  function getColorScheme () {
+  function getSystemScheme () {
     // @ts-ignore
     if (w.matchMedia && prefersColorScheme('').media !== 'not all') {
       for (const colorScheme of knownColorSchemes) {
@@ -68,6 +71,10 @@
       }
     }
 
-    return '<%= options.fallback %>'
+    return null;
+  }
+
+  function getColorScheme () {
+    return getSystemScheme() || '<%= options.fallback %>'
   }
 })()