Canvas Theme Editor Components
This document discusses components used to create custom Canvas themes for an institution.
The Theme Editor allows admins to create custom Canvas themes for their institution using colors and images. However, images, logos, and watermarks do not appear for users who enable the High Contrast Styles user feature setting. For specific help with image files, please view the Canvas Theme Editor Image Templates resource document.
Override CSS and JavaScript files may also be uploaded to the Theme Editor for HTML view and Canvas app view, respectively. However, please be aware that custom files may overwrite any colors supported for high contrast styles; for instance, changing a link color to red in a custom css file will also show as red to users with high contrast styles, which may create accessibility issues. As noted in the Theme Editor upload window, using custom css/js files is an option but it means you are responsible for maintaining any code that creates a conflict against what Canvas supports in the Theme Editor.
Unless otherwise noted, the following Theme Editor components apply to the web version of Canvas. Some Global Branding and Global Navigation components also apply to the Canvas mobile apps.
Global Branding
Primary Brand Color: Primary color used throughout Canvas, primarily shown in course navigation links and Dashboard toggle icon. Used in Canvas Student and Canvas Teacher apps for Global Navigation, Inbox, and course selection colors. Default value is #008ee2.
Main Text Color: Color for text used throughout Canvas. Used when entering text on the Login page on the Canvas Student, Canvas Teacher, and Canvas Parent apps. Default value is #2d3b45.
Link Color: Color for hyperlinks used throughout Canvas. Used for external link icons and download icons. Also shows in the mobile login page Forgot Password link. Default value is #008ee2.
Primary Button: Color for the primary buttons in Canvas; if a color is not set, the Primary Button assumes the Primary Color. Used to theme buttons and links throughout Canvas Student and Canvas Teacher apps. Also used for Log In button color in Canvas Student, Canvas Teacher, and Canvas Parent apps.
Primary Button Text: Color for the text shown as part of the primary buttons. Used for Log In button text in Canvas Student, Canvas Teacher, and Canvas Parent apps. Default value is #ffffff.
Secondary Button: Color for the secondary buttons in Canvas. Default value is #2d3b45. This component is currently not used in the Canvas interface.
Secondary Button Text: Color for the text shown as part of the secondary buttons. Default value is #ffffff. This component is currently not used in the Canvas interface.
Global Navigation
Nav Background: Color for the background in the Global Navigation Menu. Also used to color the background of the address bar in web browsers. Default value is #394b58.
Nav Icon: Color for the icons in the Global Navigation Menu. Also used to color the Visibility and Settings icons in SpeedGrader. Default value is #ffffff.
Nav Icon Active: Color for the active (selected) icon in the Global Navigation Menu. If no color is set, the Nav Active Icon assumes the Primary Color.
Nav Text: Color for the text in the Global Navigation Menu. Also used to color the text of the top navigation bar in the Canvas Student and Canvas Teacher apps. Additionally, Nav Text is used to color the Gradebook icon in SpeedGrader. Default value is #ffffff.
Nav Text Active: Color for the active text in the Global Navigation Menu. If no color is set, the Nav Active Text assumes the Link color.
Nav Avatar Border: Color used for the border around the Account link icon. Default value is #ffffff.
Nav Badge: Color used for the unread message badge in the Inbox icon. If no color is set, Nav Badge assumes the Primary Color.
Nav Badge Active: Color for the active (selected) badge in the Global Navigation Menu. If no color is set, the Nav Badge Active assumes the Primary Color.
Nav Badge Text: Color used for the number in the unread message badge in the Inbox icon. If no color is set, Nav Badge assumes the Primary Color.
Nav Badge Text Active: Color for the active text in the Global Navigation Menu. If no color is set, the Nav Badge Active Text assumes the Link color.
Nav Logo Background: Color for the background of the logo in the Global Navigation Menu. Default value is #394b58.
Nav Logo: Logo at the top of the Global Navigation Menu (supports svg, png, and jpg files). Also used as the logo in the top navigation bar in the Canvas Student and Canvas Teacher apps on iOS devices. Default is the Canvas logo.
Watermarks & Other Images
Watermark: Light background image that appears behind page content; display size is subjective based on uploaded file size, so if the image is too small or too large for your design preference, resize the image accordingly (supports png, svg, gif, jpg files). Default is no image.
Watermark Opacity: Opacity (transparency) of your watermark. Default is 100% (no image transparency).
Favicon: Small icon shown in the browser tab (supports 16x16, 32x32 and 48x48 ico files). Default is Canvas favicon.
Mobile Homescreen Icon: Icon shown when Canvas is bookmarked from a browser on a mobile device (supports 180x180 png files). Default is the Apple touch icon.
Users of newer Windows versions (8+) can pin sites and apps to the home screen on their Windows phones. The Windows fields are optional but allow you to offer customization options to Windows phone users. However, Windows tiles still show the favicon set in the Theme Editor, if any.
Windows Tile Color: Color for the Windows tile. If no color is set, the Windows Tile Color assumes the Primary Color.
Windows Tile Image Square: Image for the square version of the Windows tile (supports 1.8x the standard tile size (558x558 svg, png, jpg, gif files). Default is the Windows tile image.
Windows Tile Image Wide: Image for the wide version of the Windows tile (supports 558x270 svg, png, jpg, gif files). Default is the Windows tile image.
Right Sidebar Logo: Logo shown above the right sidebar on the Canvas Dashboard, but when viewed on tablet devices or in browser windows with smaller screen resolutions, the logo is not visible because of space constraints; display size is subjective based on uploaded file size, but preferred image size is 360x140 (supports svg, png, jpg, gif). Default is no image.
Login Screen
The mobile login page is currently not supported with the login screen components but does support limited branding from the Global Branding components. Please note single sign-on links inherit settings from the Theme Editor.
Background Color: Color of the login background. Default value is #394b58.
Background Image: Image for the login background. Default is no image.
Body Shadow: Color for the body shadow. Default value is #2d3b45.
Login Logo: Logo shown at the top of the login page. Default is the Canvas logo.
Top Box Background: Color for the outside box around the Canvas logo, form, and footer. Default is no color.
Top Box Border: Color for the border for the top box. Default is no color.
Inner Box Background: Color for the inside box around the Canvas logo, form, and footer. Default is no color.
Inner Box Border: Color for the border for the inner box. Default is no color.
Form Background: Color for the background behind the login label and password fields, Forgot Password link, and Log In button. Default is no color.
Form Border: Color for the border around the form background. Default is no color.
Login Label: Color for the login label, password, and Stay Signed In checkbox text. Default value is #ffffff.
Login Link Color: Color for the Login button outline, Login button text, Inner Box links, Logout button outline, and Logout button text. Default value is #ffffff.
Login Footer Link: Color for the footer links. Default value is #ffffff.
Login Footer Link Hover: Color for the footer links on hover. Default value is #ffffff.
Login Instructure Logo: Color for the By Instructure logo. Default value is #ffffff.
Last update: 2021-07-21
This resource can also be accessed from the following Canvas Guides:
