Dark Mode Considerations

Canvas applications for Android and iOS support dark themes. The dark mode option was implemented to accommodate light-sensitive users, those who read in the evening, or who prefer the dark mode appearance. Dark mode may present challenges when styling Canvas content. Canvas default colors change in dark mode. By default, dark text becomes white.

Light Mode

The blockquote at the top of our Wonderful World of Tea page was styled with 'background-color: #fefefa`, a very light grey color. By default, the page looks like this in the Canvas Mobile app in light mode.

Wonderful World of Tea page in Canvas Mobile App in light mode

Dark Mode

If a user has the Canvas Mobile running in dark mode, the page would look like this. Because the text turns white in dark mode, it is difficult or impossible to read text against a light background.

Wonderful World of Tea page in Canvas Mobile App in light mode default font color

Simple Fix

This style attribute on the div, color:#2d3b45;, is telling Canvas to use a dark grey for the text in the container, rather than inherit the default dark mode font color.

By specifying a dark color on light backgrounds, you can ensure that the text will be visible in the mobile app, even if it is running in dark mode.

<div style="color: #2d3b45; background-color: #fefefa; border: 1px solid #b2b2af; padding: 10px 20px 10px 20px;">
        <blockquote>...</blockquote>
        ...
    </div>
<p>Tea is an aromatic beverage... </p>

You may also notice that the text below the blockquote box, "Tea is an aromatic beverage..." is white. This is the default behavior. No text color was specified for these paragraphs.

Wonderful World of Tea page in Canvas Mobile App in dark mode with font color specified as #2d3b45