Theme
==============================

This section will show how to apply css variables to the ``custom.css`` file.
MapStore introduces the css variables from the version 2021.02.xx and they allow to make changes to colors without compile the whole theme with less/css.
We suggests to refer to the `official documentation <https://mapstore.readthedocs.io/en/latest/developer-guide/customize-theme/>`__
to create complex custom themes

The aim of this section is to change the main colors of the MapStore theme

.. figure:: ../img/theme-css-variables.png
    :alt: MapStore homepage with a custom styling

- run this script to create a root selector with inside all the generated variable based of a minimum set of the variables inputs (eg main background color, primary color, ...)

.. code-block:: sh

    echo "@import 'MapStore2/web/client/themes/default/ms-variables.less'; .get-root-css-variables(@ms-theme-vars);" | node_modules/.bin/lessc \
    --modify-var="ms-main-bg=#eff1f3" \
    --modify-var="ms-main-color=#333333" \
    --modify-var="ms-primary=#264653" \
    --modify-var="ms-primary-contrast=#ffffff" \
    --modify-var="ms-info=#5a9aab" \
    --modify-var="ms-info-contrast=#ffffff" \
    --modify-var="ms-success=#2a9d8f" \
    --modify-var="ms-success-contrast=#ffffff" \
    -

- copy the output from the previous script inside the ``assets/css/custom.css`` style

.. code-block:: css

    :root {
        --ms-font-family-sans-serif: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        --ms-font-family-serif: Georgia, 'Times New Roman', Times, serif;
        --ms-font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace;
        --ms-font-family-base: 'Noto Sans', sans-serif;
        --ms-main-bg: #eff1f3;
        --ms-main-color: #333333;
        --ms-main-border-color: #dddddd;
        --ms-main-variant-color: #333333;
        --ms-main-variant-bg: #d2d8dd;
        --ms-main-hover-color: #333333;
        --ms-main-hover-bg: #ccd2d9;
        --ms-code-color: #c7254e;
        --ms-focus-color: rgba(38, 70, 83, 0.4);
        --ms-placeholder-color: #808080;
        --ms-disabled-color: #999;
        --ms-disabled-bg: #eee;
        --ms-link-color: #264653;
        --ms-link-hover-color: #192e37;
        --ms-primary: #264653;
        --ms-primary-contrast: #ffffff;
        --ms-info: #5a9aab;
        --ms-info-contrast: #ffffff;
        --ms-success: #2a9d8f;
        --ms-success-contrast: #ffffff;
        --ms-warning: #ebbc35;
        --ms-warning-contrast: #ffffff;
        --ms-danger: #bb4940;
        --ms-danger-contrast: #ffffff;
        --ms-loader-color: #333333;
        --ms-loader-fade-color: rgba(51, 51, 51, 0.2);
        --ms-loader-primary-color: #264653;
        --ms-loader-primary-fade-color: rgba(38, 70, 83, 0.2);
        --ms-loader-primary-contrast-color: #ffffff;
        --ms-loader-primary-contrast-fade-color: rgba(255, 255, 255, 0.2);
        --ms-jumbotron-color: #333333;
        --ms-jumbotron-bg: rgba(239, 241, 243, 0.75);
        --ms-timeline-selected-bg: rgba(38, 70, 83, 0.05);
        --ms-timeline-histogram-bg: rgba(38, 70, 83, 0.5);
        --ms-timeline-histogram-color: #162830;
        --ms-timeline-range-bg: rgba(51, 51, 51, 0.2);
        --ms-timeline-playback-range-bg: rgba(53, 197, 180, 0.2);
        --ms-button-color: #264653;
        --ms-button-bg: #eff1f3;
        --ms-button-border-color: #264653;
        --ms-button-focus-color: #264653;
        --ms-button-focus-bg: #eff1f3;
        --ms-button-focus-border-color: #264653;
        --ms-button-hover-color: #366476;
        --ms-button-hover-bg: #d2d8dd;
        --ms-button-hover-border-color: #264653;
        --ms-button-active-color: #366476;
        --ms-button-active-bg: #d2d8dd;
        --ms-button-active-border-color: #264653;
        --ms-button-active-hover-color: #366476;
        --ms-button-active-hover-bg: #bdc6ce;
        --ms-button-active-hover-border-color: #264653;
        --ms-button-disabled-color: #999;
        --ms-button-disabled-bg: #eee;
        --ms-button-disabled-border-color: #eee;
        --ms-button-badge-color: #264653;
        --ms-button-badge-bg: #eff1f3;
        --ms-button-primary-color: #ffffff;
        --ms-button-primary-bg: #264653;
        --ms-button-primary-border-color: #203a45;
        --ms-button-primary-focus-color: #ffffff;
        --ms-button-primary-focus-bg: #264653;
        --ms-button-primary-focus-border-color: #203a45;
        --ms-button-primary-hover-color: #ffffff;
        --ms-button-primary-hover-bg: #162830;
        --ms-button-primary-hover-border-color: #132329;
        --ms-button-primary-active-color: #ffffff;
        --ms-button-primary-active-bg: #162830;
        --ms-button-primary-active-border-color: #132329;
        --ms-button-primary-active-hover-color: #ffffff;
        --ms-button-primary-active-hover-bg: #0b1418;
        --ms-button-primary-active-hover-border-color: #000000;
        --ms-button-primary-disabled-color: #ffffff;
        --ms-button-primary-disabled-bg: #707070;
        --ms-button-primary-disabled-border-color: #707070;
        --ms-button-primary-badge-color: #264653;
        --ms-button-primary-badge-bg: #ffffff;
        --ms-button-info-color: #ffffff;
        --ms-button-info-bg: #5a9aab;
        --ms-button-info-border-color: #518f9f;
        --ms-button-info-focus-color: #ffffff;
        --ms-button-info-focus-bg: #5a9aab;
        --ms-button-info-focus-border-color: #518f9f;
        --ms-button-info-hover-color: #ffffff;
        --ms-button-info-hover-bg: #477d8b;
        --ms-button-info-hover-border-color: #437784;
        --ms-button-info-active-color: #ffffff;
        --ms-button-info-active-bg: #477d8b;
        --ms-button-info-active-border-color: #437784;
        --ms-button-info-active-hover-color: #ffffff;
        --ms-button-info-active-hover-bg: #3b6873;
        --ms-button-info-active-hover-border-color: #2d4f58;
        --ms-button-info-disabled-color: #ffffff;
        --ms-button-info-disabled-bg: #b5b5b5;
        --ms-button-info-disabled-border-color: #b5b5b5;
        --ms-button-info-badge-color: #5a9aab;
        --ms-button-info-badge-bg: #ffffff;
        --ms-button-success-color: #ffffff;
        --ms-button-success-bg: #2a9d8f;
        --ms-button-success-border-color: #217d72;
        --ms-button-success-focus-color: #ffffff;
        --ms-button-success-focus-bg: #2a9d8f;
        --ms-button-success-focus-border-color: #217d72;
        --ms-button-success-hover-color: #ffffff;
        --ms-button-success-hover-bg: #1f756a;
        --ms-button-success-hover-border-color: #1d6d63;
        --ms-button-success-active-color: #ffffff;
        --ms-button-success-active-bg: #1f756a;
        --ms-button-success-active-border-color: #1d6d63;
        --ms-button-success-active-hover-color: #ffffff;
        --ms-button-success-active-hover-bg: #185951;
        --ms-button-success-active-hover-border-color: #0f3833;
        --ms-button-success-disabled-color: #ffffff;
        --ms-button-success-disabled-bg: #8e9f9d;
        --ms-button-success-disabled-border-color: #8e9f9d;
        --ms-button-success-badge-color: #2a9d8f;
        --ms-button-success-badge-bg: #ffffff;
        --ms-button-warning-color: #ffffff;
        --ms-button-warning-bg: #ebbc35;
        --ms-button-warning-border-color: #e9b622;
        --ms-button-warning-focus-color: #ffffff;
        --ms-button-warning-focus-bg: #ebbc35;
        --ms-button-warning-focus-border-color: #e9b622;
        --ms-button-warning-hover-color: #ffffff;
        --ms-button-warning-hover-bg: #d8a515;
        --ms-button-warning-hover-border-color: #ce9e14;
        --ms-button-warning-active-color: #ffffff;
        --ms-button-warning-active-bg: #d8a515;
        --ms-button-warning-active-border-color: #ce9e14;
        --ms-button-warning-active-hover-color: #ffffff;
        --ms-button-warning-active-hover-bg: #b78d12;
        --ms-button-warning-active-hover-border-color: #92700e;
        --ms-button-warning-disabled-color: #ffffff;
        --ms-button-warning-disabled-bg: #d6ccb0;
        --ms-button-warning-disabled-border-color: #d6ccb0;
        --ms-button-warning-badge-color: #ebbc35;
        --ms-button-warning-badge-bg: #ffffff;
        --ms-button-danger-color: #ffffff;
        --ms-button-danger-bg: #bb4940;
        --ms-button-danger-border-color: #ac433b;
        --ms-button-danger-focus-color: #ffffff;
        --ms-button-danger-focus-bg: #bb4940;
        --ms-button-danger-focus-border-color: #ac433b;
        --ms-button-danger-hover-color: #ffffff;
        --ms-button-danger-hover-bg: #953a33;
        --ms-button-danger-hover-border-color: #8d3730;
        --ms-button-danger-active-color: #ffffff;
        --ms-button-danger-active-bg: #953a33;
        --ms-button-danger-active-border-color: #8d3730;
        --ms-button-danger-active-hover-color: #ffffff;
        --ms-button-danger-active-hover-bg: #7a302a;
        --ms-button-danger-active-hover-border-color: #5c241f;
        --ms-button-danger-disabled-color: #ffffff;
        --ms-button-danger-disabled-bg: #b1b1b1;
        --ms-button-danger-disabled-border-color: #b1b1b1;
        --ms-button-danger-badge-color: #bb4940;
        --ms-button-danger-badge-bg: #ffffff;
        --ms-button-tray-color: #4d4d4d;
        --ms-button-tray-bg: #eff1f3;
        --ms-button-tray-border-color: #294c5a;
        --ms-button-tray-focus-color: #4d4d4d;
        --ms-button-tray-focus-bg: #d2d8dd;
        --ms-button-tray-focus-border-color: #0e1a1f;
        --ms-button-tray-hover-color: #4d4d4d;
        --ms-button-tray-hover-bg: #d2d8dd;
        --ms-button-tray-hover-border-color: #23404c;
        --ms-button-tray-active-color: #4d4d4d;
        --ms-button-tray-active-bg: #d2d8dd;
        --ms-button-tray-active-border-color: #23404c;
        --ms-button-tray-active-hover-color: #4d4d4d;
        --ms-button-tray-active-hover-bg: #bdc6ce;
        --ms-button-tray-active-hover-border-color: #0e1a1f;
        --ms-button-tray-disabled-color: #4d4d4d;
        --ms-button-tray-disabled-bg: #ffffff;
        --ms-button-tray-disabled-border-color: #ffffff;
        --ms-button-tray-badge-color: #eff1f3;
        --ms-button-tray-badge-bg: #4d4d4d;
    }


Note: This kind of stile override could have some conflict with the default themes used by context
and they could not work property if they do not define a root selector with css variable

Here a `tool <../../_static/theme-tool.html>`_ that helps to generates a css snippet with all the theme variables based on a set of input colors. After applied your favorite colors copy the generated style in the custom.css file.