Microsoft Teams
A Microsoft customizable chat-based workspace.
10,463 questions
When share text with link by Navigator.share() text color is blue in Desktop app in dark mode
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(300.8, 46%, 39%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EYP%3C/text%3E%3C/svg%3E)
Yaroslav Pazhukh
0
Reputation points
When you try to share text with url by using JS Web Share API from your device then the text is shown in blue color and is not readable at all in Desktop dark mode. In light mode it looks great, in mobile devices in both modes it also looks good, the issue only in Desktop app in dark mode. My teammates also facing the same issue in their desktop/TM teams as well.
I am using: MS Teams - 24295.606.3238.6194 version
Macbook air M1 | macOS Sonoma Version 14.5
Desktop dark mode
Desktop light mode
Microsoft Teams
Microsoft Teams Development
Microsoft Teams Development
Microsoft Teams: A Microsoft customizable chat-based workspace.Development: The process of researching, productizing, and refining new or existing technologies.
3,401 questions
{count} votes
-
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(172.8, 5%, 26%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3ERS%3C/text%3E%3C/svg%3E)
Robin Sheng-MSFT 4,330 Reputation points Microsoft Vendor2024-11-27T01:53:59.8566667+00:00 In dark mode, text shared using JS Web Share API appears blue, making it difficult to read.
Teams tag is mainly focused on the general issue of Microsoft Teams troubleshooting. According to your description, your question is related to Teams Development which is not in our support scope. To better help you solve your problem, I will add the Teams Development tag to your post. Thanks for your understanding and patience!
The following suggestion is for your reference:
You can try adding custom CSS styles to the shared text and changing the backplate color to ensure that the text is readable in dark mode. Or use JavaScript to detect the user's theme mode and dynamically adjust the text color based on the mode.
-
Yaroslav Pazhukh 0 Reputation points
2024-11-27T18:24:03.3133333+00:00 Hi @Robin Sheng-MSFT , thanks for your reply.
In Navigator: share() method there are no way to add CSS styles, nor JS, we can only open mobile device's native share menu and pass text with link that should be shared.
Open Device's share menu
Text is automatically added to sharing feature (all text above the link will be hard to read in desktop dark mode).
Shared text visibility in desktop dark mode.
-
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(176, 78%, 27%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EPM%3C/text%3E%3C/svg%3E)
Prasad-MSFT 7,321 Reputation points Microsoft Vendor2024-11-28T05:01:26.0833333+00:00 We are mainly responsible for Microsoft Teams app development related issues.
For Microsoft Teams product issues/failures your tenant Admin can reach out to Microsoft 365 Product Support.
For general questions about Microsoft Teams please post your question on Microsoft Teams Community.
Sign in to comment
Sign in to answer