Two bugs: 1. [data-theme="dark"] block was defined BEFORE :root in source CSS, so :root cascade overrode it. Moved to AFTER :root and bumped specificity to html[data-theme="dark"] to beat plain :root. 2. Theme toggle button only existed in the topbar, which is hidden on landing/login/sso-callback scenes. Added a ThemeToggle to the Landing header so users can flip theme from the home page. Confidence: high Scope-risk: narrow
29 lines
1.5 KiB
JavaScript
29 lines
1.5 KiB
JavaScript
import { chromium } from "playwright";
|
|
const b = await chromium.launch({
|
|
headless: true,
|
|
args: ["--host-resolver-rules=MAP canvas.flow-master.ai 65.21.71.186", "--ignore-certificate-errors"],
|
|
});
|
|
const ctx = await b.newContext({ viewport: { width: 1440, height: 900 } });
|
|
const p = await ctx.newPage();
|
|
await p.goto("https://canvas.flow-master.ai/", { waitUntil: "networkidle" });
|
|
await p.waitForTimeout(1500);
|
|
// Get the computed --bp-paper at root
|
|
console.log("html dataset.theme:", await p.evaluate(() => document.documentElement.dataset.theme));
|
|
console.log("--bp-paper (root):", await p.evaluate(() => getComputedStyle(document.documentElement).getPropertyValue("--bp-paper")));
|
|
console.log("body background:", await p.evaluate(() => getComputedStyle(document.body).backgroundColor));
|
|
|
|
// Force toggle data-theme via JS
|
|
await p.evaluate(() => document.documentElement.dataset.theme = "dark");
|
|
await p.waitForTimeout(200);
|
|
console.log("after force dark:");
|
|
console.log(" --bp-paper:", await p.evaluate(() => getComputedStyle(document.documentElement).getPropertyValue("--bp-paper")));
|
|
console.log(" body bg:", await p.evaluate(() => getComputedStyle(document.body).backgroundColor));
|
|
|
|
await p.evaluate(() => document.documentElement.dataset.theme = "light");
|
|
await p.waitForTimeout(200);
|
|
console.log("after force light:");
|
|
console.log(" --bp-paper:", await p.evaluate(() => getComputedStyle(document.documentElement).getPropertyValue("--bp-paper")));
|
|
console.log(" body bg:", await p.evaluate(() => getComputedStyle(document.body).backgroundColor));
|
|
|
|
await b.close();
|