fix(build): 改 darkMode 为 variant 模式让 Tailwind dark: 变体按 data-theme='dark' 触发

- 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)
This commit is contained in:
2026-09-20 11:50:58 +08:00
parent 918d845aef
commit 045c5095c1
3 changed files with 68 additions and 1 deletions
@@ -0,0 +1,42 @@
// 验证 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'}`);
+25
View File
@@ -0,0 +1,25 @@
// 验证 home 本地 CTASection 实际渲染(含 BrandStamp 的是 src/components/sections/cta-section.tsx
import { chromium } from 'playwright';
const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1280, height: 800 } });
await page.goto('http://127.0.0.1:3000/', { waitUntil: 'networkidle' });
await page.waitForTimeout(2000);
await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
await page.waitForTimeout(2000);
const dump = await page.evaluate(() => {
// home 本地简化版的特征 className
const homeCta = document.querySelector('section.relative.py-24.sm\\:py-32');
// 公开 cta-section 的特征 id
const srcCta = document.querySelector('section#cta');
// BrandStamp 容器特征(inline-block px-3 py-1.5 border-2 border-[var(--color-brand)] rounded-sm
const stamp = document.querySelector('.inline-block.px-3.py-1\\.5.border-2');
return {
homeCtaPresent: !!homeCta,
homeCtaText: homeCta ? (homeCta.textContent || '').slice(0, 60) : null,
srcCtaPresent: !!srcCta,
brandStampPresent: !!stamp,
};
});
await browser.close();
console.log(JSON.stringify(dump, null, 2));
+1 -1
View File
@@ -5,7 +5,7 @@ module.exports = {
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
],
darkMode: 'class',
darkMode: ['variant', '[data-theme="dark"] &'],
theme: {
extend: {
colors: {