fair-rose•2mo 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•2mo 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•2mo ago

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

conscious-sapphire•2mo ago

Were you able to solve it?

fair-rose•2mo 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

conscious-sapphire•2mo 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

fair-rose•2mo ago

ahhh perfect, i didnt think to use a older version of antd. :facepalm: I was using "antd": "^5.17.5"