Fix invisible email buttons in iOS Mail dark mode by Copilot · Pull Request #10976 · outline/outline

Copilot · 2025-12-20T19:06:41Z

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:

Visual 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.

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

Expected Behavior

I think have 2 ways for fix this issue

force to light mode

change only button background to light mode

Steps To Reproduce

I use iOS 18 and MacOS 15

Use dark mode

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)

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

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

Co-authored-by: tommoor <380914+tommoor@users.noreply.github.com>

CLAassistant · 2025-12-21T01:27:21Z

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.}

This PR contains the following updates: | Package | Update | Change | |---|---|---| | [outlinewiki/outline](https://github.com/outline/outline) | minor | `1.1.0` → `1.2.0` | --- ### Release Notes <details> <summary>outline/outline (outlinewiki/outline)</summary> ### [`v1.2.0`](https://github.com/outline/outline/releases/tag/v1.2.0) [Compare Source](outline/outline@v1.1.0...v1.2.0) #### What's Changed ##### Highlights **Diagrams.net** diagrams are now fully supported, insert new diagrams through the block menu or by uploading an existing png that was created in Diagrams.net – the original diagram data will be preserved and can be edited by clicking the "Edit" button in the image toolbar. **Custom emoji** are now available – upload your own custom emoji in the admin settings and use them in your documents, comments, reactions, and icons. **Improved revision history** with the ability to download any revision as HTML or Markdown, toggle whether changes are visible, and an improved rendering engine that retains more of the original document's formatting and structure. **Authentication provider management** has been added to the settings, allowing admins to view and manage all configured authentication providers in one place. This includes the ability to disable providers, which will prevent users from signing in with that provider but will not delete any existing accounts. **Passkey support** has been added as an optional login method. You can now sign in with biometric authentication (TouchId, Windows Hello) or security keys instead of a password. Existing workspaces will need to enable this on the authentication providers screen. ##### Other improvements - The sidebar design was improved and refined in [#10684](outline/outline#10684) - It is now possible to upload and embed PDFs in [#10198](outline/outline#10198) - A "Popular" tab is now available for documents, popular docs are ranked higher in search in [#10721](outline/outline#10721) - A visual color palette is now available in the icon picker in [#10696](outline/outline#10696) - Avatar changes are now synced automatically from iDP in [#10718](outline/outline#10718) - User initials now supported in mention search in [#10797](outline/outline#10797) - New option to distribute table columns evenly in [#10645](outline/outline#10645) - Mermaid diagrams now have an explicit "Edit" option in the toolbar in [#11060](outline/outline#11060) - Added filtering to the notifications UI in [#10916](outline/outline#10916) - Added CSV export for member list in [#10803](outline/outline#10803) - Added CIDR range support to `ALLOWED_PRIVATE_IP_ADDRESSES` in [#10923](outline/outline#10923) - Add ContextMenu to RevisionListItem in [#10952](outline/outline#10952) - The GitHub integration now supports fetching details on public issues/PRs in [#10827](outline/outline#10827) - It is no longer required to use a public bucket for avatar images in [#10977](outline/outline#10977) - Implemented RFC 9700 hardening against refresh token reuse in [#10960](outline/outline#10960) - PKCE OAuth clients can now use refresh tokens in [#10769](outline/outline#10769) - Support for PostgreSQL multi-host connection URIs in `DATABASE_URL` in [#10754](outline/outline#10754) - Many internal performance improvements ##### Fixes - Fixed display issues in share dialog in [#10662](outline/outline#10662) - Incompatibility between path and query search terms in [#10667](outline/outline#10667) - Restored ability to resize shared sidebar in [#10669](outline/outline#10669) - UI does not update when deleting API key in [#10670](outline/outline#10670) - Invalid access of `firstChild` for mermaid diagrams in [#10668](outline/outline#10668) - Plain text copy-to-clipboard serializer no longer squashes blocks in [#10683](outline/outline#10683) - When TOC extends beyond window bounds ensure headings scroll in [#10687](outline/outline#10687) - Added missing drop cursor in top position in [#10689](outline/outline#10689) - `Empty trash` button is now hidden when missing permissions in [#10704](outline/outline#10704) - Fixed search popover on public pages in [#10717](outline/outline#10717) - Multiple improvements to sitemap generation for public shares in [#10716](outline/outline#10716) - Fixed in-document find fails with multiple escaped characters in [#10735](outline/outline#10735) - Improved validation of urls extracted from data transfer event in [#10740](outline/outline#10740) - Middle-mouse button on internal link in Firefox no longer opens multiple tabs in [#10748](outline/outline#10748) - Fixed collection filter returning documents from all collections when no search query in [#10775](outline/outline#10775) - Templates are now inserted at cursor position instead of document start in [#10783](outline/outline#10783) - Shift paste with selection no longer inserts next to selection in [#10799](outline/outline#10799) - Fixed an issue where some Mermaid diagrams can't be expanded in [#10807](outline/outline#10807) - Collection overview now respects the separeat editing mode setting in [#10816](outline/outline#10816) - Query strings not forwarded on internal links from editor in [#10854](outline/outline#10854) - Shutdown during migrations does not release mutex lock in [#10879](outline/outline#10879) - `profileId` extraction in OIDC does not fallback to `token.sub` in [#10882](outline/outline#10882) - Fixed an issue where custom rate limiters were ignored due to mountPath mismatch in [#10893](outline/outline#10893) - Viewer role now replaced correctly on downgrade to guest in [#10877](outline/outline#10877) - Validation of `SECRET_KEY` environment variable tightened in [#10897](outline/outline#10897) - Fixed double pagination in `documents.list` and `documents.archived` with `sort=index` in [#10895](outline/outline#10895) - Comment actions now reliably appear in mobile drawer in [#10904](outline/outline#10904) - Fixed extra newlines in pasted code blocks in [#10958](outline/outline#10958) - Parser crash when pasting inline code containing checkboxes by [@hdoo42](https://github.com/hdoo42) in [#10949](outline/outline#10949) - Fixed an issue where context menus could have context menus (menuception) in [#10974](outline/outline#10974) - Fixed invisible email buttons in iOS Mail dark mode in [#10976](outline/outline#10976) - Restored 'Create a doc' item in mention menu in [#10980](outline/outline#10980) - User with "can edit" permission on sub-document can now sort child documents in [#10990](outline/outline#10990) - Large base64 images pasted as HTML are now correctly handled in [#10982](outline/outline#10982) - Appending content via API no longer messes with existing document content in [#10998](outline/outline#10998) - Image warp exiting lightbox now correct in [#10999](outline/outline#10999) - Grips are now positioned correctly adjacent merged table cells in [#11003](outline/outline#11003) - Export no longer link to a non-accessible location for non-admins in [#11070](outline/outline#11070) #### New Contributors - [@nwleedev](https://github.com/nwleedev) made their first contribution in [#10759](outline/outline#10759) - [@hdoo42](https://github.com/hdoo42) made their first contribution in [#10949](outline/outline#10949) **Full Changelog**: <outline/outline@v1.1.0...v1.2.0> </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR is behind base branch, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).  Reviewed-on: https://gitea.alexlebens.dev/alexlebens/infrastructure/pulls/3075 Co-authored-by: Renovate Bot <renovate-bot@alexlebens.net> Co-committed-by: Renovate Bot <renovate-bot@alexlebens.net>

Initial plan

326a28f

Copilot AI assigned Copilot and tommoor Dec 20, 2025

Copilot started work on behalf of tommoor December 20, 2025 19:07 View session

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

Copilot finished work on behalf of tommoor December 20, 2025 19:19

tommoor marked this pull request as ready for review December 20, 2025 19:25

Add border

f38d9ba

tommoor merged commit 2959f2b into main Dec 21, 2025
3 of 4 checks passed

tommoor deleted the copilot/fix-invisible-button-ios-mail branch December 21, 2025 01:27

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix invisible email buttons in iOS Mail dark mode#10976

Fix invisible email buttons in iOS Mail dark mode#10976
tommoor merged 3 commits into
mainfrom
copilot/fix-invisible-button-ios-mail

Copilot AI commented Dec 20, 2025 •

edited

Loading

Uh oh!

CLAassistant commented Dec 21, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

Copilot AI commented Dec 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Before / After

This is not related to configuring Outline

Current Behavior

Expected Behavior

Steps To Reproduce

Environment

Anything else?

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

Uh oh!

CLAassistant commented Dec 21, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Copilot AI commented Dec 20, 2025 •

edited

Loading