Change Inside Course Colors

[jdm8d9]

Hi, I'm a student and I'd like to be able to change the color background or border of my courses once I'm inside them. I'm taking four classes right now and have to look at the top of the course to make sure I'm in the correct one. I've changed the colors of my course cards on the dashboard but that's not very helpful once I'm inside the course. Is there some other way I can distinguish one course from another once I'm inside the course? Thanks!

[Chris_Hofer]

Good morning,  @jdm8d9 ...

I'm glad that you were able to change the colors of your course cards on the dashboard.  That's about as far as you'll be able to customize things...as far as color goes, anyway.  More than likely, your local Canvas administrators at your campus have customized MU's Canvas environment to reflect the school colors.  These colors are usually set at the Canvas account level and apply to all courses at your school.  There's nothing that you can do as a student to change those colors inside a course.

I know this might not be the answer you were hoping for, but I do hope that it helps to answer your question...thanks!

[James · Accepted solution]

 @jdm8d9  

Chris is absolutely correct that there is nothing that you can do within the core Canvas product to do this. If you are using a browser to access Canvas, then there may be something you can do on your own. If you are using the mobile apps, then I do not know that you can do anything.

If I understand correctly, if blue was the color I had selected for my Math 113 course, then you want something like this:

There is a way to do this, but it requires writing a script that runs in the browser.

The script would need to

1. Only run on pages that were inside a course.
2. Use the get custom colors endpoint of the Users API to fetch the list of colors that should be used. This would allow you to automatically match it to the color on your dashboard and calendar. These come in the form of course_12345 and the color to use as an RGB code for the color. My Math 113 course has a course ID of 2687822 so I would need to find the course_2867822 key in the object and get that my color code is #0000FF (blue).
3. Determine the ID of the course. Within a browser, this is available by looking at the document.location.pathname property. It contains the portion of the URL or location after the hostname. On any page within my Math 113 course, it begins with /courses/2687822. I just need to grab that number. I use this to match up to the custom colors code.
4. Add a border to the element with id="wrapper" using CSS properties.

Then you install a user script manager like Tampermonkey, which is free and supported for the major browsers that Canvas supports except for Safari on a Mac. For Safari, you do have to pay a small amount for the user script manager.

You install the script into the user script manager and then you're good to go.

What I just described requires some advanced programming skills that most people probably do not have. To make it easier, I just went ahead and wrote the script for you.

What you need to do if you want to use it is

1. Install a browser userscript manager: Tampermonkey for Chrome/Firefox/Safari
2. Install the Color Course Border user script

It looks like your school is using a Canvas hosted by Instructure using a standard hostname, so it should work without further changes. If a school was using a name like canvas.missouri.edu, then some changes would need made to the configuration.

Note that the userscript manager must be installed on every computer that you want this to run on. If you are using your personal computer, this is an option. If you are using the school's computers, this is probably not going to work for you. If you are using a mobile app, this will not work for you.

If you would like this functionality built into Canvas, then you would need to create a feature idea. Even then, there's no guarantee that it would ever happen. I've never seen a request for this before, which means that there is probably little demand for it. I imagine that with a little practice and familiarity with the Canvas system, most people are able to remember which course they are in without the visual reminder. If you would like to make a feature request, then please start with https://community.canvaslms.com/docs/DOC-14903-75187841183 

[jdm8d9]

Thank you so much!!! I installed Tampermonkey and the script and am now able to see the border colors. I know it doesn't seem like much but it will help me so much with all my classes this semester.

[James]

I'm glad it worked for you. Good luck with your classes.

[robotcars]

I had written a script to do this for someone's feature idea, but I can't find that thread. I have the file and a blog post started for the developer tools tutorial. Here's the gist, Differentiates current course by colorizing the Global Nav with the Course Card Color · GitHub 

[James]

I figured someone would have had to have done this at some point 

I didn't scroll down one more entry in the API documentation to find the custom color for an asset. That would speed things up a little since it doesn't need to fetch all of them. I was having a slow internet day and things we crawling already.

I went with the border because of concerns about accessibility and making the entire background a particular color.

[robotcars]

Slow internet will destroy the best of things.

Found it. https://community.canvaslms.com/ideas/14710-change-colorstheme-based-on-the-course 

Hadn't considered much about accessibility as it's a user choice to use it, I changed the navigation color to try and give the biggest visual difference. I had also inspired after a recent installation of Peacock - Visual Studio Marketplace to help me switch between projects on my desktop.

[James]

It's the users choice, but that doesn't mean that the instructor won't do something crazy with colors on their pages that make it difficult to read. I wouldn't want a student to miss out on content because they couldn't see it. Most students don't think about this when they pick a color for their course.

I'm glad you were able to find that feature request. I was trying to debate whether or not to even list this on the Canvancements page; now that 2 people have wanted it maybe I should?

[robotcars]

Might be a good idea to provide one. I was going to use this as a boilerplate for the idea and Fetch api example for the Developer Tools for the Canvas User series. Seems like something people might tinker with and make use of.

[kurt_madison]

Pretty sure this is what I am looking for but "ACCESS DENIED: You do not have sufficient privileges for this resource or its parent to perform this action.

Click your browser's Back button to continue."

So I guess I can't do that

[Chris_Hofer]

Hi @kurt_madison ...

The link that @robotcars had provided in his reply was back when the Canvas Community was running under a different platform.  Back in Summer of 2020, Instructure moved to a new Community platform (what we are all using now), and some links did not re-direct automatically.  The good news is that if you know the name of the page from the old Community site, you can usually use any of the search boxes at the top of this Community site to find the page with the same name.  So, here is a current link to the page that was referenced:

Developer Tools for the Canvas User - Instructure Community (canvaslms.com)

Hope this helps a bit!