Updating Themes using Stylesheets

How to update the theme for courses using Stylesheets

To apply and preview the new font family, navigate to the <head> area of the "designer-preview" component and add the font family CDN link under <head> tag
Select the --th-body-font / --th-header-font and update the font family name
Open the style1.css & style2.css in any code editor of your choice

Update the font family import link at line 4
Update CSS Variable --th-body-font & --th-header-font at line 20 & 21 respectively
Note: The default theme font family used is "Lato”

All colours and font families used for the themes are declared as CSS variables for better management
All components and widget colours and font family are further declared as variables which are related to the themes colour and font family variables
All external URL calls should be declared at the start of the CSS
Fontawesome icon library used for the icon display
Multiple versions of Fontawesome have been used for backward compatibility
All themes related updates done under style1.css should need to be replicated to style2.css for Preview

Important: Kindly follow the suggested best practices to create a customized theme more effectively.

Note: The style1.css is used for the New Editor Authoring mode and style2.css is used for the New Editor Preview mode.

Updating style1.css

To apply new theme changes modify the CSS variable or CSS properties as applicable by following the steps mentioned below

Note: Right click will not work in New Editor preview mode, as it would trigger the "Comment" feature

Choose the "Select an element in the page to inspect it - Ctrl + Shift + C" tool, and choose the targeted element (e.g. Accordion/Tabs etc.)
The selected element CSS properties will appear under the "Styles" section in the right panel
To modify the variable value, click on the CSS variable name. This will navigate to the :root { ... } area of the style1.css Identify the CSS variable to modify

Updating style2.css

To apply new theme changes modify the CSS variable or CSS properties as applicable by following the steps below

Note: Right click will not work in New Editor preview mode, as it would trigger the "Comment" feature

Choose the "Select an element in the page to inspect it - Ctrl + Shift + C" tool, and choose the targeted element (e.g. Accordion/Tabs etc.)
The selected element CSS properties will appear under the "Styles" section in the right panel
To modify the variable value, click on the CSS variable name. This will navigate to the :root { ... } area of the style2.css Identify the CSS variable to modify
The ID #pc-main has been used as the parent wrapper for the New Editor preview section. Therefore, all the ID/Classes present under the style1.css are also present under style2.css and are preceded by the ID #pc-main

Uploading Customized Theme to Frost