Mendix uses the Atlas UI framework for styling, which is why you see the Atlas-related SCSS files in the styles folder.

You should not modify Atlas core files directly, as they may be overwritten during upgrades.

Recommended approaches:

1. Make changes via custom-variables.scc to override Atlas variables (preferred and upgrade-safe).

2. Create your own custom SCSS files and include them in the theme, or override styles selectively — without changing Atlas core files.

Follow the guildeline here to create/update your own style files. 

Hey Ayman! So anything under the "Marketplace modules" folder you can think of like your "node_modules" folder if you come from a frontend background. This folder is mainly so you can see what you are bringing into your project, but you shouldn't change them at all. Basically each time the app builds it could bring in an updated version of those libraries and completely erase everything you've done in the project.

But mendix let's us add our own styling "on top of" any styling we bring in (like Atlas) as a library. As Ishtiaq mentioned in his first response, the general first place to go to add custom styling is the custom-variables scss file inside the Styling folder. (You can create your own file or module for styling in the future, which is cleaner but not necessary for now).

So your first thing is to move your changes from the Atlas module to your styling folder (I'd look back at Ishtiaq's first post), then we have to figure out if your changes still aren't taking affect, feel free to post more screenshots in here.

an Hi Ayman,

You can change the css for the "Top Region" block using custom.scss. The class be added in class in properties. And you also need to import custom.scss in main.scss for changes to take effect.

Additionally you can refer Mendix documentation for the same: https://docs.mendix.com/howto/front-end/customize-styling-new/

This could be quite confusing initially. If your variable change not working then best way is to examin it using "browser -> right click -> inspect" to verify the style of that region. 

Do below in sequence

1. Verify that you are changing the custom-variable.scss from "App" directory, as shown in attach image. 

2. If it doesn't work, share your style file or changes you are doing for us to validate. 

This is how it's showing. I have changed under default theme. It is working now. Am I doing it right?

I am trying to implement the example mentioned in the mendix documentation but couldn't implement it. Can you guys let me know why?

now it's working fine tho