From a1e16aaf5f6566e9e659e0dc4b26d52aaa02cb52 Mon Sep 17 00:00:00 2001 From: Manuel Kaufmann Date: Wed, 27 Aug 2025 12:59:45 +0200 Subject: [PATCH 1/4] EA: use `adaptive-css` feature for light/dark model Let EA to handle light/dark mode. We keep updating the internal variable `documentationThemeMode` just in case we need it in the future for now. We can remove it eventually if we want. Requires https://github.com/readthedocs/ethical-ad-client/pull/229 --- src/ethicalads.js | 9 +++------ src/utils.js | 25 +------------------------ 2 files changed, 4 insertions(+), 30 deletions(-) diff --git a/src/ethicalads.js b/src/ethicalads.js index 63880be5..5ccccb23 100644 --- a/src/ethicalads.js +++ b/src/ethicalads.js @@ -3,7 +3,6 @@ import { AddonBase } from "./utils"; import { default as objectPath } from "object-path"; import styleSheet from "./ethicalads.css"; import { IS_TESTING, docTool } from "./utils.js"; -import { THEME_DARK_MODE } from "./constants.js"; // https://docs.readthedocs.io/en/stable/advertising/ad-customization.html#controlling-the-placement-of-an-ad const EXPLICIT_PLACEMENT_SELECTORS = [ @@ -231,6 +230,9 @@ export class EthicalAdsAddon extends AddonBase { const campaign_types = objectPath.get(data, "campaign_types", []); if (placement !== null) { + // Allow EA to switch between light/dark mode + placement.classList.add("adaptive-css"); + // This ensure us that all the `data-ea-*` attributes are already set in the HTML tag. placement.setAttribute("data-ea-manual", "true"); @@ -259,11 +261,6 @@ export class EthicalAdsAddon extends AddonBase { ); } - // Add dark class to the ad when we detect dark mode from the beginning - if (docTool.documentationThemeMode === THEME_DARK_MODE) { - placement.classList.add("dark"); - } - if (placementStyle == "fixedfooter") { // Use a ``MutationObserver`` to listen to style changes in the fixed footer ad. // Grab the height of it and use to add some ``padding-bottom`` to the required elements. diff --git a/src/utils.js b/src/utils.js index 43e7b9bf..f92b92b1 100644 --- a/src/utils.js +++ b/src/utils.js @@ -447,7 +447,7 @@ export class DocumentationTool { console.debug("Observed element mutated.", mutationList, observer); for (const mutation of mutationList) { if (mutation.type === "attributes") { - this.updateAdThemeMode(); + this.documentationThemeMode = this.getDocumentationThemeMode(); } } }; @@ -647,29 +647,6 @@ export class DocumentationTool { return THEME_UNKNOWN_MODE; } - updateAdThemeMode() { - let placement; - // NOTE: can't be imported from `ethicalads.js` because cycle importing - const EXPLICIT_PLACEMENT_SELECTORS = [ - "#ethical-ad-placement", - "[data-ea-publisher]", - ]; - - for (const explicitSelector of EXPLICIT_PLACEMENT_SELECTORS) { - placement = document.querySelector(explicitSelector); - if (placement) break; - } - - if (!placement) return; - - this.documentationThemeMode = this.getDocumentationThemeMode(); - if (this.documentationThemeMode === THEME_DARK_MODE) { - placement.classList.add("dark"); - } else { - placement.classList.remove("dark"); - } - } - isSinglePageApplication() { const isSPA = DocumentationTool.SINGLE_PAGE_APPLICATIONS.includes( this.documentationTool, From abfed91561e2bcebf518aa7fcc58961afddf9680 Mon Sep 17 00:00:00 2001 From: Manuel Kaufmann Date: Thu, 28 Aug 2025 13:32:27 +0200 Subject: [PATCH 2/4] Use beta client on our docs and furo theme --- src/ethicalads.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/ethicalads.js b/src/ethicalads.js index 5ccccb23..55c47e79 100644 --- a/src/ethicalads.js +++ b/src/ethicalads.js @@ -343,8 +343,9 @@ export class EthicalAdsAddon extends AddonBase { // Inject the Ethical Ad client (beta) only for our own documentation. let src; if ( - window.location.hostname === "docs.readthedocs.io" || - window.location.hostname.endsWith(".devthedocs.org") + window.location.hostname === "docs.readthedocs.com" || + window.location.hostname.endsWith(".devthedocs.org") || + docTool.isSphinxFuroLikeTheme() ) { src = "https://media.ethicalads.io/media/client/beta/ethicalads.min.js"; } else { From add6b4195a4fc1999caf467dd1d16f55e25bf84e Mon Sep 17 00:00:00 2001 From: Manuel Kaufmann Date: Thu, 28 Aug 2025 13:32:45 +0200 Subject: [PATCH 3/4] Update tests --- tests/__snapshots__/ethicalads.test.snap.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/__snapshots__/ethicalads.test.snap.js b/tests/__snapshots__/ethicalads.test.snap.js index 0c4c9f9e..88ad7b36 100644 --- a/tests/__snapshots__/ethicalads.test.snap.js +++ b/tests/__snapshots__/ethicalads.test.snap.js @@ -2,7 +2,7 @@ export const snapshots = {}; snapshots["EthicalAd addon ad placement defined by the user"] = `
Date: Thu, 28 Aug 2025 13:33:22 +0200 Subject: [PATCH 4/4] Add small comment --- src/ethicalads.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/ethicalads.js b/src/ethicalads.js index 55c47e79..1ff0b651 100644 --- a/src/ethicalads.js +++ b/src/ethicalads.js @@ -345,6 +345,8 @@ export class EthicalAdsAddon extends AddonBase { if ( window.location.hostname === "docs.readthedocs.com" || window.location.hostname.endsWith(".devthedocs.org") || + // Use new beta client on Furo like themes for now. + // This allows us to test the dark/light mode. docTool.isSphinxFuroLikeTheme() ) { src = "https://media.ethicalads.io/media/client/beta/ethicalads.min.js";