Customize Pre-Existing Theme Files

When you download source files for a theme, you gain access to the HTML, Sass, and assets used by that theme. You can customize the HTML and Sass files directly within your Workspace directory. Best practice when making changes to existing Sass variables, is to edit the existing Sass files directly.

To customize a pre-existing theme file:

  1. Open the theme directory in your top-level development directory.

    For example:

    Workspace/<THEME_DIRECTORY>/

  2. Locate the subdirectory containing the file or files you want to customize.

    For example, if you want to customize one or more of the colors for the base theme, locate the _colors.scss file in the theme’s BaseSassStyles module:

    Workspace/<THEME_DIRECTORY>/Modules/BaseSassStyles/Sass/variables/_colors.scss

  3. Edit the HTML or Sass file within the associated module.

    You can edit the file directly. In this example, you want to change the color for success messages to a different shade of green and so you find the $sc-color-success variabe and change the color value from #097839 to #0d852d.

  4. Save the file.

  5. Repeat this procedure for any other theme-related HTML or Sass files you intend to customize.

    See Best Practices for Creating Themes to learn more about customizing theme files.

Next Steps

When you are ready, use the theme developer tools to test or deploy your theme. See Test and Deploy Your Theme for details.

To learn about additional capabilities offered with themes, see Do More With Themes.

For guidance about how best to customize your themes, see:

Related Topics

Develop Your Theme
Edit the Theme Manifest

General Notices