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 to create complex custom themes

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

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, …)
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
: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