Mastering Dark Mode Design

[JuditTarnoy]

As educators, we meticulously craft our learning materials, pouring time and effort into creating engaging and informative content for our students.
But have you ever stopped to consider how your students are actually viewing that content? In today's digital world, a growing number of students
are opting for dark mode on their devices, and if your materials aren't optimized for this setting, you might be inadvertently hindering their learning
experience.

Dark mode, a display setting that uses a dark background with light text, has become increasingly popular and often makes it easier to stay
focused longer. Around 60-70% of mobile app users use dark mode on their phone. 

Dark Mode Will Stay With Us!

In 2025, it’s no longer just about aesthetics—it’s about personalization, accessibility, and battery efficiency. 

One of the benefits of dark mode is that it prevents the tired, dry, and itching eyes you may get from looking at a brightly lit screen. You can also save significant battery usage by using apps in dark mode. Dark mode screens can also support users with visual impairments, such as cataracts, astigmatism as well as those with light sensitivity. There are also studies saying the benefits are not as high as it is usually perceived, however, it is not debatable that many users prefer a dark mode aesthetic, which may be reason enough to support it.

Industry considerations were taken into account as well when we incorporated dark mode support into our mobile applications:

• Canvas mobile applications have long sessions: Users typically spend a lot of time looking at the screen in one sitting,
  like reading course pages, which has a greater chance of eye irritation or intensive battery consumption.
• The application is frequently used even in dark environments to open messages or check notifications, students
  check messages automatically (even if it's dark/at night)
• Canvas Mobile applications have to be compliant with the latest WCAG requirements.
• Dark mode settings support dynamic configuration, it can follow the device behavior. 
• Application icon should be easily recognizable between other applications

How It Works In Canvas Mobile Applications Today

Dark mode functions by inverting the standard light-on-dark color scheme seen on most screens. Instead of presenting dark text on a light background, it shows light text on a dark background.  Recently, we introduced new color shades to enhance our dark mode. These shades aim to provide better dark mode support while avoiding the use of pure black (#000000). We created a transformation logic to support institutional and theme colors in dark mode as well.

We support better identification on the Canvas Mobile applications with the renewed application icons. Most of our non-student
users are using more than 1 application on their device (80% of our instructors and guardians). With new icons, even in monochrome,
our apps are easily distinguishable and support the 4.5 : 1 ratio in color contrast (requirement from WCAG). See in table below. 

	Student App	Teacher App	Parent App
Original Icons In Light Mode
New Icons In Light Mode
New Icons In Monochrome Mode

What Can Go Wrong With Course Content?  

In the Canvas mobile apps, when a user uses dark mode, the application transforms institutional and course colors, default backgrounds, as
well as text and link colors to dark mode related colors to ensure the sufficient contrast and visibility. The application does not adjust custom
text, link or background colors. As a typical user you will see simple black & white inversion. Sometimes there is a slight shade change in some
theme colors as well, but custom background, text or link colors are not transformed to any other color. 

This shift presents a new challenge for educators. Content that looks fantastic in light mode can be difficult to read or even jarring in dark mode.
Imagine a brightly colored infographic suddenly appearing against a dark background – it can be overwhelming and distracting. Similarly, light
text on a light background, which might seem like an obvious error, can become a real problem if the text color has not enough contrast. 

Let me share some examples:

Example for a hardy visible texts on the chart in dark mode Example for shade adjustment in the course color
Examples for text - customization

Key Considerations For Content Creators

So, what can you, as an instructor or as a course administrator do to ensure your content is accessible in both light and dark modes?

• Contrast is King: Ensure sufficient contrast between your text and background colors. Avoid light text on a light background (even
  if it's not pure white) and dark text on a dark background. A good rule of thumb is to use online contrast checkers to verify WCAG
  (Web Content Accessibility Guidelines) compliance. This will benefit all students, not just those using dark mode. You can find useful
  tips on how to modify text in our user guide.
  
  
• Image Optimization: Be mindful of images with light backgrounds. These can appear stark and out of place in dark mode. Consider
  using images with transparent backgrounds or, if possible, providing alternative versions optimized for dark mode. If your image contains
  text on the background as well, like in our example, maybe the best solution is to use fixed background color.
  
  
• Test, Test, Test: The best way to ensure your content looks good in both modes is to test it! View your materials on devices with both
  light and dark mode enabled. This will allow you to identify any potential issues and make necessary adjustments.
  
  
• Consider Dark Mode from the Start: When creating new content, think about dark mode from the initial design phase. This can help you
  make informed decisions about color palettes, image choices, and overall layout.
  
  
• Last Resort: Canvas apps display on the pages a switcher (Switch To Light Mode) for dark mode users to show only the content in light mode.
  
  

By taking these simple aspects, you can ensure that your content is accessible and engaging for all your students, regardless of their preferred
display settings. Embracing dark mode compatibility is not just about following a trend; it's about creating a more inclusive and effective learning
environment for every student.

Thank you for your dedication and effort in creating a more user-friendly and engaging experience that caters to the needs and preferences of
emerging generations. We appreciate your commitment to staying ahead of the curve and adapting to the evolving digital landscape.

[ArjenHeijstek]

@JuditTarnoy Thank you for this interesting and helpfull blogpost! I will pass it forward to our 'Make Canvas Student Friendly' team.

[aasmund_kvamme]

@JuditTarnoy , thank you for a comprehensive blogpost! With regret I see that my own content doesn't work here: 

light mode, showing LaTeX element

dark mode, LaTeX element not showing

The two mathematical formulas are made using Insert Equation in Canvas, and inserted as automatically generated images: 

<img class="equation_image" title="\epsilon=0,\!001" src="https://hvl.instructure.com/equation_images/%255Cepsilon%253D0%252C%255C!001?scale=1" alt="LaTeX: \epsilon=0,\!001" data-equation-content="\epsilon=0,\!001" data-ignore-a11y-check="" />

I gather I'll have to live with this?

[adam_c_voyton]

It's nice this is getting prioritized, and design considerations are being shared on it. I'm a big fan of dark mode, it's just easier on the eyes. 

[JuditTarnoy]

@aasmund_kvamme thx for bringing it up. 👍
We will definitely take a look, if there is any tweak we can do during the transformation. 

[dbrace]

Thank you for this write-up, @JuditTarnoy.

Are the resources at the linked located below going to be updated?  Some of them are from 2021 and/or 2023.

• https://www.instructure.com/about/brand-guide
• https://www.instructure.com/resources/ebooks/instructure-brand-guide-2023
• https://www.instructure.com/about/brand-guide/download-logos

I am asking because for my institution in the mobile app for our "portal", we have tiles available for opening the "Canvas Student" and "Canvas Teacher" apps for iOS and Android (our "portal" vendor, using a mix of group membership and device recognitions, has the ability to only show the appropriate tiles) and it would be nice to be able to update/use the correct teacher tile.

Thank you!

-Doug

[JuditTarnoy]

thank you, @dbrace , let me contact with you, Doug

[DuranShamily]

Dark Mode is consider a privacy modification and it was well needed.

[cms_hickss]

You might not be able to answer this (yet), but since Mobile has gone Dark 🙂 Do you happen to know when browser parity might be available for dark mode? Like with High Contrast Mode, can we expect a toggle to enable it for browsers?

I ask this because it might be beneficial for Teachers and content designers to be able to preview what the content they are working on will look like in a dark mode setting.

[chriscas]

Hi @JuditTarnoy,

This is fantastic info, thanks for sharing!

As a Canvas Administrator (and also a dark-mode user), I know this is a very complex thing to implement in a way that works for most people.  While this blog gives some great design advice and tips to make dark mode work optimally, I feel like it's a big challenge to get the info to faculty and have them understand the issues and take the time to review them.  While students make wide use of mobile apps for content consumption, I think a vast majority of faculty are doing content development through the web interface on a computer, where dark mode is not available right now.  We're already asking a lot of our faculty, especially with the new Title II Accessibility regulations looming in the near future.  Making updates for accessibility would be a perfect time to address some of the dark-mode issues, but I don't think it's realistic to have all of our teachers checking content on multiple devices in different modes.

With all of that being said, I have two main questions/suggestions...

1. Is there a dark mode coming for web canvas?  If so, I hope it will exactly mirror the functionality available in the mobile apps and not be something that has additional caveats for everyone to consider when designing and creating content
2. Can the accessibility checker built into the RCE be improved to look for some of the things mentioned above and flag them as issues.  I feel like hard-coded black font should just be wiped out almost automatically and reverted back to auto color (which would fix a lot of issues from copy/pasting from sources outside of Canvas).  I feel like the very dark, but not exactly black, colors should at least be flagged for potential contrast issues with dark mode.  Make this easy for faculty to identify and do some of the fixing for them...

Obviously not everything can be auto-fixed, but I feel that teachers need easier ways to identify the issues as they are creating content than what is available right now.

I'm curious to hear Instructure's thoughts about all of this.

-Chris

[JuditTarnoy]

Thanks for raising the branding aspect, @dbrace. We're continuing to partner with our Marketing and Branding teams to have everything updated later this year, NORAM summer 2025. 

[JuditTarnoy]

Hi Chris,

Thank you so much for your insightful message and for recognizing the complexity of implementing dark mode across Canvas. We truly appreciate your understanding of the challenges involved, especially regarding faculty adoption and the need for seamless integration. It's clear you're deeply invested in making Canvas a better experience for everyone, and we value your perspective as a Canvas Administrator.

You've hit the nail on the head regarding the intricacies of dark mode and the importance of ensuring a consistent experience, particularly as we navigate accessibility regulations.

Here are my responses to your questions:

1. Dark Mode for Web Canvas:

You're right, dark mode on the web is a highly requested feature, and we recognize its importance. We are actively exploring its implementation. While our current focus is on other UI priorities, such as ensuring consistent UI behavior and achieving WPAT compliance, I can confirm that dark mode is definitely on our radar. We aim to investigate a solution that mirrors the functionality of our mobile apps as closely as possible, minimizing additional caveats for content creators.

2. Enhancements to the Accessibility Checker:

We are actively considering ways to improve the accessibility checker and potential contrast problems in dark mode. We're exploring how to integrate these checks seamlessly into the workflow to make it easier for faculty to identify and rectify potential issues.

To further this discussion and incorporate your valuable insights, I'd like to extend a warm invitation to join our Block Editor work group. This group is focused on enhancing the content creation, and your participation in the validation process, would be incredibly beneficial. We believe your experience and perspective would be invaluable in shaping these improvements. Via this form you can submit your request to join to this group:  https://docs.google.com/forms/d/e/1FAIpQLSeEvcdp_R5oA-CHpPOH8vgEcvxeasvUXrEenHsBWDTTta9PSw/viewform 

We agree that making these processes easier for faculty is paramount. We are committed to finding solutions that streamline content creation and ensure accessibility for all users.

Thank you again, Chris, for your thoughtful feedback and for being a strong advocate for accessibility and user experience within Canvas. We look forward to potentially collaborating with you in our Block Editor work group.

Best regards,
Judit 

[DrTerriC]

We have been having a similar problem with a student taking a quiz in dark mode.  What I have noticed that in the questions that appear black on black there is a span code that sets the color as #000000... in the other questions where the Span is not present.. the student can see the text. the accessibility checker says its all ok.. but students are not seeing the question text if the span HTML code is present..(this also happened on responses as well).