R
Refine

ask-any-question

Antd 4 Dark Mode not Working Properly

Cconscious-sapphire10/9/2023
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.
Kkapa.ai10/9/2023
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: ----------------------
Kkapa.ai10/9/2023
<@1014305963219615754> kapa.ai is still learning and improving, please let us know how it did by reacting below
Cconscious-sapphire10/9/2023
I'm not using gulp, I'm using react-scripts and not using Less
Ssensitive-blue10/10/2023
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
Cconscious-sapphire10/10/2023
~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?
Ssensitive-blue10/10/2023
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.

Looking for more? Join the community!

R
Refine

ask-any-question

Join Server
Recommended Posts
show on error notificiationwhile downloading some csv filehow to get :idevent/v1/event/:id/ticket-class/new/ how to get :id in the code, I want to create a ticket-class lisWill Refine integrate with Astro in the future?Considering to SSR / SSG I'm thinking using Next.js or Astro just wanna know, will Refine integratuseCustomcall useCustom manuallyuseFormcall a get api using useFormNestJs Data Providers Backend ExampleIs there repo for these examples in documentation using Nest CRUD or Nest Query as data providers? Tanstack router?Has anyone managed to use tanstack router with refine?Refine v3 Codemod for Antd v3 to v4?I am realizing I still have @pankod/refine-antd v3 and am trying to upgrade to v4... is there a codeRefine 3.x with Antd4 List.extra not appearing correctlyI am trying to update my Antd from 3.x to 4.x with Refine v3 and the page header extra is missing laMultiple Auth Provider in a single app. Possible?Hi everyone! A refine newbie here. First, a huge thanks to refine team for building something prettyKeep getting this error when installing refine and refine dev, been stuff for a while I need helpHow does DataProvider manage field types?I am working on a custom data provider, but for some reason, default template I got from refine playchakra ui formHi guys! I have a question, maybe a silly one but im not very experienced with react and just startihi there i have question about edit pagehi there i have question about edit page, API get detail data and patch have difference schema ex: `Hi there I want to build kind of aHi there, I want to build kind of a business middleware that will help me handle some administrativeHow to remove plural noun when using custom label in resources ? (Inferencer)I have a resource with label "Manajemen Pengguna" but on the page, Inferencer automatically convert pass data while navigationHow to pass data from one component to other while navigation?How to navigate immediately to another route?Hi everyone, after login (localhost:5173/login) the user is redirected to localhost:5137, but I wantCascading Dropdown ExampleHey everyone! Say I want to do a cascading dropdown inside of my Refine app, where I have "Brand" anPersistent 'Loading...' Screen in Refine App—Requires Multiple Refreshes for Switching Between PagesHey everyone, we're facing a peculiar issue with our web app, which is built on Refine and integrate