How do you change UI theme of existing application?

0
We have developed the Mendix Application and want to change the theme.
asked
2 answers
0

Have a look at the documentation on changing the styling of your app: https://docs.mendix.com/howto/front-end/customize-styling-new/

answered
0

In Mendix, changing the UI theme of an existing application is done by updating or replacing the styling resources, not by switching a “theme” setting.

Recommended approach (standard Mendix way)

1.Update the existing theme (most common)

If your app already uses Atlas UI (which most apps do):

  • Open Theme folder (theme/)
  • Modify:
    • theme/web/main.scss
    • theme/native/main.scss (for native apps)
  • Adjust:
    • Colors
    • Fonts
    • Spacing
    • Component styles

This keeps all pages working and only changes the look & feel.

2.Replace Atlas UI version (if needed)

If you want a more modern or different base style:

  • Update the Atlas UI module from the Marketplace
  • Merge changes carefully (don’t overwrite custom SCSS blindly)
  • Rebuild styles

⚠️ This affects the whole app — test thoroughly.

3.Switch layout + styling (visual redesign)

If the “theme change” means a bigger redesign:

  • Update Layouts (TopBar, Sidebar, etc.)
  • Apply new CSS classes
  • Update styling in main.scss

Pages don’t need to be rebuilt, only layouts and styles.

What you cannot do

  • You cannot switch themes like a dropdown (e.g., “Theme A → Theme B”)
  • Mendix doesn’t support runtime theme swapping out of the box

Best practice

  • Keep all visual changes in SCSS
  • Avoid inline styling
  • Use design properties + CSS classes



answered