Fix email template dark mode rendering by forcing light theme

[aswinms926]

Checklist

• I have read the OpenWISP Contributing Guidelines.
• I have manually tested the changes proposed in this pull request.
• I have written new test cases for new code and/or updated existing tests for changes to existing code.
• I have updated the documentation.

Reference to Existing Issue

Closes #490

Description of Changes

This change fixes the issue where some email clients automatically force dark mode
on email content, causing the logo to become nearly invisible.

The email template is updated to explicitly declare a light color scheme so that
email clients do not apply automatic dark mode transformations.

This ensures the email background remains white and the logo stays visible even
when the email client is set to dark mode.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 0c547d0a-80d3-44b2-a346-d6c7e7c5aace

📥 Commits

Reviewing files that changed from the base of the PR and between 127e1c6 and ff62765.

📒 Files selected for processing (1)

• openwisp_utils/admin_theme/templates/openwisp_utils/email_template.html

📜 Recent review details

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (14)

• GitHub Check: Python==3.13 | django~=5.1.0
• GitHub Check: Python==3.12 | django~=4.2.0
• GitHub Check: Python==3.12 | django~=5.2.0
• GitHub Check: Python==3.13 | django~=5.2.0
• GitHub Check: Python==3.11 | django~=5.2.0
• GitHub Check: Python==3.10 | django~=5.2.0
• GitHub Check: Python==3.10 | django~=5.0.0
• GitHub Check: Python==3.10 | django~=5.1.0
• GitHub Check: Python==3.11 | django~=5.1.0
• GitHub Check: Python==3.10 | django~=4.2.0
• GitHub Check: Python==3.11 | django~=5.0.0
• GitHub Check: Python==3.12 | django~=5.0.0
• GitHub Check: Python==3.12 | django~=5.1.0
• GitHub Check: Python==3.11 | django~=4.2.0

🔇 Additional comments (4)

openwisp_utils/admin_theme/templates/openwisp_utils/email_template.html (4)

8-8: LGTM!

The meta tag correctly declares a light-only color scheme, which prevents email clients from applying automatic dark mode transformations. This works well in combination with the CSS :root rule below.

---

11-13: LGTM!

The :root rule with color-scheme: light only; is the correct CSS approach for forcing light mode. The previously flagged invalid supported-color-schemes property has been properly removed.

---

80-85: LGTM!

Good defensive styling. The explicit white background on .logo-container provides a fallback to ensure logo visibility even if some email clients partially apply dark mode transformations.

---

197-201: LGTM!

The [data-ogsc] and [data-ogsb] attribute selectors correctly target Outlook's dark mode transformations on mobile. Using !important is appropriate here to override Outlook's injected styles and ensure the logo container maintains its white background.

---

📝 Walkthrough

Walkthrough

The email template was updated to force a light color scheme in email clients by adding a meta tag and a :root { color-scheme: light; } CSS rule. The .logo-container styling was changed to include a white background, padding, and border-radius. Additional rules were added to enforce a white background for .logo-container in high-contrast (data-ogsc) and dark-background (data-ogsb) contexts using !important. No data handling or control flow changes were made.

Sequence Diagram(s)

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~4 minutes

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately and specifically describes the main change: fixing email template dark mode rendering by forcing a light theme.
Description check	✅ Passed	The description covers the main objectives, issue reference, and change explanation. However, two checklist items (tests and documentation) are unchecked, indicating incomplete PR requirements.
Linked Issues check	✅ Passed	The PR successfully addresses issue #490 by implementing a light color scheme in the email template to prevent automatic dark mode transformations and keep the logo visible.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing dark mode rendering in the email template; no unrelated modifications or scope creep detected.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@openwisp_utils/admin_theme/templates/openwisp_utils/email_template.html`:
- Around line 12-15: Remove the invalid CSS declaration
"supported-color-schemes: light only;" from the :root block in the email
template and keep only the valid "color-scheme: light only;" property so
browsers and email clients don't silently ignore the rule; update the :root rule
in openwisp_utils/admin_theme/templates/openwisp_utils/email_template.html (the
:root CSS block) accordingly.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: a2fbe506-e86b-4303-9aea-a46ba457e5a9

📥 Commits

Reviewing files that changed from the base of the PR and between 918944a and 127e1c6.

📒 Files selected for processing (1)

• openwisp_utils/admin_theme/templates/openwisp_utils/email_template.html

📜 Review details

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (8)

• GitHub Check: Python==3.10 | django~=4.2.0
• GitHub Check: Python==3.12 | django~=5.1.0
• GitHub Check: Python==3.12 | django~=4.2.0
• GitHub Check: Python==3.11 | django~=5.2.0
• GitHub Check: Python==3.10 | django~=5.1.0
• GitHub Check: Python==3.12 | django~=5.0.0
• GitHub Check: Python==3.12 | django~=5.2.0
• GitHub Check: Python==3.13 | django~=5.1.0

🔇 Additional comments (3)

openwisp_utils/admin_theme/templates/openwisp_utils/email_template.html (3)

8-9: LGTM!

The meta tags correctly declare light-only color scheme using both the standard color-scheme and the Apple Mail-specific supported-color-schemes for maximum email client compatibility.

---

82-87: LGTM!

Explicitly setting background-color: #ffffff`` on the logo container ensures the logo remains visible when email clients apply dark mode transformations. The padding and border-radius are sensible visual improvements.

---

199-203: Good use of Outlook-specific dark mode selectors.

The [data-ogsc] and [data-ogsb] attribute selectors correctly target Outlook's dark mode states, and the !important declaration is appropriate here to override Outlook's injected styles.

Minor: Line 199 has trailing whitespace that could be cleaned up.

[openwisp-companion]

QA and Commit Message Failures

Hello @aswinms926,
(Analysis for commit 127e1c6)

There are two main issues identified in the CI logs:

1. Code Style/QA Failure: The file ./openwisp_utils/admin_theme/templates/openwisp_utils/email_template.html is missing a newline at the end.
2. Commit Message Failure: The commit message does not adhere to the required format.

Here's a breakdown of each failure and how to fix it:

---

1. Code Style/QA Failure: Missing Newline

• Explanation: The CI checks enforce that all files end with a newline character. The log indicates that ./openwisp_utils/admin_theme/templates/openwisp_utils/email_template.html violates this rule.
• Remediation: Add a single newline character at the very end of the file ./openwisp_utils/admin_theme/templates/openwisp_utils/email_template.html.

---

2. Commit Message Failure

• Explanation: The commit message validation failed because it does not follow the expected format. Specifically, it's missing the required issue number in the title and potentially the correct structure for the body.

• Remediation: Please reformat your commit message to follow the OpenWISP conventions. Ensure your commit message includes a prefix, a capitalized title, an optional issue number, and a blank line before the body, followed by the detailed description and a closing keyword with the issue number.

  Here is a template for a correct commit message:

  [prefix] Capitalized title #<issue_number>
  
  <Detailed description of the changes made.>
  
  Fixes #<issue_number>
  

  Example:

  [fix] Correct email template dark mode rendering #123
  
  Ensures the email template correctly renders in dark mode by forcing the light theme.
  This resolves an issue where the dark theme was causing readability problems.
  
  Fixes #123
  

[openwisp-companion]

Commit Message Failure

Hello @aswinms926,
(Analysis for commit fef6913)

Your commit message is failing the CI checks because it does not adhere to the expected format. Specifically, the commit message is missing a reference to the issue number in the body, even though it's present in the title.

Explanation:

The OpenWISP project enforces a strict commit message convention to ensure clarity and traceability. The checkcommit tool (or cz_openwisp) verifies that if an issue is mentioned in the commit title (e.g., #490), it must also be explicitly referenced in the commit body using keywords like Fixes, Closes, or Related to.

Remediation:

Please update your commit message to include the issue reference in the body. Here's a template for the correct format:

[fix] Force light color scheme in email #490

Some email clients automatically force dark mode on email content, making the logo invisible. Added color-scheme meta tag and CSS property to explicitly force a light color scheme. Removed the invalid supported-color-schemes meta tag and CSS property, keeping only the standard color-scheme.

Fixes #490

[coveralls]

coverage: 97.348%. remained the same
when pulling eb6cc66 on aswinms926:fix-email-darkmode
into bbe1520 on openwisp:master.