Ant Design Light Mode with Dark Header and Sider?
I have my Refine App wrapped in a ColorModeContextProvider, which works great, but I want the Header and Sider to always remain dark even when the content area is light. I've tried swizzling the layout and wrapping the Header and Sider in ConfigProviders with theme set to darkAlgorithm but it's having no effect. Has anyone been able to do this?
3 Replies
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, there isn't a direct solution to your specific problem. However, there are some insights that might be helpful.
The Refine framework comes with built-in dark mode support, which can be toggled using the
ColorModeContextProvider as you've already done. This context provider is used to manage the dark and light modes of the entire application, including the Header and Sider components.
However, there are some reported issues with the sidebar color configuration being out of sync with the theme, and the sidebar mixing dark and light theme classes. These issues might be related to your problem, but the extracts do not provide a solution to these issues.
In the blog post about implementing dark mode in Ant Design using gulp, a theme switcher is added to the Header component using the useThemeSwitcher hook from the react-css-theme-switcher package. This switcher allows the user to toggle between light and dark themes. However, this switcher affects the entire application, not just the Header and Sider components.
In conclusion, based on the information provided in the extracts, it seems that there isn't a straightforward way to make the Header and Sider components always remain dark while the rest of the application is in light mode. You might need to customize the CSS of these components manually, or find a way to override the theme context for these specific components.
For more detailed information, you might want to check the official Refine documentation (https://refine.dev/docs) or ask for help in the Refine community.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1014305963219615754> kapa.ai is still learning and improving, please let us know how it did by reacting below
stormy-gold•11mo ago
Hello @geoffatsource,
This issue is related to Ant Design. It seems that when using
useToken from Ant Design, it takes the value from the top most <ConfigProvider>