diff --git a/package-lock.json b/package-lock.json index 7873986..a3194bc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 0c9f9a7..efb4529 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "root", "private": true, - "version": "0.0.11", + "version": "0.0.12", "type": "module", "workspaces": [ "packages/page-controller", diff --git a/packages/page-agent/package.json b/packages/page-agent/package.json index 538f510..fe12a76 100644 --- a/packages/page-agent/package.json +++ b/packages/page-agent/package.json @@ -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" } } diff --git a/packages/page-controller/package.json b/packages/page-controller/package.json index b130b5d..ab5c376 100644 --- a/packages/page-controller/package.json +++ b/packages/page-controller/package.json @@ -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", diff --git a/packages/ui/package.json b/packages/ui/package.json index b10d581..57ef2e1 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -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", diff --git a/packages/ui/src/checkDarkMode.ts b/packages/ui/src/checkDarkMode.ts index 18f284e..e4cf890 100644 --- a/packages/ui/src/checkDarkMode.ts +++ b/packages/ui/src/checkDarkMode.ts @@ -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 and
- 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 and because some pages set the color on 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