Ant Design Dynamic Theme | Light vs Dark Theme Switcher | Ant Design Theme Customization in React JS
HTML-код
- Опубликовано: 2 июн 2024
- #reactjs #antd #theme
In this Ant Design Dynamic Theme tutorial I have explained how to do Ant Design Theme Customization in React JS and how to switch between Light and Dark Themes.
This video focuses on
- How to do Ant Design Theme Customization in React JS
- How to create them using ant design v5 configProvider theme prop
- How to switch between Light and Dark Themes using antd theme config provider
- How to create custom ant design dynamic theme in react js
- How to set or change primary color of ant design components
- How to use Ant Design config provide theme token
- How to create two different themes in react js using antd v5
- How to create child thems to override parent thems in ant design react js
- How to set inherit as false to use default antd theme inside a custom theme
- How to create custom component based them using ant design v5 and react js
- How to get current theme style or property value inside child components
- How to consume current theme token properties in child components of react js
- How to use useState to track current selected theme and switch between themes dynamically
- How to apply them on the fly using antd v5 config provider
If you are new to ant-design, I have already added an intro video on ant-design and overview of its components at • Ant Design UI library ... link, please go through that video to set up the ground for further components implementation.
For more details on ant-design theme and to see the list of css properties that can be used inside a theme, please visit its documentation at ant.design/docs/react/customi...
Happy Coding!
thankyou so much for the video and your response. it was few months ago i have asked for it finally got the solution .. means a alot
So nice to hear this! Thanks @URU Uru
Thank you. Very useful knowledge.
So nice of you!
Hello! Please tell me how can I change the styles for the Form.Item component in the lightTheme object?
thanks for this video 🙏
So nice of you!
Wonderful. They have made it very simple now. I will need to migrate my project to 5.0. I will look in your videos if you have explained the migrating process.
Yes @Testing Account, it is more simpler and elegant now. I loved that update. And regarding the migration to v5 here are the steps
- Update the antd verion "npm install --save antd@latest"
- Try running the project and see the console logs
- They will console all errors/warnings that are needed to update/migrate your code to v5, it will depend on component by component, most of the components will auto migrate so might be no action needed for those.
If you face any issue, please let me know here, we can go through that together.
Thanks
@@CodeWithAamir Thank you. i will try that.
@@CodeWithAamir I tried but it is conflicting with my other plugins. so i might try later on and see what is causing this but surely i will migrate it anyhow.
i am your regular follower, the reason you made me love this channel so much because its you. you reply to your subscribers and care for them. so sure i will be active to your channel as you long as ant design is alive :D
Thank you so much @Testing Account for all this love. I am trying my best in creating these helping tutorials and will continue as long as people like you are supporting and encouraging.
Thanks again!
How about change Dark theme Background sir?
Greate video, how can we make the theme to adapt with the system theme, eg the components to change to light theme when browser is in light mode theme and dark for darkmode
Thank you.
To adopt the browser them you may try the following
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
// dark mode
}
and to watch for changes
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
const newColorScheme = event.matches ? "dark" : "light";
});
Please let me know if that was helpful.
Thanks
Can you provide a theme or make a video about dark theming in antd v5?
But a custom one that converts the whole ui into dark theme, not only some components, cause using the built-in dark theme only renders some components to dark.
eg, footer and content are still in light mode
It's great to hear that has been resolved by you as per your other comment. Thanks for sharing.
@@CodeWithAamir no problem. I will create a clean copy and push it on github for others to see
@@SoulisYT Hi, provide the github link for dark and light theme using antd v5
pls build link github change dark theme with antd v5
@@SoulisYT
cool, like your video
please create more videos about antd v5
Thanks Aries,
I have added some videos on antd v 5 in my channel and will add more videos.
Thank you
I like this channel !!!
Thank you @Arnaud POUTIEU
Really glad to hear that you are enjoying the content!
i like ant design
tank you!
Welcome 🤗
how can I read the properties of seed tokens provided in the ConfigProvidor from a tokens.json file?
Hi @Muzzamil Raza,
As I understood your question, you have a tokens.json file and wanted to read the token values from that file? If that is correct you can just import it on the file/component where you have the ConfigProvider and then use the token.json values there. like
import TokenJson from "./token.json";
console.log(TokenJson.YOUR_KEY); //This will print the value against YOUR_KEY from the token.json file so you can use it inside the ConfigProvider. like
I hope it was helpfull. Please let me know if you need any more information on that.
THANKS.
@@CodeWithAamir actually a tokens.json file is exported from figma using ant ui kit for figma. I was curious that how can i use it for my antd v5 config provider. so in your opinion we can only read the values from the file using json.parse method?
Yes you are correct, as of today I don't see any direct way to import figma token exported json file into antd theme config. Thanks
My and any other text nodes (like ) do not change with theme. What am I doing wrong?
Hi @Ognjen,
The antd theme will effect or is only for Antd components. If you want to have that applied to h1 or p tags like texts then I would prefer you can use Typography component from antd like
This is h1 text for h1 and text for normal p tags
If you need more info on antd Typography I have a separate video on that at link
ruclips.net/video/lXQ1yCFLX60/видео.html
Please let me know in case it doesn’t work for you. Thank you 😊
@@CodeWithAamir Hi, I actually figured this out yesterday, I DID use Typography, but deconstructed it into { Title, Paragraph, Text, Link } and using it that way. Anyway, thanks for taking time to answer me. Your videos do help, will check them all.
All the best
Thats great it’s fixed. Thank you 😊
somehow, I can't customize other colors such as colorSuccess, colorWarning, etc.. other than colorPrimary :(
Hi @Htet Wai Yan,
Those color should also work, if you can share the code snippet via codesandbox etc. so I can take a look and see what could be the reason.
Thanks
Hello Aamir, how can we apply @primary-color to less file?
Hi @Taanlee46
This new approach for antd v5.xx does not use less styling actually they use now css-in-js for styling components internally.
If you are interested in less styling I tried to cover that in following video for an older antd version 4.xx it might help you in your use case
ruclips.net/video/KIS-ONH207A/видео.html
@@CodeWithAamir thanks for your help
Always welcome @taanlee46 😊
Hi bro, how to change whole appication theme using antd v5
Hi,
If you use the same approach in all of your application components you should be able to change the whole app theme using antd v5.
Please let me know if you face any issues.
Thanks
Thanks ! How to version antd ? 5 ?
Hi @Azizbek Komilov, regarding the migration to v5 here are the steps
- Update the antd verion "npm install --save antd@latest"
- Try running the project and see the console logs
- They will console all errors/warnings that are needed to update/migrate your code to v5, it will depend on component by component, most of the components will auto migrate so might be no action needed for those.
If you face any issue, please let me know here, we can go through that together.
Thanks
how to use these com its variables in .css files
Hi @kirangowda3508
I am not aware of any method as of now where we can use these variable in a simple .css file, there might be some third part libs/configs etc that we can add in our project to achieve that but I am not sure about that as of today.
Thanks