Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Aug 28, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a1e16aa
EA: use `adaptive-css` feature for light/dark model
humitos Aug 27, 2025
abfed91
Use beta client on our docs and furo theme
humitos Aug 28, 2025
add6b41
Update tests
humitos Aug 28, 2025
2a69df1
Add small comment
humitos Aug 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions src/ethicalads.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand Down Expand Up @@ -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");

Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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 {
Expand Down
25 changes: 1 addition & 24 deletions src/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
}
};
Expand Down Expand Up @@ -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,
Expand Down
4 changes: 2 additions & 2 deletions tests/__snapshots__/ethicalads.test.snap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand Down