abstract-purpleA
Refine•3y ago•
9 replies
abstract-purple

Antd 4 Dark Mode not Working Properly

I am trying to upgrade fully to Antd v4 in Refine v3 so I can then upgrade to Antd v5 and Refine v4.

When I was using Antd v3 I was able to use dark mode this way:

@import url("@pankod/refine-antd/dist/styles.min.css") (prefers-color-scheme: light);
@import url("../../node_modules/antd/dist/antd.dark.css") (prefers-color-scheme: dark);


Now, I tried to switch to this using Antd v4:

@import url("@pankod/refine-antd/dist/reset.css") (prefers-color-scheme: light);
@import url("~antd/dist/antd.dark.css") (prefers-color-scheme: dark);


And when I am in dark mode, the content area on list pages still has a white background, the content text is white so it is not visible, and the page title font color is black so it is not visible on the black background in the page header. On show and edit pages, the background is correct but the content area font color is black so it is not visible.
Was this page helpful?