Changing themes

Step 1. To get the theme builder, download it as ZIP or clone it with the following commands:

git clone https://github.com/flexmonster/custom-theme-builder
cd custom-theme-builder

Step 2. Install the npm dependencies described in package.json:

npm install

Step 3. In the custom-theme-builder/ folder, find and open the flexmonster.less file that contains styles for Flexmonster. Then, adjust the necessary styles.

For example, let's change font styles and the theme's main color:

// Other styles
@font-family: serif;
@font-size: 15px;
@theme-color: antiquewhite;
// Other styles

Other CSS styles can be customized similarly. 

Step 4. Run the theme builder to generate CSS and minified CSS files for the theme:

npm start

As a result, the flexmonster.css and flexmonster.min.css files will appear in the custom-theme-builder/generated-theme/ folder.

Step 5. Apply your theme to the component.

Now launch the page from a browser — your custom theme is set for the component.

Watch the video with the demonstration of how the custom theme builder is used to create a new theme:

Step 1. Inside the theme/ folder, duplicate any folder with an existing theme to use as a template (e.g., lightblue/).

Step 2. Rename the duplicated folder to a custom theme name (e.g., custom-theme-folder/).

Step 3. Set custom styles in the theme/[custom-theme-folder]/flexmonster.less file.
After replacing the values, compile flexmonster.less into CSS and minified CSS files. For more details, see the Less documentation.

Note We do not recommend editing the styles inside the theme/[custom-theme-folder]/flexmonster.css file. Otherwise, if you update the Flexmonster package, you will need to manually merge the updated Flexmonster styles into your theme’s flexmonster.css.

Step 4. Apply your theme to the component.

Now launch the page from a browser — your custom theme is set for the component.