search-syntax-pro/public/test-theme.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主题功能测试 - SSP</title>
    <style>
        body {
            font-family: system-ui, -apple-system, sans-serif;
            padding: 20px;
            max-width: 800px;
            margin: 0 auto;
        }

        .test-section {
            border: 2px solid #ccc;
            padding: 20px;
            margin: 20px 0;
            border-radius: 8px;
            background: #f9f9f9;
        }

        html.dark .test-section {
            background: #1f2937;
            border-color: #374151;
            color: white;
        }

        .status {
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
            font-family: monospace;
        }

        .status.pass {
            background: #d4edda;
            color: #155724;
        }

        html.dark .status.pass {
            background: #1e4620;
            color: #7aff7a;
        }

        .status.fail {
            background: #f8d7da;
            color: #721c24;
        }

        button {
            padding: 10px 20px;
            margin: 5px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }

        button.light {
            background: #fff;
            color: #000;
            border: 2px solid #ddd;
        }

        button.dark {
            background: #1f2937;
            color: white;
            border: 2px solid #374151;
        }

        button.auto {
            background: linear-gradient(90deg, #fff 50%, #1f2937 50%);
            color: #000;
            border: 2px solid #888;
        }

        code {
            background: #e0e0e0;
            padding: 2px 6px;
            border-radius: 3px;
            font-family: 'Courier New', monospace;
        }

        html.dark code {
            background: #374151;
        }
    </style>
</head>
<body>
    <h1>🎨 主题功能测试页面</h1>

    <div class="test-section">
        <h2>1. 当前状态</h2>
        <div id="currentStatus"></div>
    </div>

    <div class="test-section">
        <h2>2. 手动测试主题切换</h2>
        <p>点击下方按钮测试主题切换功能：</p>
        <button class="light" onclick="testTheme('light')">☀️ Light Mode</button>
        <button class="dark" onclick="testTheme('dark')">🌙 Dark Mode</button>
        <button class="auto" onclick="testTheme('auto')">🔄 Auto Mode</button>
    </div>

    <div class="test-section">
        <h2>3. 自动测试结果</h2>
        <div id="autoTestResults"></div>
    </div>

    <div class="test-section">
        <h2>4. 测试说明</h2>
        <ul>
            <li>✅ <strong>Light Mode</strong>: 页面应该显示亮色背景</li>
            <li>✅ <strong>Dark Mode</strong>: 页面应该显示暗色背景</li>
            <li>✅ <strong>Auto Mode</strong>: 页面应该跟随系统主题</li>
            <li>✅ Storage 同步: 设置应该保存到 <code>chrome.storage.local</code></li>
            <li>✅ DOM 更新: <code>&lt;html&gt;</code> 元素应该有 <code>dark</code> 或 <code>light</code> class</li>
        </ul>
    </div>

    <script>
        // 显示当前状态
        function updateCurrentStatus() {
            const html = document.documentElement;
            const hasLight = html.classList.contains('light');
            const hasDark = html.classList.contains('dark');
            const dataTheme = html.getAttribute('data-theme');

            const statusHTML = `
                <div class="status ${hasDark || hasLight ? 'pass' : 'fail'}">
                    <strong>DOM Classes:</strong><br>
                    - light: ${hasLight}<br>
                    - dark: ${hasDark}<br>
                    <strong>Data Attribute:</strong> data-theme="${dataTheme}"
                </div>
            `;

            document.getElementById('currentStatus').innerHTML = statusHTML;
        }

        // 测试主题切换
        async function testTheme(theme) {
            console.log(`🧪 Testing theme: ${theme}`);

            try {
                // 1. 保存到 storage
                const settings = await chrome.storage.local.get('user_settings');
                const newSettings = {
                    ...(settings.user_settings || {}),
                    theme: theme
                };

                await chrome.storage.local.set({ user_settings: newSettings });
                console.log('✅ Saved to storage:', newSettings);

                // 2. 手动应用主题（模拟 ThemeProvider 的逻辑）
                const root = document.documentElement;
                root.classList.remove('light', 'dark');

                let effectiveTheme = theme;
                if (theme === 'auto') {
                    effectiveTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
                }

                root.classList.add(effectiveTheme);
                root.setAttribute('data-theme', effectiveTheme);

                console.log('✅ Applied theme to DOM:', effectiveTheme);

                // 3. 更新状态显示
                updateCurrentStatus();

                // 4. 显示成功消息
                alert(`✅ 主题已切换到: ${theme}\n实际应用: ${effectiveTheme}\n\n请打开 Options 或 Popup 页面验证主题是否同步！`);

            } catch (error) {
                console.error('❌ Theme test failed:', error);
                alert(`❌ 测试失败: ${error.message}`);
            }
        }

        // 自动测试
        async function runAutoTests() {
            const results = [];

            // 测试 1: Chrome Storage API 可用
            try {
                await chrome.storage.local.get('user_settings');
                results.push({ name: 'Chrome Storage API', pass: true });
            } catch (error) {
                results.push({ name: 'Chrome Storage API', pass: false, error: error.message });
            }

            // 测试 2: DOM 操作
            try {
                const root = document.documentElement;
                root.classList.add('test-class');
                const hasClass = root.classList.contains('test-class');
                root.classList.remove('test-class');
                results.push({ name: 'DOM Class 操作', pass: hasClass });
            } catch (error) {
                results.push({ name: 'DOM Class 操作', pass: false, error: error.message });
            }

            // 测试 3: Media Query 支持
            try {
                const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
                const supported = mediaQuery !== null;
                results.push({
                    name: 'Media Query 支持',
                    pass: supported,
                    extra: `System theme: ${mediaQuery.matches ? 'dark' : 'light'}`
                });
            } catch (error) {
                results.push({ name: 'Media Query 支持', pass: false, error: error.message });
            }

            // 显示结果
            const resultsHTML = results.map(result => {
                const className = result.pass ? 'pass' : 'fail';
                const icon = result.pass ? '✅' : '❌';
                const extra = result.extra ? `<br><small>${result.extra}</small>` : '';
                const errorMsg = result.error ? `<br><small>Error: ${result.error}</small>` : '';
                return `
                    <div class="status ${className}">
                        ${icon} <strong>${result.name}</strong>: ${result.pass ? 'PASS' : 'FAIL'}
                        ${extra}${errorMsg}
                    </div>
                `;
            }).join('');

            document.getElementById('autoTestResults').innerHTML = resultsHTML;
        }

        // 初始化
        updateCurrentStatus();
        runAutoTests();

        // 每秒更新状态（监听变化）
        setInterval(updateCurrentStatus, 1000);

        console.log('🎨 Theme Test Page Ready!');
        console.log('📋 Use buttons to test theme switching');
    </script>
</body>
</html>