{% set _theme = theme|default('dark') %}
{% set _icon = '☀️' if _theme == 'light' else '🌙' %}
<button class="theme-toggle" type="button" onclick="toggleTheme()" title="切换主题 (暗/亮)" aria-label="切换主题">
    <span id="theme-icon">{{ _icon }}</span>
</button>
<script>
function toggleTheme() {
    const current = document.body.classList.contains('theme-light') ? 'light' : 'dark';
    const next = current === 'light' ? 'dark' : 'light';
    document.cookie = `theme=${next}; path=/; max-age=${365*24*3600}; samesite=Lax`;
    document.body.classList.toggle('theme-light', next === 'light');
    const icon = document.getElementById('theme-icon');
    if (icon) icon.textContent = next === 'light' ? '☀️' : '🌙';
}
// initial state — keep icon in sync if cookie says light but the body class
// hasn't been set yet (e.g. partial rendered before server emitted the class)
(function() {
    const match = document.cookie.match(/theme=(\w+)/);
    if (match && match[1] === 'light') {
        document.body.classList.add('theme-light');
        const icon = document.getElementById('theme-icon');
        if (icon) icon.textContent = '☀️';
    } else if (match && match[1] === 'dark') {
        document.body.classList.remove('theme-light');
        const icon = document.getElementById('theme-icon');
        if (icon) icon.textContent = '🌙';
    }
})();
</script>