Changing theme CSS

[whittaker007]

Description

I'm trying to set up a local installation of Mapstore and make some tweaks to the theme CSS.

I have followed the Styling and Theming guide at https://docs.mapstore.geosolutionsgroup.com/en/latest/developer-guide/customize-theme and none of my changes are showing up.

Documentation section involved

• Developer Guide

Other useful information

I have made a new theme folder in the html root and copied the dark theme as a starter. So:

themes/custom/theme.less:

@import '../../web/client/themes/default/theme.less';
@import 'variables.less';

themes/custom/variables.less:
clone of web/client/themes/dark/variables.less

As per the docs I have also modified:
build/prod-webpack.config.js
build/webpack.config.js
project/standard/templates/prod-webpack.config.js
project/standard/templates/webpack.config.js

each with the following change:

-    themeEntries,
+    {
+       "themes/default": path.join(__dirname, "themes", "custom", "theme.less")
+    },

I also modified web/client/product/appConfig.js:

+                theme: {
+                    selectedTheme: {
+                        id: custom
+                    }
                 }

and finally web/client/themes/index.js:

module.exports = [{
     id: "default"
 }, {
     id: "dark"
+}, {
+    id: "custom"
 }];

What am I missing?

[tdipisa]

@whittaker007 thank you so much for contacting the MS community. That's something for which you should involve the dev mailing list before opening an issue. Let's keep the issue open for the moment for reference so that you can link that in your message to the ML. Thank you so much.

[whittaker007]

I have created issues in both the dev and user mailing lists but have not gotten a reply.

I assume my issue is that I have to install less and compile the less files? But I'm not sure what the destinations should be?

[tdipisa]

@whittaker007 thank you for replying to this. @allyoucanmap answered on the ML:
https://groups.google.com/g/mapstore-users/c/aBwXGgkfv6c/m/NaB-PuYFBAAJ?utm_medium=email&utm_source=footer

[allyoucanmap]

@whittaker007 here you can find the setup of the MapStore downstream project using the training process applying an override of the theme:

• branch https://github.com/geosolutions-it/MyMapStoreProject/tree/2024.01.xx-custom-theme
• commit with the theme configuration geosolutions-it/MyMapStoreProject@ff55baf

I'm reopening the issue because the documentation needs to be updated for the themeEntries property and a general review of the theme section

[whittaker007]

Hi, I've rebuilt my project following the training process document. I found that I can use that theme method to create a new theme, but in order to make it the default theme I have to add:

            theme: {
                selectedTheme: {
                    id: 'myTheme'
                }
            }

to MapStore2/web/client/product/appConfig.js

However the MapStore2 folder is the external Mapstore git repo which I cannot commit changes to.

If I understand correctly, the two solutions to this are to either make a patch for this file, and make a step in the release/update process to apply that patch, or to somehow get the app to use alternative configuration outside of the MapStore2 folder.

The second method is preferable. I notice that /js/app.jsx appears to include appConfig.js with the following line:

const appConfig = require('@mapstore/product/appConfig').default;

So I tried duplicating MapStore2/web/client/product/appConfig.js as a copy into /js/appConfig.js and changing the require line to:

const appConfig = require('appConfig').default;

but I get the error:

ERROR in ./js/app.jsx 43:18-46
Module not found: Error: Can't resolve 'appConfig' in 'js'

Which is odd because it definitely does exist, and has the same file permissions. I tried several variations of the pathing in the require argument, but with the same error.

Is this the correct way to go about it?

[whittaker007]

Oh, I see that I can simply override the default theme using "themes/default" instead of "themes/myTheme"

    themeEntries: {
        "themes/default": path.join(__dirname, "themes", "myTheme", "theme.less"),
    },

I guess that's the simplest way to go about it, then I don't need to add anything to appConfig.js.