Hi @BabyBear 

Did you try to use "!important" property?

.osui-accordion-item {

    background-color: var(--color-background-body) !important;

}

Hi, 

There are several ways you can override the theme styles: 
 
Add an extended class to the accordion item, like "accordion-item-new": 

.accordion-item-new.osui-accordion-item{
background-color: var(--color-background-body);
}

or

Write your CSS in the theme instead of the web block. This gives it higher specificity.

or 

Use a parent class for the container, then reference it in your styles: 

.parent-class .osui-accordion-item{
background-color: var(--color-background-body);
}


Finally, if none of the above methods work, you can try using !important:
However, I don’t recommend using !important as it’s not considered a best practice for handling theme styles, It's better to manage specificity properly whenever possible. 



Also, make sure to check your base theme — confirm whether OutSystemsUI is properly added as the base theme in your application. If it's missing, your styles might not behave as expected. 

@BabyBear  Your theme is not loaded, i can see from the image only the css are coming from the outsystemsui, try to use the same css in your page level , you can see the working code, then you can debug why the theme is not getting rendered, maybe the base theme you might need to change. if i get more inputs i can identify the issue exactly and help you to resolve it.

@BabyBear  It is not working bcz, it is not loaded there. are you able to see any css from the place where you kept this code (Module where you placed the css)

osui-accordian-item{

background-color:var(--color-background-body);

}can u please confirm.

Yes that's is the issue that i am facing in the multi theme Forge component. Unfortunately i cannot share our OML.  basically the issue is if i add custom css on my theme and use the multi theme forge component to change the Theme in run time. it is not loading all the added CSS