Skip to content

Fix invisible email buttons in iOS Mail dark mode #10976

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
Merged
tommoor merged 3 commits into from
Dec 21, 2025
Merged

Fix invisible email buttons in iOS Mail dark mode #10976

tommoor merged 3 commits into from
Dec 21, 2025
+9 −1

Conversation

Copy link
Contributor

Copilot AI commented Dec 20, 2025 •
edited
Loading

iOS Mail renders email buttons invisible in dark mode due to black-on-dark color collision.

Changes

  • Button component: Added email-button class for CSS targeting
  • EmailLayout styles: Added prefers-color-scheme: dark media query to invert button colors
@media (prefers-color-scheme: dark) {
  .email-button {
    background: #FFFFFF !important;
    color: #000000 !important;
  }
}

Applies to all 19 email templates using the Button component. Compatible with iOS 13+ and other modern email clients supporting CSS media queries.

Before / After

iOS Mail Dark Mode - Before:
Invisible button

Visual Comparison:
Fix comparison

Original prompt

This section details on the original issue you should resolve

<issue_title>Invisible button in email on iOS's Mail app in dark mode</issue_title>
<issue_description>### Is there an existing issue for this?

  • I have searched the existing issues

This is not related to configuring Outline

  • The issue is not related to self-hosting config

Current Behavior

On iPhone's Mail app in dark mode I can't see button but can click while it invisible.

Image

On Mac's Mail app can see button in the same dark background

Image

Expected Behavior

I think have 2 ways for fix this issue

  1. force to light mode
  2. change only button background to light mode

Steps To Reproduce

  1. I use iOS 18 and MacOS 15
  2. Use dark mode
  3. Use Apple's Mail app

Environment

- Outline: v1.1.0
- Browser: Apple's Mail app in dark mode

Anything else?

No response</issue_description>

<agent_instructions>Take a look and see if we can use media queries in the email to invert the button color</agent_instructions>

Comments on the Issue (you are @copilot in this section)

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

@tommoor
Fix invisible button in iOS Mail app dark mode using CSS media queries
289dace 
Co-authored-by: tommoor <380914+tommoor@users.noreply.github.com>
Copilot AI changed the title [WIP] Fix invisible button in iOS Mail app dark mode Fix invisible email buttons in iOS Mail dark mode Dec 20, 2025
Copilot AI requested a review from tommoor December 20, 2025 19:19
@tommoor tommoor marked this pull request as ready for review December 20, 2025 19:25
@CLAassistant
Copy link

CLAassistant commented Dec 21, 2025

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
You have signed the CLA already but the status is still pending? Let us recheck it.

@tommoor tommoor merged commit 2959f2b into main Dec 21, 2025
3 of 4 checks passed
@tommoor tommoor deleted the copilot/fix-invisible-button-ios-mail branch December 21, 2025 01:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@tommoor tommoor Awaiting requested review from tommoor

Assignees

@tommoor tommoor

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Invisible button in email on iOS's Mail app in dark mode

3 participants

@CLAassistant @tommoor