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

  1. Duplicate the folder theme-custom (with its contents) at [mapapps-4-developers]/src/main/js/bundles/ and rename it to theme-elephant.

  2. 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.

  3. Inside [mapapps-4-developers]/src/main/js/bundles/theme-elephant/styles/themeSettings.less change the variable @themeName from theme-custom to theme-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:

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

  1. 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 the allowedBundles list.

  2. 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).