zoushiyang/page-agent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #80 from alibaba/fix/isPageDark

Browse Source 
fix: isPageDark robust
This commit is contained in:
Simon
2025-12-17 14:44:17 +08:00
committed by GitHub
parent 0ef84bac13 bc1e8fea3c
commit 59235263ad
7 changed files with 38 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{
"name": "root",
"version": "0.0.11",
"version": "0.0.12",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "root",
"version": "0.0.11",
"version": "0.0.12",
"license": "MIT",
"workspaces": [
"packages/page-controller",
@@ -7184,23 +7184,23 @@
}
},
"packages/page-agent": {
"version": "0.0.11",
"version": "0.0.12",
"license": "MIT",
"dependencies": {
"@page-agent/page-controller": "0.0.11",
"@page-agent/ui": "0.0.11",
"@page-agent/page-controller": "0.0.12",
"@page-agent/ui": "0.0.12",
"chalk": "^5.6.2",
"zod": "^4.2.0"
}
},
"packages/page-controller": {
"name": "@page-agent/page-controller",
"version": "0.0.11",
"version": "0.0.12",
"license": "MIT"
},
"packages/ui": {
"name": "@page-agent/ui",
"version": "0.0.11",
"version": "0.0.12",
"license": "MIT",
"dependencies": {
"ai-motion": "^0.4.7"
@@ -7208,7 +7208,7 @@
},
"packages/website": {
"name": "@page-agent/website",
"version": "0.0.11",
"version": "0.0.12",
"devDependencies": {
"@tailwindcss/vite": "^4.1.18",
"@types/react": "^19.2.2",

2
package.json
View File

@@ -1,7 +1,7 @@
{
"name": "root",
"private": true,
"version": "0.0.11",
"version": "0.0.12",
"type": "module",
"workspaces": [
"packages/page-controller",

6
packages/page-agent/package.json
View File

@@ -1,7 +1,7 @@
{
"name": "page-agent",
"private": false,
"version": "0.0.11",
"version": "0.0.12",
"type": "module",
"main": "./dist/esm/page-agent.js",
"module": "./dist/esm/page-agent.js",
@@ -46,7 +46,7 @@
"dependencies": {
"chalk": "^5.6.2",
"zod": "^4.2.0",
"@page-agent/page-controller": "0.0.11",
"@page-agent/ui": "0.0.11"
"@page-agent/page-controller": "0.0.12",
"@page-agent/ui": "0.0.12"
}
}

2
packages/page-controller/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "@page-agent/page-controller",
"version": "0.0.11",
"version": "0.0.12",
"type": "module",
"main": "./dist/lib/page-controller.js",
"module": "./dist/lib/page-controller.js",

2
packages/ui/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "@page-agent/ui",
"version": "0.0.11",
"version": "0.0.12",
"type": "module",
"main": "./dist/lib/page-agent-ui.js",
"module": "./dist/lib/page-agent-ui.js",

41
packages/ui/src/checkDarkMode.ts
View File

@@ -3,14 +3,14 @@
* @returns {boolean} - True if a common dark mode class is found.
*/
function hasDarkModeClass() {
const DFEAULT_DARK_MODE_CLASSES = ['dark', 'dark-mode', 'theme-dark', 'night', 'night-mode']
const DEFAULT_DARK_MODE_CLASSES = ['dark', 'dark-mode', 'theme-dark', 'night', 'night-mode']
const htmlElement = document.documentElement
const bodyElement = document.body
const bodyElement = document.body || document.documentElement // can be null in some cases
// Check class names on <html> and <body>
for (const className of DFEAULT_DARK_MODE_CLASSES) {
if (htmlElement.classList.contains(className) || bodyElement.classList.contains(className)) {
for (const className of DEFAULT_DARK_MODE_CLASSES) {
if (htmlElement.classList.contains(className) || bodyElement?.classList.contains(className)) {
return true
}
}
@@ -70,7 +70,7 @@ function isColorDark(colorString: string, threshold = 128) {
function isBackgroundDark() {
// We check both <html> and <body> because some pages set the color on <html>
const htmlStyle = window.getComputedStyle(document.documentElement)
const bodyStyle = window.getComputedStyle(document.body)
const bodyStyle = window.getComputedStyle(document.body || document.documentElement)
// Get background colors
const htmlBgColor = htmlStyle.backgroundColor
@@ -93,18 +93,23 @@ function isBackgroundDark() {
* @returns {boolean} - True if the page is likely dark.
*/
export function isPageDark() {
// Strategy 1: Check for common dark mode classes
if (hasDarkModeClass()) {
return true
try {
// Strategy 1: Check for common dark mode classes
if (hasDarkModeClass()) {
return true
}
// Strategy 2: Analyze the computed background color
if (isBackgroundDark()) {
return true
}
// @TODO add more checks here, e.g., analyzing text color,
// or checking the background of major layout elements like <main> or #app.
return false
} catch (error) {
console.warn('Error determining if page is dark:', error)
return false
}
// Strategy 2: Analyze the computed background color
if (isBackgroundDark()) {
return true
}
// @TODO add more checks here, e.g., analyzing text color,
// or checking the background of major layout elements like <main> or #app.
return false
}

2
packages/website/package.json
View File

@@ -1,7 +1,7 @@
{
"name": "@page-agent/website",
"private": true,
"version": "0.0.11",
"version": "0.0.12",
"type": "module",
"scripts": {
"dev": "vite",