After reading how to apply predefined themes to the component, the next step is to create a custom theme.

  1. Open the webdatarocks/theme/ folder, create a new folder inside and name it respectively to the name of your theme, e.g. original-theme/.
  2. Copy the contents of any predefined theme folder (e.g. lightblue/) to the original-theme/ folder.
  3. 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.less file of each theme. Choose colors which you want to apply and set them inside webdatarocks.less file from the original-theme/ folder. Having replaced the necessary colors, you need to compile webdatarocks.less into webdatarocks.css and 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.css from 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.

  4. Now include the reference to CSS or minified CSS. Then your new theme will be applied to the pivot table.
  5. <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 #AFEEEE and #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/turquoise/webdatarocks.less:

    /* ===== 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;
    @theme-color-dark: #00CED1;
    @theme-color-superdark: #00CED1;
    @theme-color-midlight: #03A9F4;
    @theme-color-light: #edfffe;
    @theme-color-superlight: #AFEEEE;
    @theme-color-supersuperlight: #e0ffff;
    Then find where the grid colors are:
    /* ===== grid ===== */
    and change 
    @grid-selection-canvas-color: rgba(121, 204, 255, 0.2);
    @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!