Skip to Main Content

How To Create A Theme

Customizing Clone

Not a fan of Clone's default theme? No problem!

Clone has a set of built-in variables that you can customize through Sass that will allow you to control a variety of fonts, colours, whitespace, etc. Simply pick and choose the variables you want to customize from the list below and add them to your Sass file, directly above Clone's import function:

// My Custom Clone Theme
// Please note that the order of the instructions/includes below is important to maintain.

// Include Clone's Variables
// Doing this gives you access to the default variables in the event you'd like to use one of them as a value in your custom theme variables.
@import "node_modules/clone-framework/app/scss/core/_defaults";

// Your Clone Theme Variables
// Put any of the variables you'd like to customize here. A list of all the available variables can be found at: https://designwithclone.ca/themes/how/
$clone-grid-columns: 8;
$clone-c1: #5B1647;

// Include Clone
@import "node_modules/clone-framework/app/scss/clone";

[data-clone] {
    // Custom CSS for your app goes here.
}

Theme Variables