How To Put Canvas In Dark Mode

by

Canvas, a widely used online learning platform, has become an essential resource for both students and educators. However, some individuals may find its default bright theme too harsh, particularly when working during late hours. How convenient would it be if you could easily switch Canvas to dark mode and ease the strain on your eyes?

In this blog post, we will guide you through the process of enabling dark mode in Canvas. Let’s dive in!

Using Browser Extensions

Unfortunately, as of now, Canvas does not natively support dark mode. But don’t worry! You can still achieve this by using browser extensions such as Dark Reader or Night Eye.

Dark Reader

Dark Reader is a free browser extension that applies a dark theme to all websites, including Canvas. Follow these simple steps:

  1. Find the Dark Reader extension in your browser’s web store, install it.
  2. Once installed, click on the Dark Reader icon on the top right corner of your browser.
  3. In the drop-down menu, activate the dark mode by toggling the switch.

Night Eye

Another great tool is Night Eye. This is a paid tool, but it offers a free trial. Here’s how you use it:

  1. Find Night Eye in your browser’s web store and install it.
  2. When it’s installed, click on the Night Eye icon, located at the top right corner of your browser.
  3. In the drop-down menu that appears, select ‘Enable’

Using Custom CSS

If you’re more technically inclined, you can use custom CSS and a browser extension such as Stylus to apply a dark theme manually. Here’s how:

  1. Download and install the Stylus extension in your browser.
  2. Click on the Stylus icon and select ‘Manage Styles’.
  3. Click on ‘Write new style’.
  4. Name your style (e.g., “Canvas Dark Mode”).
  5. Now, enter the following code into the text area:
body {
    background-color: #2d2d2d;
    color: #ddd;
}

.instructure-ui-theme {
    --ic-brand-primary: #2d2d2d;
    --ic-brand-button--primary-bgd: #2d2d2d;
}

header, .ic-Layout-contentMain {
    background-color: #2d2d2d !important;
}

.instructure-ui-theme {
    --ic-brand-font-color-dark: #ddd;
}

After you’ve added the code, click on the Applies to section below the code area and add https://[your-school].instructure.com/* in the URL. Replace “[your-school]” with your school’s Canvas URL.

Finally, click on the ‘Save’ button, and voila! You have Canvas in dark mode.

Remember, custom CSS changes are only client-side, and they won’t affect other users.

Conclusion

There you have it, two easy ways to enable dark mode on Canvas and save your eyes from strain. Remember, whether you’re a night owl or just prefer a darker theme, don’t let a bright screen hold you back. Happy studying!