<!DOCTYPE html>
<html lang="zh-CN" data-bs-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{title}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <style>
        .container {{
            max-width: 960px;
        }}
        h1, h2, h3, h4, h5, h6 {{
            margin-top: 1.5rem;
            font-weight: 700;
        }}
        /* 修正一下列表和引用的间距 */
        ul, ol, blockquote {{
            margin-top: 1rem;
            margin-bottom: 1rem;
        }}
        blockquote {{
            font-size: 1rem;
            padding: 0.5rem 1rem;
            border-left: 0.25rem solid var(--bs-border-color-translucent);
        }}
        .theme-switcher {{
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1000;
        }}
    </style>
</head>
<body class="py-4">

    <div class="container card shadow-sm p-4 p-md-5">
        <h1 class="display-5 text-body-emphasis border-bottom pb-3 mb-4">{title}</h1>
        {html_body_styled}
    </div>

    <button class="btn btn-primary btn-lg theme-switcher" id="theme-toggle" title="切换日间/夜间模式">
        <i class="bi bi-sun-fill"></i>
    </button>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <script>
        (() => {{
            'use strict'
            const getStoredTheme = () => localStorage.getItem('theme');
            const setStoredTheme = theme => localStorage.setItem('theme', theme);
            const getPreferredTheme = () => {{
                const storedTheme = getStoredTheme();
                if (storedTheme) {{
                    return storedTheme;
                }}
                return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
            }};
            const setTheme = theme => {{
                document.documentElement.setAttribute('data-bs-theme', theme);
            }};

            setTheme(getPreferredTheme());

            const themeSwitcher = document.getElementById('theme-toggle');
            const themeIcon = themeSwitcher.querySelector('i.bi');

            const updateIcon = (theme) => {{
                if (theme === 'dark') {{
                    themeIcon.classList.remove('bi-sun-fill');
                    themeIcon.classList.add('bi-moon-stars-fill');
                }} else {{
                    themeIcon.classList.remove('bi-moon-stars-fill');
                    themeIcon.classList.add('bi-sun-fill');
                }}
            }};
            
            updateIcon(getPreferredTheme());

            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {{
                const storedTheme = getStoredTheme();
                if (!storedTheme) {{
                    const newTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
                    setTheme(newTheme);
                    updateIcon(newTheme);
                }}
            }});

            themeSwitcher.addEventListener('click', () => {{
                const currentTheme = document.documentElement.getAttribute('data-bs-theme') === 'dark' ? 'light' : 'dark';
                setStoredTheme(currentTheme);
                setTheme(currentTheme);
                updateIcon(currentTheme);
            }});
        }})();
    </script>
</body>
</html>
