diff --git a/src/app/app.vue b/src/app/app.vue index 9991e288..3ab93506 100644 --- a/src/app/app.vue +++ b/src/app/app.vue @@ -23,6 +23,18 @@ useHead({ bodyAttrs: { class: 'bg-gray-50 dark:bg-neutral-800', }, + // FOUC fix. @eschricht/nuxt-color-mode deliberately returns `undefined` from + // useClientPreferredColorScheme() during hydration to avoid Vue hydration + // warnings — which means it can't set in time for first paint, + // and on cookie changes can transiently emit an empty class. This inline + // blocking script does both jobs the library skips: sets the class before + // paint, and re-applies it whenever something else writes a different value. + script: [ + { + tagPriority: 'critical', + innerHTML: `(function(){try{function resolve(){var m=document.cookie.match(/(?:^|;\\s*)theme=([^;]+)/);var p=m?decodeURIComponent(m[1]):'system';if(p==='dark')return 'dark';if(p==='light')return 'light';return matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';}var h=document.documentElement;function apply(){var w=resolve();if(h.className!==w)h.className=w;}apply();new MutationObserver(apply).observe(h,{attributes:true,attributeFilter:['class']});matchMedia('(prefers-color-scheme: dark)').addEventListener('change',apply);}catch(e){}})();`, + }, + ], link: [ { rel: 'manifest',