How to create of a custom theme
If none of the provided theme bundles ( theme-everlasting , theme-summer , theme-winter , theme-autumn , theme-spring ) matches your design requirements, you can create a new theme from scratch (by completely rewriting the CSS code) or by using the mapapps-4-developers project to kickstart theming. With this project you can change color values and create a new look.
The following section explains the process in detail.
It is assumed that the latest release of map.apps for Developers project is already downloaded and extracted to a location of your choice.
For later reference, this location is called [mapapps-4-developers]
.
In this example, the name of the new theme is elephant which can of course be replaced by anything that fits your context.
Step 1: Create theme bundle
-
Duplicate the folder
theme-custom
(with its contents) at[mapapps-4-developers]/src/main/js/bundles/
and rename it totheme-elephant
. -
Open the
manifest.json
file at[mapapps-4-developers]/src/main/js/bundles/theme-elephant
and change both occurrences of"name": "theme-custom"
to"name": "theme-elephant"
. You can change the metadata such as version or description to your needs. -
Inside
[mapapps-4-developers]/src/main/js/bundles/theme-elephant/styles/themeSettings.less
change the variable@themeName
fromtheme-custom
totheme-elephant
.
Step 2: Adjust Gulpfile
Gulp is used to copy and compile the map.apps theme base resources for a theme.
Add the custom theme inside the themes
and themeChangeTargets
array in [mapapps-4-developers]/gulpfile.js
:
...
mapapps.registerTasks({
/* A detailed description of available setting is available at https://www.npmjs.com/package/ct-mapapps-gulp-js */
/* a list of themes inside this project */
themes: [
'theme-a',
'theme-elephant'
],
/* state that the custom theme is depending on map.apps everlasting theme that provides the base styles */
hasBaseThemes: true,
/* state that vuetify components are supported and therefore vuetify core styles are needed */
hasVuetify: true,
themeChangeTargets: {
"vuetify": [
"theme-custom",
"theme-elephant"
]
}
});
...
Step 3: App Configuration and launching development server
-
Add the theme bundle to the app (for example the sample app at
[mapapps-4-developers]/src/main/js/apps/sample/app.json
). Make sure that there is no other theme-bundle inside theallowedBundles
list. -
Start map.apps for Developers as usual. If you are unsure what to do, see Set up the development environment
Step 4: Customize the theme’s color
The theme is now ready to be customized.
For example, change the color variable values in [mapapps-4-developers]/src/main/js/bundles/theme-elephant/styles/themeSettings.less
.
Besides of altering the values of variables, you can add custom LESS or CSS code (for example to provide styling for a custom bundle).