/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakToggle */
const { useState: useStateA, useEffect: useEffectA } = React;
const DEFAULT_TWEAKS = /*EDITMODE-BEGIN*/{
"theme": "dark",
"accent": "blue",
"capsuleShape": "pill",
"heroCopy": "a",
"density": "default",
"lang": "en"
}/*EDITMODE-END*/;
// Detect Apple platforms (macOS / iOS / iPadOS) — they follow system theme by default.
function isApplePlatform() {
if (typeof navigator === 'undefined') return false;
const ua = navigator.userAgent || '';
const plat = navigator.platform || '';
if (/Mac|iPhone|iPad|iPod/i.test(plat)) return true;
// iPadOS 13+ reports as Mac with touch
if (/Mac/i.test(plat) && navigator.maxTouchPoints > 1) return true;
if (/Macintosh|iPhone|iPad|iPod/i.test(ua)) return true;
return false;
}
function App() {
const [t, setTweak] = useTweaks(DEFAULT_TWEAKS);
// On Apple platforms: theme auto-follows the system. The user can still override
// (toggle or Tweaks) — once they do, we stop auto-syncing this session.
const apple = isApplePlatform();
const [autoFollow, setAutoFollow] = useStateA(() => {
if (!apple) return false;
try {
const stored = localStorage.getItem('vp:autoTheme');
if (stored === '0') return false;
if (stored === '1') return true;
} catch (e) {}
return true; // default on Apple: follow system
});
// Track system preference and push it into the tweak state when autoFollow is on.
useEffectA(() => {
if (!autoFollow) return;
const mq = window.matchMedia('(prefers-color-scheme: dark)');
const apply = () => setTweak('theme', mq.matches ? 'dark' : 'light');
apply();
if (mq.addEventListener) mq.addEventListener('change', apply);
else mq.addListener(apply);
return () => {
if (mq.removeEventListener) mq.removeEventListener('change', apply);
else mq.removeListener(apply);
};
}, [autoFollow]);
// sync theme + accent + density + lang to attrs
useEffectA(() => {
document.documentElement.dataset.theme = t.theme;
document.documentElement.dataset.accent = t.accent;
document.documentElement.dataset.density = t.density;
document.documentElement.lang = t.lang === 'zh' ? 'zh-CN' : 'en';
}, [t.theme, t.accent, t.density, t.lang]);
// Update meta theme-color
useEffectA(() => {
const meta = document.querySelector('meta[name="theme-color"]');
if (meta) meta.setAttribute('content', t.theme === 'dark' ? '#0a0a0a' : '#FFFFFF');
}, [t.theme]);
// User-initiated theme change → break the system sync.
const setTheme = (theme) => {
if (autoFollow) {
setAutoFollow(false);
try { localStorage.setItem('vp:autoTheme', '0'); } catch (e) {}
}
setTweak('theme', theme);
};
const setDensity = (d) => setTweak('density', d);
const resumeAuto = () => {
if (!apple) return;
setAutoFollow(true);
try { localStorage.setItem('vp:autoTheme', '1'); } catch (e) {}
};
return (
setTweak('lang', v)}>
<>
setTweak('lang', v)} />
setTweak('theme', v)}
/>
setTweak('lang', v)}
/>
setTweak('accent', v)}
/>
setTweak('density', v)}
/>
setTweak('heroCopy', v)}
/>
setTweak('capsuleShape', v)}
/>
);
}
function SectionRule() {
return (
);
}
ReactDOM.createRoot(document.getElementById('root')).render();