[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)

[PatrickMarschie]

I am new to canvas with light sensitivity, and it is hard to read with the light backgrounds. Every other platform or user interface has a dark theme option. Canvas needs to step up to the plate and offer the option for everyone in my situation and those who need it for other reasons.

[gmosesx]

I just notified a student that the work was not posted in a Discussion, but the student sent me a screen shot of work from the mobile app in Dark Mode. Since I am viewing the Discussion in desktop Light Mode, the student's work--in white font--is totally invisible to me against a white background. However, now that I know the work is there, I can cursor over the page to find the font, then I can copy the text to TextEdit and put it in plain text to read. But that's not a sustainable work-around. Surely, there is a fix for this?

[benjamin_mcgaw]

Hi All, I've been watching this ticket for a while now and just wanted to say I'm loving the ios dark theme.

I'd greatly appreciate it if this feature could be implemented for the web version. From looking at the canvas tech stack you guys don't have a dedicated theming engine but there is tooling available in jquery UI. Even just a simple check that switches to a different stylesheet would be greatly appreciated.

[NatLeComte]

would like to add my cry for a dark mode for desktop/browser to the masses, white make brain hurt feel bad 😞

[JaredNewnam]

I'm ready for darkmode, too. Or at least update the software to initialize the user's machine preferences. 

[HughMcFall]

Dark mode for everything, it should be the default. 

[Sealenea]

Dark mode provides accessibility to people with ADHD and Dyslexia to name a couple of disabilities. It also may be healthier for students who spend a lot of time using screen-based study tools and required applications like this one. I personally find it very difficult to read black words on a white screen, so I would be very thankful for a dark mode setting for Canvas on desktop and on the android application.

[megan_horikawa]

I am so happy to see the dark mode in the IOS application. I hope it will be included in the browser/desktop version of canvas soon.

[KrystalLopez1]

I would love for this to happen

[StefanMielnik]

For anyone who is still suffering through the eye strain, I have found a workaround that allows a toggle of websites from a bookmark. If you want to revert to the original display style, just reload the page.
it does make some of the multiple choice question/answer field on quizzes and tests look weird though so be forewarned.

I wish I remembered who wrote this code, I lost the link, but it was immensely helpful for me.

copy the code below, make a new bookmark and paste it into the address field.

javascript:(function(){var newS, styles='* { background: black! important; color: white !important } :link, :link * { color: #0000EE%20!important%20}%20:visited,%20:visited%20*%20{%20color:%20#551A8B%20!important%20}';%20if(document.createStyleSheet)%20{%20document.createStyleSheet("javascript:'"+styles+"'");%20}%20else%20{%20newSS=document.createElement('link');%20newSS.rel='stylesheet';%20newSS.href='data:text/css,'+escape(styles);%20document.getElementsByTagName("head")[0].appendChild(newSS);%20}%20})();