dark mode text visibility

[ctdesigns]

Hey all!

Hope that you are doing well today. We are working on redesigning one of our courses and are having trouble with text being visible in light mode but invisible in dark mode (this is particularly an issue for mobile Canvas users). I've spent some time searching reddit, the greater learning community, and chatting with colleagues, but I haven't landed on a solution yet. I have included examples of the text visibility issues to this post. If any more information is needed, please do let me know, and I'll be happy to update with it.

Thanks kindly,

ct

[chriscas]

Hi @ctdesigns,

Are you able to post the HTML code behind the page (you can strip our actual content for copyright reasons, but any containers and things would be helpful to see).  It seems like you may be using some kind of table or background container with a defined white color, since your screenshot for "dark mode" is not actually dark in the text area.  How you're doing that might be affecting Canvas' attempts to make sure text on dark background in dark mode is light.  If Canvas doesn't realize there is a white background in that area for dark mode, this is exactly what would happen.  I'd actually even recommend not forcing a background color if that's possible, as I bet things would look fine if the background was black in dark mode.

Look forward to hearing back from you!

-Chris

[ctdesigns]

Hi @chriscas ,

Thanks so much for your willingness to help me with this issue. I have posted the relevant code below, with information redacted for confidentiality purposes:

<div style="border: solid 2px #b3b3b3;">
<div style="background-color: #fff; padding: 5% 7% 5% 7%;"><strong style="font-size: 1.4em;"><span style="font-size: 36pt;">TEXT&lt;img= "image goes here"/&gt;<br /></span></strong><span style="font-size: 24pt;"><span>TEXT</span></span></div>
<div style="background-color: #f5f5f5; padding: 5% 7% 5% 7%;">
<h3><strong><span style="font-size: 18pt;">TEXT</span></strong></h3>
<ol style="font-size: 14pt;">
<li data-leveltext="" data-font="Symbol" data-listid="3" data-aria-posinset="1" data-aria-level="1"><span style="font-size: 14pt;"><strong>TEXT</strong><br />TEXT<br /></span><br /><strong style="color: var(--ic-brand-font-color-dark); font-family: inherit;"></strong></li>
<li data-leveltext="" data-font="Symbol" data-listid="3" data-aria-posinset="1" data-aria-level="1"><span style="font-size: 14pt;"><strong><span style="color: var(--ic-brand-font-color-dark); font-family: inherit;">TEXT</span></strong><span style="color: var(--ic-brand-font-color-dark); font-family: inherit;"><strong>:</strong> <br />TEXT<br /><br /></span></span></li>
<li data-leveltext="" data-font="Symbol" data-listid="3" data-aria-posinset="1" data-aria-level="1"><span style="font-size: 14pt;"><strong>TEXT <br /></strong>TEXT</span></li>
</ol>
</div>
<div style="background-color: #fff; padding: 5% 7% 5% 7%;">
<h3 style="text-align: left;"><span style="font-size: 24px;"><strong>TEXT</strong></span></h3>
<p><span style="font-size: 14pt;">TEXT<a class="inline_disabled" href="URL">here</a>.</span></p>
<h3><strong><span style="font-size: 18pt;">Workshops</span></strong></h3>
<p>&nbsp;</p>
<p><span style="font-size: 14pt;">TEXT</span></p>
<h3><span style="font-size: 18pt;"><strong>How to Join a Zoom Session</strong></span></h3>
<p><span style="font-size: 14pt;">text</span></p>
<h3><strong><span style="font-size: 18pt;">text</span></strong></h3>
<p><span style="font-size: 14pt;">text <a class="inline_disabled" href="https://">here</a>.</span></p>
<h3><span style="font-size: 18pt;"><strong>Other Questions</strong></span></h3>
<p><span style="font-size: 14pt;">text.</span></p>
<p><span style="font-size: 14pt;">text <a href="mailto:" target="_blank" rel="noopener">email</a>. text </span><span style="font-size: 18.6667px;">text</span></p>
</div>
</div>
<footer>
<div style="background-color: #f5f5f5; padding: 5% 7% 5% 7%;">
<p><span style="font-size: 18pt; color: black;"><strong>Need help?</strong></span></p>
<p style="font-size: 14pt; color: black;"><span>For questions about using Canvas, </span></p>
</div>
</footer>

Let me know if there is any other information that I can provide at this time! 

ct

[chriscas · Accepted solution]

Hi @ctdesigns,

Thanks for the code.  I believe this is what I suspected, where you're defining background colors that just don't get interpreted for dark mode, and cause Canvas to display white text on a white/light background.

The footer section, where you explicitly define both the background (style="background-color: #f5f5f5) and font color (style="font-size: 14pt; color: black;") does display okay for me in dark mode, it's all of the other areas where just the background color is defined that become problematic.

The following solutions should work:

1. Remove all background and text color definitions.  This will let dark mode work as intended, where the background will be dark and text will be white.  I know this does interfere a bit with the visual design elements you're achieving with the different background colors though...
2. Explicitly define the text color as black in for all of your text areas, like what you already have in your footer.  That (currently) should make it so the font color doesn't get auto-adjusted to white in dark mode.

Do you think either of these options would be workable for you?

-Chris

[ctdesigns]

Hi @chriscas ,

Thank you so much for your response to this! I think this will work for us at this time. Appreciate the insight for this problem.

Best,

ct