wise-white
wise-white7mo ago

ant-design darkmode not working as expected from new template via refine.new

Hi, I just downloaded a pre-built template via refine.new to see if an issue with darkmod was on my end or not. Upon downloading the new template, darkmod is not behaving as shown on refine.new. The setup is: Refine, vite, antdesign and restapi for data.
6 Replies
kapa.ai
kapa.ai7mo ago
Hi @Nostow. 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 knowledge sources provided, there are a few things to note about dark mode in Refine with Ant Design: 1. The <Refine /> component comes with dark mode support out-of-the-box. However, in some tutorials or series, dark mode may not be used. For instance, in the tutorial series "Creating an Admin Dashboard with Refine", the ColorModeContextProvider was replaced with the ConfigProvider and the src/context/color-mode that comes with create refine-app was removed. This could potentially affect the behavior of dark mode in your application. source (https://refine.dev/blog/refine-pixels-5#adding-required-files) 2. There have been reported issues with dark mode not working as expected in Refine with Ant Design. For example, one user reported that the dark theme was not working in a project created with Next.js, Ant Design, Strapi for backend, and Strapi for authentication. source (https://github.com/refinedev/refine/issues/4690) 3. Another user reported a bug where the refinedev/antd components were not following the configured theme when using a custom theme in the <ConfigProvider />. All the refine components were not switching themes as expected. source (https://github.com/refinedev/refine/issues/4998) Given these points, it's possible that the issue you're experiencing with dark mode could be due to a similar bug or configuration issue. If you're still having trouble, it might be helpful to check the official Refine documentation or reach out to the Refine community for further assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai7mo ago
<@176068081230151680> kapa.ai is still learning and improving, please let us know how it did by reacting below
exotic-emerald
exotic-emerald7mo ago
Were you able to solve it?
wise-white
wise-whiteOP7mo ago
no i wasnt able to, i tried a couple of things however the theme would not apply properly. Particularly to the sider, bgcolor and certain typography like paignation on tables
exotic-emerald
exotic-emerald7mo ago
I recently solved it by manually modifying the package.json.

"dependencies": {
"@refinedev/antd": "^5.38.1",
"@refinedev/cli": "^2.16.31",
"@refinedev/core": "^4.49.2",
"@refinedev/react-router-v6": "^4.5.9",
"@refinedev/simple-rest": "^5.0.6",
"@uiw/react-md-editor": "^3.19.5",
"antd": "5.16.5",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-router-dom": "^6.8.1"
},

"dependencies": {
"@refinedev/antd": "^5.38.1",
"@refinedev/cli": "^2.16.31",
"@refinedev/core": "^4.49.2",
"@refinedev/react-router-v6": "^4.5.9",
"@refinedev/simple-rest": "^5.0.6",
"@uiw/react-md-editor": "^3.19.5",
"antd": "5.16.5",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-router-dom": "^6.8.1"
},
I take this package from the customization-theme-antd example
wise-white
wise-whiteOP7mo ago
ahhh perfect, i didnt think to use a older version of antd. :facepalm: I was using "antd": "^5.17.5"