Creating a custom theme for your report: Pantone’s 2024 color template

Our Tech team is committed to regularly sharing posts filled with handy tips and tricks. We truly hope these simple hints will spark inspiration and assist you in adjusting it to your reporting.

This time, we'll talk about the style of your pivot grid and how to create a custom pivot table theme.

Choose one of our ready-made themes for your report

At Flexmonster, we prepared a variety of built-in predefined skins that can be easily applied to your reports. These skins include up to 18 predefined CSS layouts in different colors, ranging from our default classic gray to more extravagant black-orange combinations.

In this comprehensive guide, you’ll discover a variety of ready-to-use themes, along with step-by-step instructions for switching to each template. Additionally, explore predesigned demos to see how these themes will appear on your report, complete with various tried-on skins.

We also suggest you take a closer look at accessible theme with high contrast for a more distinct and clear visual experience if your application needs accessible support reports.

Design your custom theme

Developed to integrate with any project seamlessly, Flexmonster offers the flexibility to craft a personalized layout. It empowers you to tailor the Flexmonster Pivot grid to align with your brand’s aesthetic or add a flair and color to suit your preferences.

While manual customization is straightforward, it wouldn't be us if we didn't offer a way to make it even easier. Here, our custom pivot table theme builder comes in handy by notably simplifying and streamlining the process for developers.

“Peach fuzz” pivot grid template: creating a custom layout with Pantone Color of the Year 2024

For a showcase, we will use this year's Pantone color called ‘Peach Fuzz’— a soft, peachy hue that lends an unexpectedly appealing touch to the report.

🍑 See the template example we’ve created on Jsfiddle!

So, to start, clone the custom theme builder from our GitHub and install NPM dependencies.

✨After that, we start the actual styling!

In the custom-theme-builder/ folder, find and open the flexmonster.less  — a special file where you can find all the variables with corresponding styles that you can customize. 

In our case, we customize the basic elements by transitioning from the default gray theme palette to the color of our choice. For instance, we can modify the @theme-color variable to the ‘Peach Fuzz’ shade (hashed as🎨 #ffbe98). 

The result? — The main grid elements and the Toolbar icons are now displayed in peach color.

Next, you can select colors for all the elements in this file. It could be background colors, but you can also play with the styles of buttons, borders, and border lines of icons in the Toolbar, change fonts, etc.

Afterward, run the theme builder to generate the CSS and minified CSS files. Apply these files to the grid, and voilà — the fully packed theme with a peachy vibe is ready. 

As you can see, that was easy!

We’ve captured the entire process in a visual guide

Follow our YouTube video to recreate the steps. Customize your own themes to align with the corporate style of the software you’re developing. Let nothing hold you back! 🚀

We truly hope these simple hints will spark inspiration and assist you in adjusting it to your reporting.

Until next time, when our Tech team unveils something new to enhance your experience with our product — making it even more pleasant and insightful.