I am still running into various issues regarding component colors, which are time consuming and some are even blocking. Screenshots with notes attached.
For the mismatch of background colors, it’s due to Antd’s “default dark” theme algorithm - you can disable it bu setting “Default dark” to false in the config.
For the slots, you can style each slot element separately. The “Modal content” styles are applied only to the div container wrapping the elements (the other elements will just use their default / individual styles)
Thanks for looking into it. The thing is, I need Default dark to be enabled for this project. So it is normal that the color set as bg base is not the actual one displayed?
For the modal, because the title is on top of the content background, it should have the same background color as the content by default or simply be transparent. Otherwise, every time I change the content background, I also have to change the title background to match. Setting a title background should be optional, no?
So it is normal that the color set as bg base is not the actual one displayed?
Yes, that is the “base” color for the background, which the “default dark” algorithm then uses to compute the actual background depending on the element (for example the button background is darker than the modal in the image below, after setting the base background to black).
Setting a title background should be optional, no?
Indeed it’s confusing. They both use the base background as default - so if you change the base background color in the settings, you wouldn’t need to update any other element. However, if you’d like to specify styles to a particular div container in the modal, the styles would only affect it (similar to just editing a vertical stack wrapping the elements) - and antd resets the inner elements to continue using the default settings.
Alright, thanks for taking the time to explain 
.
@victor I attempted to set the Modal title background to the same background color as the modal content/frame. It turns out that the two don’t match, no matter how I go about it (using color preset or manually measuring the color value).
I think that’s caused by the background transparency - as there are different background colors behind the elements, the final color gets different. Does it work if you set no transparency on both backgrounds?
I did try to set the same background color with same level of transparency on both, but the result is the same.
Ok, so I think I tracked down the issue. I tried to force remove the background manually by inspecting in Preview, but no matter what I tried, setting the background of the H2 to none, transparent, etc, there was still background visible. It turns out there is an additional background style set on the wrapping div, controlled by this rule: :where(.css-mimvof).ant-modal .ant-modal-header
Setting this background to none (in the preview inspector) removes the background and displays correctly. But I don’t see how to control it via the Studio Editor.
yeah, I meant if the background could have no transparency (in both the modal contents and the header) it should be fixed (so the wrapping div background wouldn’t interfere with the final result)
Transparency is important to the design in this project.
The problematic wrapping div is that of the H2 header, not the modal or the contents of it. I ended up overriding the style in Custom Css settings: :where(.css-mimvof).ant-modal .ant-modal-header { background: none }.
That clears the modal title background but still allows me to set a background color for it if needed.
But I feel that this should be the default setting, because without it, the modal title background cannot really be fully controlled via the editor. That seems to be the case for the Dialog component, where I did not have such issues with elements in the Title slot.
Turns out that the css rule above did not work once published. I realize now that it included a class selector that changes on published side. So I changed it to .ant-modal .ant-modal-header { background: none !important;} for the moment.