What's the best practice to implement multi-themes for partner apps

Hi All, my first post here. I used Ionic 2 when it first came out but took a break. Now I’m just recently hopped in with Ionic 5 and I have a theming question for all the ionic experts here.

Our current app is currently running ionic 5 but we have a partner app that we want to apply a different theme to. What is the best approach for doing that?

I’ve seen plenty of tutorials for a theme changer, but those are limited to just a single page. For us, we will need to change our entire palette for each partner. And down the road, we will onboard many more partners that will want the same thing so the solution should be flexible and scalable at the same time.

I know that Ionic 6 just released yesterday. If there is something in Ionic6 that would make this easier, we’d also be open to it.

Thanks for everyone’s help!

So the approach I would take would be to just have global classes that get applied based on the partner, then use CSS variables to modify the theme.

Check out the themeing docs to see how that can be done

Thanks @mhartington!

We’re already using the global theme as you recommended. It’s the “have global classes that get applied based on the partner” part that I’m trying to figure out.

What I’m thinking now is to create a custom environment file for our vendor app, for example - environment.vendorA.ts.

Then in angular.json file, add the following to architect/build/configurations object in angular.json:

"my-project": {
  ...
  "architect": {
    "build": {
      ...
      "configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ]
        },
        "custom": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.custom.ts"
            },
            {
              "replace": "src/theme/variables.scss",
              "with": "src/environments/variables.partnerA.scss"
            },
            {
              "replace": "src/global.scss",
              "with": "src/environments/global.partnerA.scss"
            }
          ]
        },
      }
    ...
    }
    ...
  }
  ...
}

Does this seem right? Thanks!