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
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.cssstyle
: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 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.