diff --git a/src/runtime/plugin.server.ts b/src/runtime/plugin.server.ts index 6aa258b..9ca4752 100644 --- a/src/runtime/plugin.server.ts +++ b/src/runtime/plugin.server.ts @@ -10,7 +10,6 @@ const addScript = (head) => { head.script.push({ hid, innerHTML: script, - pbody: true }) const serializeProp = '__dangerouslyDisableSanitizersByTagID' head[serializeProp] = head[serializeProp] || {} @@ -25,7 +24,7 @@ export default defineNuxtPlugin(async (nuxtApp) => { forced: false })).value - const bodyAttrs = {} + const htmlAttrs = {} if (isVue2) { const app = nuxtApp.nuxt2Context.app @@ -35,28 +34,20 @@ export default defineNuxtPlugin(async (nuxtApp) => { app.head = function () { const head = originalHead.call(this) || {} addScript(head) - head.bodyAttrs = bodyAttrs + head.htmlAttrs = htmlAttrs return head } } else { addScript(app.head) - app.head.bodyAttrs = bodyAttrs + app.head.htmlAttrs = htmlAttrs } } if (isVue3) { - useMeta({ bodyAttrs }) - - // Workaround until we have support in vueuse/head - if ('renderMeta' in nuxtApp.ssrContext) { - const originalRender = nuxtApp.ssrContext.renderMeta - nuxtApp.ssrContext.renderMeta = async () => { - const result = await originalRender() - // Remove any after https://github.com/nuxt/framework/pull/3257 is merged - ;(result as any).bodyScriptsPrepend = `` + ((result as any).bodyScriptsPrepend || '') - return result - } - } + useMeta({ + htmlAttrs, + script: [{ children: script }] + }) } useRouter().afterEach((to) => { @@ -65,9 +56,8 @@ export default defineNuxtPlugin(async (nuxtApp) => { : to.meta.colorMode if (forcedColorMode && forcedColorMode !== 'system') { - colorMode.value = forcedColorMode + colorMode.value = htmlAttrs['data-color-mode-forced'] = forcedColorMode colorMode.forced = true - bodyAttrs['data-color-mode-forced'] = forcedColorMode } else { if (forcedColorMode === 'system') { console.warn('You cannot force the colorMode to system at the page level.') diff --git a/src/script.ts b/src/script.ts index 4065d9e..737025e 100644 --- a/src/script.ts +++ b/src/script.ts @@ -2,15 +2,14 @@ // Global variable minimizers const w = window -const d = document -const de = d.documentElement +const de = document.documentElement const knownColorSchemes = ['dark', 'light'] const preference = window.localStorage.getItem('<%= options.storageKey %>') || '<%= options.preference %>' let value = preference === 'system' ? getColorScheme() : preference // Applied forced color mode -const forcedColorMode = d.body.getAttribute('data-color-mode-forced') +const forcedColorMode = de.getAttribute('data-color-mode-forced') if (forcedColorMode) { value = forcedColorMode }