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
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:
----------------------<@176068081230151680> kapa.ai is still learning and improving, please let us know how it did by reacting below
exotic-emerald•7mo ago
Were you able to solve it?
wise-whiteOP•7mo 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•7mo ago
I recently solved it by manually modifying the package.json.
I take this package from the customization-theme-antd example
wise-whiteOP•7mo ago
ahhh perfect, i didnt think to use a older version of antd. :facepalm: I was using
"antd": "^5.17.5"