After reading how to apply predefined themes to the component, the next step is to create a custom theme.
- Open the
webdatarocks/theme/folder, create a new folder inside and name it respectively to the name of your theme, e.g.
- Copy the contents of any predefined theme folder (e.g.
lightblue/) to the
- Now you need to replace theme colors with the custom ones. There are two possible approaches:
Approach #1We recommend using Less – it’s a language extension for CSS. Less allows quick setting the values to several variables which later are compiled into CSS code. WebDataRocks provides Less source code available in
webdatarocks.lessfile of each theme. Choose colors which you want to apply and set them inside
webdatarocks.lessfile from the
original-theme/folder. Having replaced the necessary colors, you need to compile
webdatarocks.min.css. Read how to do it in Less documentation. You need to install a npm package manager previously.
Approach #2 Of course, you can also edit colors right inside
webdatarocks.cssfrom your theme’s folder. However, we don’t recommend such an approach – it complicates the updating of your own theme when the updates are made in the component’s CSS.
- Now include the reference to CSS or minified CSS. Then your new theme will be applied to the pivot table.
<link rel="stylesheet" type="text/css" href="theme/original-theme/webdatarocks.css" />
Let’s make a custom turquoise theme. Our main color will be
#48D1CC. It’s a
medium turquoise color. For light and dark shades we choose
#00CED1 respectively. We suppose you’ve
already created a new folder with theme files. Name it
turquoise/. Find the next lines of code in
/* ===== theme colors ===== */ @theme-color: #03A9F4; @theme-color-dark: #039BE5; @theme-color-superdark: #039BE5; @theme-color-midlight: #03A9F4; //not used @theme-color-light: #03A9F4; //not used @theme-color-superlight: #E1F5FE; @theme-color-supersuperlight: #F3FAFD;And change them to:
@theme-color: #48D1CC;Then find where the grid colors are:
/* ===== grid ===== */and change
@grid-selection-canvas-color: rgba(121, 204, 255, 0.2);to
@grid-selection-canvas-color: rgba(175, 238, 238, 0.2);
Now compile Less file to CSS and minified CSS.
Update and enjoy the new theme!