[Theme Editor] Dark Theme/Dark Mode for Canvas

[matthew_keatin1]

Hello all! I am a student, and I am here to suggest an idea that I thought would make Canvas more personalized. I think a dark theme would be great for Canvas since some students like to stay up at night (not me), and the bright white light from Canvas can hurt their eyes. The main reason why I want it is because it would look better on my computer. Youtube and Google have these options, why not Canvas? Thank you for reading!

  Comments from Instructure

While we are not able to announce that this idea has been completed, it is important to celebrate that Dark Mode has been added to Canvas Student, Canvas Teacher, and Canvas Parent. (2022-07-05)

• Canvas Teacher Release Notes (IOS 1.16)
• Canvas Student Release Notes (IOS 6.16)
• Canvas Parent Release Notes (IOS 3.6)

[Jeff_F]

Hello Anna!  Yes, these computer monitors sometimes feel like they are pulling the life right out of me -- when I retire I'll be sure to take a part time job out doors and will endeavor to leave anything with a screen at home.    For the time being I use the f.lux tool noted in the thread. I give it two thumbs up.

And I guess you could also experiment with a plug in such as: Stylish - Custom themes for any website - Chrome Web Store .  Here is a collection of pre-made styles at UserStyles.   But do be careful as these are not supported.  I'd be sad to start an exam to find out the browser extension was causing trouble.  I guess you could then disable the extension and reload the page...  but I probably wouldn't be comfy using it for something graded and important.

What my screen looks like -

[divi]

In regards to implementation: most browsers, such as Firefox and Safari, now support the prefers-color-scheme media query in CSS, allowing the browser to adapt to the color scheme setting from the system settings. If Canvas were to hypothetically implement a dark mode, using said browser feature would be desirable (at least by default).

Additionally, a thing to keep in mind with many third-party extensions or CSS files that add a dark mode to Canvas is that a Canvas update can easily break them.

[Steven_S]

I think this would be useful for both students and instructors, and as an instructor creating content, I would only ask for a toggle in the rich text editor allowing me to see the expected dark view mode while I'm editing.  That way I could make color choices that work in either setting.

[jlackner1]

The light screen also prevents you from making melatonin which is need for you to sleep.

[Kelvin_Dean]

I agree with you, Josh. Without melatonin, students will be more stressed, making them harder to sleep and memorize for exams.

[rogerscolyn]

That's quite the stereotype you have there

[d_forcht]

It would be amazing if you could change the color yourself as I can't even work on my homework that long as the bright white makes it so I can't even read what is on the screen after a while.

[4040673]

Thank you for bringing up this problem! I am always up studying my assignments late into the night, but the white background attacks my tired eyes. A relief it would be if my eyes weren't brutally attacked at night by light!

[tim_kato]

Great idea!

[scottdennis]

Just out of curiosity I turned on dark mode in Chrome.  Here is what my Canvas course looks like:

Here is what this feature idea looks like: