unwilling-turquoise•10mo ago

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);

@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);

@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.

6 Replies

kapa.ai•10mo ago

Hi @geoffatsource. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the extracts, it seems like you're trying to implement dark mode in your Refine application using Ant Design. Here are some steps you can follow: 1. Initial Setup: Start from a basic Refine app with Ant Design. You can create this using the following command:

npm create refine-app@latest tutorial -- -p refine-react -b v3

npm create refine-app@latest tutorial -- -p refine-react -b v3

Then, install the necessary packages:

npm install -s gulp gulp-less gulp-postcss gulp-debug gulp-csso autoprefixer less-plugin-npm-import  
npm install -s react-redux react-css-theme-switcher

npm install -s gulp gulp-less gulp-postcss gulp-debug gulp-csso autoprefixer less-plugin-npm-import  
npm install -s react-redux react-css-theme-switcher

2. Adapt the Refine Application: Add a theme switcher in the Header (src/components/layout/header/index.tsx) and adapt the App.tsx file to be able to switch between the two styles. You can find the code for this in the source (https://refine.dev/blog/how-to-add-darkmode-in-ant-design/). 3. Create the Less and CSS Files: Create a Less file for the dark mode (src/styles/antd.dark-theme.less) with the necessary content. You can find the content for this file in the source (https://refine.dev/blog/how-to-add-darkmode-in-ant-design/). 4. Switching to Dark Theme: You can add a switch to the Header component and use the theme property of the ConfigProvider component to switch between light and dark themes. You can find the code for this in the source (https://refine.dev/docs/api-reference/antd/theming/). Please note that this information is based on Refine version 3.x.x and Ant Design version 4.x.x. If you're planning to upgrade to Refine version 4.x.x, you should know that it is backward compatible with version 3.x.x. You can check out the migration guide (https://refine.dev/docs/migration-guide/) for the differences between the two versions. If you're still facing issues with the dark mode, it might be due to some specific styles or components that are not correctly adapting to the dark theme. You might need to manually adjust these styles or components. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

<@1014305963219615754> kapa.ai is still learning and improving, please let us know how it did by reacting below

unwilling-turquoise•10mo ago

I'm not using gulp, I'm using react-scripts and not using Less

conscious-sapphire•10mo ago

hello @geoffatsource if you updated @pankod/refine-antd@3.x.x to @pankod/refine-antd@4.x.x you can't use CSS in ant design because ant design migrated to css-in-js https://refine.dev/docs/api-reference/antd/migration-guide/v4-to-v5/#updating-the-packages

unwilling-turquoise•10mo ago

~I'm confused because I thought css-in-js was for Ant Design 5?~ I was confused by the fact that antd and refine-antd major versions do not match. I read the docs wrong so how do I use dark mode now?

conscious-sapphire•10mo ago

sorry for the confusion. dark mode works like this https://refine.dev/docs/api-reference/antd/theming/#use-preset-algorithms

Theme | refine

Ant Design allows you to customize design tokens to satisfy UI diversity from business or brand requirements, including primary color, border radius, border color, etc.