EA: use adaptive-css feature for light/dark model (#635)

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 readthedocs/ethical-ad-client#229

Author: humitos

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.
@@ -346,8 +343,11 @@ 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") ||
+      // 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";
     } else {

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,

tests/__snapshots__/ethicalads.test.snap.js

@@ -2,7 +2,7 @@
 export const snapshots = {};
 
 snapshots["EthicalAd addon ad placement defined by the user"] = `<div
-  class="ad-flat"
+  class="ad-flat adaptive-css"
   data-ea-campaign-types="community|paid"
   data-ea-keywords="docs|data-science"
   data-ea-manual="true"
@@ -15,7 +15,7 @@ snapshots["EthicalAd addon ad placement defined by the user"] = `<div
 /* end snapshot EthicalAd addon ad placement defined by the user */
 snapshots["EthicalAd addon ad placement injected"] =
 `<div
-  class="raised"
+  class="adaptive-css raised"
   data-ea-campaign-types="community|paid"
   data-ea-keywords="docs|data-science"
   data-ea-manual="true"