The Theme Editor supports desktop and mobile upload files. Standard CSS/JS files are applied to HTML pages in the Canvas desktop application, which can include the login page for mobile devices. Mobile CSS/JS files are only applied to user content displayed within the Canvas iOS or Android apps, as well as in third-party apps using the Canvas API, but mobile files do not apply to user content displayed in mobile browsers.
Custom File Risks
If you cannot use the native Theme Editor options for branding, you must be aware of the associated risks of using custom files, which may cause accessibility issues or conflicts with future Canvas updates:
- Custom files may conflict with future changes to the Canvas DOM (eg: element class names or HTML structure) and are therefore not supported. Instructure disclaims any liability for any changes made to your custom override files.
- You are responsible to review web content accessibility guidelines to ensure your files meet any web accessibility testing or other compliance standards that may be required in your jurisdiction. You are responsible for making your modifications accessible to screen readers, users with text contrast and color contrast needs, and users relying on High Contrast Styles as a user feature option.
- When experimenting with custom branding, always confirm your branding changes in your institution's beta environment or test environment.
- The Theme Editor is not available for two-week trial or Free-For-Teacher accounts.
- If you are a subaccount admin and the Themes link is not visible in Account Navigation, Themes has not been enabled for sub-accounts. If the CSS/JS Upload tab is not visible, file uploads have not been enabled for sub-accounts.
Open Theme Template
If you do not yet have a Canvas theme for your account, use a template to create a new theme. You can choose from the Default Canvas template, a minimalist template, and a State U. template. If your Customer Success Manager has enabled the K12-specific feature option, the K12 Theme also appears as a template.
To create a new theme, hover over a template and click the Open in Theme Editor button , or click the Add Theme button  and select a template from the list.
Open Saved Theme
If you previously created and saved a theme, you can edit saved themes at any time. Saved themes display in the My Themes section. To open a saved theme, hover over the name of the theme and click the Open in Theme Editor button .
To create a new theme based on a saved theme, click the Add Theme button  and select the name of the saved theme from the list. This option helps you avoid overwriting your previously saved theme.
Upload Custom Files
In the Theme Editor sidebar, click the Upload tab.
Locate the file type you want to upload and click the Select button , then locate the file on your computer.
Locate additional files for upload, if required.
To preview your theme, click the Preview Your Changes button.
Canvas will generate the preview of the components based on your uploaded files.
To manage your files, click the Upload tab again .
To remove and upload a new file, click the Remove icon . You can make additional changes and upload your revised file.
To view the code for your file, click the View File link . As the file is stored directly in Canvas, use this link if you ever need to download the file.
Once you are satisfied with your template changes, save your theme by clicking the Save Theme button.
Create Theme Name
If you modified a theme from a template, the Theme Editor creates a copy of the theme. Templates cannot be edited directly. In the Theme Name field , enter a name for your theme. Click the Save Theme button .
Note: If you edited a previously saved theme, saving the theme overwrites the previous version of the theme and uses the same theme name.
To apply your theme to your account, click the Apply button .
To exit the theme and return to the Themes page, click the Exit button . You can open the theme and apply it to your account at any time.
Note: If your account allows subaccounts to customize their own themes, any applicable changes you made will also filter down to any associated sub-accounts. Canvas shows the status of your Theme Editor updates; when the process for each subaccount is complete, the subaccount disappears from the progress window. When all subaccounts have been updated, the Theme Editor redirects back to the Themes page.