ChakraProvider applying default background color
Not sure if this is coming from refine, but I don't usually get this in regular react + Chakra apps.
Chakra provider is applying a default dark blue background to the app.
code:
return <ChakraProvider>Test</ChakraProvider>;
2 Replies
Hi @Wolffe. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The behavior you're experiencing might be due to the default theme settings of the Refine framework, which uses Chakra UI and ships with its own set of predefined themes.
If you want to change the default theme, you can use the
extendTheme
function from Chakra UI. This function allows you to extend the default theme with your own custom values. Here's an example of how to use it:
(Source: Discord support thread (https://discord.com/channels/837692625737613362/1159125431686013089))
You can also set the initial color mode to light or dark using the config
property in the extendTheme
function:
(Source: Refine Documentation (https://refine.dev/docs/api-reference/chakra-ui/theming/))
Remember to pass the custom theme to the ChakraProvider
component via the theme
prop:
(Source: Refine Documentation (https://refine.dev/docs/api-reference/chakra-ui/theming/))
If you're still having trouble, please make sure that you're importing the correct components and functions, and that you're passing the custom theme to the ChakraProvider
component correctly.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@703755613380935733> kapa.ai is still learning and improving, please let us know how it did by reacting below