[Theme Editor] Dark Theme/Dark Mode for Canvas

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)

350 Comments
Jeff_F
Community Coach
Community Coach

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.

flux settings

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 -

screen capture

divi
Community Member

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
Community Champion

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
Community Novice

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

Kelvin_Dean
Community Contributor

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

rogerscolyn
Community Novice

That's quite the stereotype you have there

d_forcht
Community Novice

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
Community Novice

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
Community Contributor

Great idea!

scottdennis
Instructure
Instructure

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

Canvas Course Modules View

Here is what this feature idea looks like:

Canvas Community Feature Idea