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.

If you use Less, we advise creating your own theme based on one of the existing ones. Then, follow the steps below:
Step 1. Add custom code at the end of the flexmonster.less file. For example, the following code will change the style of the component’s sheet header:

#fm-pivot-view .fm-grid-layout div.fm-sheet-header {
  background-color: @theme-color-superdark !important;
  color: @theme-color-supersuperlight;
}

You can customize other Flexmonster elements in the same way.
Step 2. Compile the flexmonster.less file into CSS and minified CSS files. For more details, see the Less documentation.

Step 3. Apply your theme to the component.

To apply additional customization using plain CSS, write a custom CSS code in a separate file (e.g., my-flexmonster-styles.css) and keep the original styles in flexmonster.css without changes.

Look at the following example: how to add custom CSS for the grid. It demonstrates how grid colors can be changed via additional CSS.