The Instructure Community will enter a read-only state on November 22, 2025 as we prepare to migrate to our new Community platform in early December. Read our blog post for more info about this change.
Found this content helpful? Log in or sign up to leave a like!
1 Solution
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
- Only run on pages that were inside a course.
- 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).
- 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.
- 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
- Install a browser userscript manager: Tampermonkey for Chrome/Firefox/Safari
- 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
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
- Only run on pages that were inside a course.
- 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).
- 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.
- 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
- Install a browser userscript manager: Tampermonkey for Chrome/Firefox/Safari
- 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
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.
Community help
To interact with Panda Bot, our automated chatbot, you need to sign up or log in:
Sign in