Too dark components when Default Dark enabled.

I have recently enabled the Default Dark option in Ant Design System Settings. Now, while I add various components, I find many that are dark but also too dark. See screenshot.

Basically, it’s as if the dark base is there but the components are not really optimized for dark. The thing is, I can’t seem to find a way to address this in the Ant Design Settings in a way that will apply to all components, rather than have to change every component’s text, title, buttons to properly display.

So is this intended and are we expected to deal with it via extra css styling or should it come already styled properly when Default Dark is enabled?


In this particular example, there just doesn’t seem to be a way to set the Cancel button text color, unless I am missing anything?


I just noticed that the default “Loading…” message of the Ant Design System also displays black on black when “Default dark” is enabled in Ant D settings.


Regarding the loading message screenshot above, I have added custom css to style the text white, but it only works after the app and all the custom styles have loaded. Until that point, the text remains black on black.

Another Default dark issue… now with the Collapse component, for which I set all its settings to white text (Design > Text, Children:Text, Header styles text color) but which continues to have a black header text regardless.

I was able to get the header text color changed by setting the default text color to white. However, this is a problem, since the Collapse component seems to ignore its very own Header text color setting. @chungwu