Skip to content

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

Merged
pmakode-akamai merged 3 commits into
linode:developfrom
pmakode-akamai:UIE-10181-light-dark-theme-identifier-in-cm-for-pendo
Feb 11, 2026
Merged

feat: [UIE-10181] - Add light/dark theme identifier in Cloud Manager for Pendo#13381
pmakode-akamai merged 3 commits into
linode:developfrom
pmakode-akamai:UIE-10181-light-dark-theme-identifier-in-cm-for-pendo

Conversation

@pmakode-akamai
Copy link
Copy Markdown
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
Copy Markdown

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
Copy Markdown

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
Copy Markdown
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
@pmakode-akamai pmakode-akamai added Approved Multiple approvals and ready to merge! and removed Add'tl Approval Needed Waiting on another approval! labels Feb 11, 2026
@pmakode-akamai pmakode-akamai merged commit e66a988 into linode:develop Feb 11, 2026
35 checks passed
@github-project-automation github-project-automation Bot moved this from Approved to Merged in Cloud Manager Feb 11, 2026
This was referenced Feb 19, 2026
Closed
Closed
Merged
Merged
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

Analytics Relating to Pendo or Adobe Analytics Approved Multiple approvals and ready to merge!

Projects

Cloud Manager
Archived in project

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