harsh-harlequin•15mo ago

How to default a theme to light mode over dark mode? (using Chakra UI Blue theme)

Tried changing some values here: """" export const RefineThemes = Object.keys(refineCustomThemes).reduce( (acc, key) => { const themeName = key as keyof typeof refineCustomThemes; return { ...acc, [key]: extendTheme({ config: { initialColorMode: "system", }, styles: { global: (props: StyleFunctionProps) => { const bgLight = props.theme.colors.gray[50]; const bgDark = props.theme.colors.gray[900]; return { "html, body": { background: mode(bgLight, bgDark)(props), }, }; }, }, colors: { brand: refineCustomThemes[themeName], refine: { ...refineCustomColors, }, }, }), }; }, {}, ) as Record<keyof typeof refineCustomThemes, RefineTheme>; """ but didn't work. This is what I have for the provider " <ChakraProvider theme={RefineThemes.Blue}> <Refine routerProvider={routerProvider} dataProvider={dataProvider(API_URL)} notificationProvider={notificationProvider} authProvider={authProvider} i18nProvider={i18nProvider}"

6 Replies

kapa.ai•15mo ago

Hi @Wolffe. 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 customize the theme of your refine application. To customize the 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:

import { Refine } from "@refinedev/core";  
import routerProvider from "@refinedev/react-router-v6";  
import dataProvider from "@refinedev/simple-rest";  
import {  
 ErrorComponent,  
 ThemedLayoutV2,  
 notificationProvider,  
 RefineThemes,  
} from "@refinedev/chakra-ui";  
import {  
 ChakraProvider,  
 extendTheme,  
} from "@chakra-ui/react";  

const App = () => {  
 const customTheme = extendTheme({  
 ...RefineThemes.Blue,  
 colors: {  
 sider: {  
 background: "#4A5568",  
 collapseButton: "#1a202c",  
 },  
 },  
 });  

 return (  
 <ChakraProvider theme={customTheme}>  
 <BrowserRouter>  
 <Refine  
 routerProvider={routerProvider}  
 dataProvider={dataProvider(  
 "<https://api.fake-rest.refine.dev",>  
 )}  
 notificationProvider={notificationProvider()}  
 resources={[  
 {  
 name: "posts",  
 list: "/posts",  
 edit: "/posts/edit/:id",  
 create: "/posts/create",  
 },  
 ]}  
 >  
 <Routes>  
 <Route  
 element={  
 <ThemedLayoutV2>  
 <Outlet />  
 </ThemedLayoutV2>  
 }  
 >  
 <Route path="posts">  
 <Route index element={<PostList />} />  
 <Route path="create" element={<PostCreate />} />  
 <Route path="edit/:id" element={<PostEdit />} />  
 </Route>  
 <Route path="*" element={<ErrorComponent />} />  
 </Route>  
 </Routes>  
 </Refine>  
 </BrowserRouter>  
 </ChakraProvider>  
 );  
};

import { Refine } from "@refinedev/core";  
import routerProvider from "@refinedev/react-router-v6";  
import dataProvider from "@refinedev/simple-rest";  
import {  
 ErrorComponent,  
 ThemedLayoutV2,  
 notificationProvider,  
 RefineThemes,  
} from "@refinedev/chakra-ui";  
import {  
 ChakraProvider,  
 extendTheme,  
} from "@chakra-ui/react";  

const App = () => {  
 const customTheme = extendTheme({  
 ...RefineThemes.Blue,  
 colors: {  
 sider: {  
 background: "#4A5568",  
 collapseButton: "#1a202c",  
 },  
 },  
 });  

 return (  
 <ChakraProvider theme={customTheme}>  
 <BrowserRouter>  
 <Refine  
 routerProvider={routerProvider}  
 dataProvider={dataProvider(  
 "<https://api.fake-rest.refine.dev",>  
 )}  
 notificationProvider={notificationProvider()}  
 resources={[  
 {  
 name: "posts",  
 list: "/posts",  
 edit: "/posts/edit/:id",  
 create: "/posts/create",  
 },  
 ]}  
 >  
 <Routes>  
 <Route  
 element={  
 <ThemedLayoutV2>  
 <Outlet />  
 </ThemedLayoutV2>  
 }  
 >  
 <Route path="posts">  
 <Route index element={<PostList />} />  
 <Route path="create" element={<PostCreate />} />  
 <Route path="edit/:id" element={<PostEdit />} />  
 </Route>  
 <Route path="*" element={<ErrorComponent />} />  
 </Route>  
 </Routes>  
 </Refine>  
 </BrowserRouter>  
 </ChakraProvider>  
 );  
};

In this example, the extendTheme function is used to create a custom theme that extends the RefineThemes.Blue theme with a custom color for the sider. The custom theme is then passed to the ChakraProvider component via the theme prop. 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. For more information, you can refer to the refine documentation (https://refine.dev/docs/api-reference/chakra-ui/theming/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•15mo ago

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

robust-apricot•15mo ago

Bumping this question

fair-rose•15mo ago

Hello @Wolffe and @amrutha you can use like this but don't forget to delete delete "chakra-ui-color-mode" from localStorage before testing

  <ChakraProvider theme={{ ...RefineThemes.Blue, config: { initialColorMode: 'dark' } }}>

  <ChakraProvider theme={{ ...RefineThemes.Blue, config: { initialColorMode: 'dark' } }}>

please let me know if problem solved with this code

harsh-harlequinOP•15mo ago

That worked @alicanerdurmaz. Thanks!

fair-rose•15mo ago

I'm glad to hear that 🚀

How to default a theme to light mode over dark mode? (using Chakra UI Blue theme)

Did you find this page helpful?