zhangxiang
045c5095c1
- tailwind.config.js darkMode 从 'class' 改为 ['variant', '[data-theme="dark"] &'] - 'class' 模式匹配 .dark class，但站点用 html[data-theme='dark'] 属性，导致 dark: 变体全局失效 - variant 模式让 dark:bg-foo 类生成 [data-theme="dark"] .dark\:bg-foo 选择器 - 验证：临时加 dark:bg-blue-500 → CSS 含正确选择器；运行时浅色 bg=white、深色 bg=rgb(59,130,246) 回归测试脚本： - darkmode-selector-verify.mjs：合成探针验证 utility 生效 - home-cta-verify.mjs：定位 home 本地简化 CTASection 实际渲染（之前误判为'不渲染'） 诚实标注： - 全站 grep dark: utility class 仅发现 cta-button.tsx 2 处，但均为 TS 对象 key（非 utility），故 dark: 失效问题无直接破坏 - 修复属'基础设施补全'：未来添加 dark: 工具类即按 data-theme='dark' 自动生效 home-content-v15.tsx 的 CTASection（line 978-998）是**文件本地简化版** （仅标题 + CTAButton，无 BrandStamp），与 src/components/sections/cta-section.tsx （含 BrandStamp「值得信赖」）是不同组件。前者实际渲染，后者无路由使用（待用资产）。 本修复不涉及 CTASection 渲染路径。 验证： - type-check 0 error - lint 0 error - 编译产物含 [data-theme="dark"] .dark\:bg-blue-500 选择器 - 运行时合成探针 PASS（浅色 white / 深色 blue）
42 lines
1.7 KiB
JavaScript
42 lines
1.7 KiB
JavaScript
// 验证 darkMode selector 配置生效
|
|
import { chromium } from 'playwright';
|
|
const browser = await chromium.launch();
|
|
|
|
async function probe(theme) {
|
|
const ctx = await browser.newContext({ viewport: { width: 1280, height: 800 } });
|
|
const page = await ctx.newPage();
|
|
// 先建立 origin
|
|
await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
|
|
await page.evaluate((t) => {
|
|
if (t === 'dark') localStorage.setItem('novalon-theme', 'dark');
|
|
else localStorage.removeItem('novalon-theme');
|
|
}, theme);
|
|
// 重新加载让内联脚本读 localStorage 设置 data-theme
|
|
await page.goto('http://127.0.0.1:3000/', { waitUntil: 'networkidle' });
|
|
await page.waitForTimeout(1500);
|
|
const out = await page.evaluate(() => {
|
|
const probe = document.createElement('div');
|
|
probe.className = 'bg-white dark:bg-blue-500';
|
|
probe.style.cssText = 'position:fixed;top:-9999px;width:50px;height:50px;';
|
|
document.body.appendChild(probe);
|
|
const bg = getComputedStyle(probe).backgroundColor;
|
|
const htmlTheme = document.documentElement.getAttribute('data-theme');
|
|
probe.remove();
|
|
return { bg, htmlTheme };
|
|
});
|
|
await ctx.close();
|
|
return out;
|
|
}
|
|
|
|
const light = await probe('light');
|
|
const dark = await probe('dark');
|
|
await browser.close();
|
|
|
|
console.log('light:', JSON.stringify(light));
|
|
console.log('dark :', JSON.stringify(dark));
|
|
|
|
const lightOk = light.bg === 'rgb(255, 255, 255)' && light.htmlTheme !== 'dark';
|
|
const darkOk = dark.bg === 'rgb(59, 130, 246)' && dark.htmlTheme === 'dark';
|
|
console.log(`\n[assert] light bg=white, no data-theme: ${lightOk}`);
|
|
console.log(`[assert] dark bg=blue, data-theme=dark: ${darkOk}`);
|
|
console.log(`[result] ${lightOk && darkOk ? 'PASS' : 'FAIL'}`); |