Martin Dvorak
32d622f80e
Back to the terminal/Gruvbox shell + phone-reachable KDE desktop. The reverted
work is still reachable in history at d3f953e.
30 lines
1.3 KiB
TypeScript
30 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { useRef } from "react";
|
|
import { useServerInsertedHTML } from "next/navigation";
|
|
|
|
// Runs before paint so the saved theme and the phone/desktop split are applied
|
|
// without a flash. It is injected with useServerInsertedHTML so the <script>
|
|
// lives in the SSR HTML stream instead of inside the React tree — React 19
|
|
// logs an error for script tags rendered by components on the client.
|
|
const INIT_SCRIPT = `(function(){try{var t=localStorage.getItem('theme');if(t==='terminal'||t==='skeuo'){document.documentElement.setAttribute('data-theme',t);}var ua=navigator.userAgent||'';var phone=/(iPhone|iPod|Android.+Mobile|Windows Phone|IEMobile|BlackBerry|Opera Mini|Mobile)/i.test(ua);document.documentElement.setAttribute('data-device',phone?'phone':'desktop');}catch(e){}})();`;
|
|
|
|
export default function ThemeScript() {
|
|
// useServerInsertedHTML can fire several times during a single render pass;
|
|
// guard so the script only lands in the document once.
|
|
const inserted = useRef(false);
|
|
|
|
useServerInsertedHTML(() => {
|
|
if (inserted.current) return null;
|
|
inserted.current = true;
|
|
return (
|
|
<script
|
|
id="theme-init"
|
|
suppressHydrationWarning
|
|
dangerouslySetInnerHTML={{ __html: INIT_SCRIPT }}
|
|
/>
|
|
);
|
|
});
|
|
|
|
return null;
|
|
}
|