Skip to content

feat: [UIE-10181] - Add light/dark theme identifier in Cloud Manager for Pendo #13381

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

Jump to bottom
Open
pmakode-akamai wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

feat: [UIE-10181] - Add light/dark theme identifier in Cloud Manager for Pendo #13381

pmakode-akamai wants to merge 3 commits into from

Conversation

@pmakode-akamai
Copy link
Contributor

@pmakode-akamai pmakode-akamai commented Feb 9, 2026 •
edited
Loading

Description 📝

Currently, there's no identifer for third-party tools like Pendo to detect whether the app is in light or dark mode. This PR adds a theme identifier so Pendo can apply appropriate styling. Third-party tools (like Pendo) should be able to use this as selector: body[data-theme="dark"] or body[data-theme="light"]

Important

We're using a custom data-theme attribute instead of a CSS class because it's the proper way to store application state according to HTML5 standards. CSS classes are meant for styling, and this approach avoids conflicts with our existing CSS while giving Pendo a reliable selector to detect the current theme.

Changes 🔄

  • Set custom data attribute on document body for third-party tools (like Pendo) to detect application theme

Scope 🚢

  • All customers

Target release date 🗓️

N/A

Preview 📷

Screenshot 2026-02-09 at 6 17 31 PM
Screenshot 2026-02-09 at 6 21 16 PM

How to test 🧪

Verification steps

  • Check attribute is set correctly:
    • Open DevTools -> Elements tab
    • Inspect <body> element
    • Verify data-theme="light" or data-theme="dark" is present (based on the current theme)
  • Test the selector:
    • Open DevTools -> Console and run:
      document.querySelector('body[data-theme="dark"]') (when in dark mode, should return element Otherwise null)
Author Checklists

As an Author, to speed up the review process, I considered 🤔

👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support

  • I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

  • All tests and CI checks are passing
  • TypeScript compilation succeeded without errors
  • Code passes all linting rules

@pmakode-akamai pmakode-akamai self-assigned this Feb 9, 2026
@pmakode-akamai pmakode-akamai added the Analytics Relating to Pendo or Adobe Analytics label Feb 9, 2026
@pmakode-akamai pmakode-akamai marked this pull request as ready for review February 9, 2026 13:13
@pmakode-akamai pmakode-akamai requested a review from a team as a code owner February 9, 2026 13:13
@davyd-akamai
Copy link

davyd-akamai commented Feb 9, 2026

Great job, team! I have just one concern: in Pendo, it states that a CSS selector is required, and there’s no guidance on using data-theme as an alternative. I’ve shared the PR link with Susana so she can confirm whether it can be used for the Pendo use case.
image

@linode-gh-bot
Copy link
Collaborator

linode-gh-bot commented Feb 9, 2026

Cloud Manager UI test results

🎉 866 passing tests on test run #2 ↗︎

❌ Failing✅ Passing↪️ Skipped🕐 Duration
0 Failing866 Passing11 Skipped36m 46s

@pmakode-akamai
Copy link
Contributor Author

pmakode-akamai commented Feb 10, 2026

Great job, team! I have just one concern: in Pendo, it states that a CSS selector is required, and there’s no guidance on using data-theme as an alternative. I’ve shared the PR link with Susana so she can confirm whether it can be used for the Pendo use case.

Thanks @davyd-akamai! We may/should be able to use these custom attributes, which are generally more reliable in cases like this. Since HTML attribute selectors are valid CSS selectors, Pendo should support targeting them using selectors such as body[data-theme="dark"] or [data-theme="dark"] (potentially with some configuration in the Pendo dashboard if needed).

Pendo also has related docs that seems to support this approach:

Thanks for sharing the PR with Susana for confirmation on the Pendo use case.

@pmakode-akamai pmakode-akamai added the Add'tl Approval Needed Waiting on another approval! label Feb 10, 2026
@github-project-automation github-project-automation bot moved this from Review to Approved in Cloud Manager Feb 10, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@tvijay-akamai tvijay-akamai tvijay-akamai approved these changes

@bnussman-akamai bnussman-akamai bnussman-akamai approved these changes

@abailly-akamai abailly-akamai Awaiting requested review from abailly-akamai

+1 more reviewer

@davyd-akamai davyd-akamai davyd-akamai approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@pmakode-akamai pmakode-akamai

Labels

Add'tl Approval Needed Waiting on another approval! Analytics Relating to Pendo or Adobe Analytics

Projects

Cloud Manager
Status: Approved

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@pmakode-akamai @davyd-akamai @linode-gh-bot @tvijay-akamai @bnussman-akamai