jolly-crimson
jolly-crimson8mo 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
kapa.ai8mo 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
kapa.ai8mo ago
<@703755613380935733> kapa.ai is still learning and improving, please let us know how it did by reacting below
extended-salmon
extended-salmon8mo ago
Bumping this question
correct-apricot
correct-apricot8mo 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
jolly-crimson
jolly-crimson8mo ago
That worked @alicanerdurmaz. Thanks!
correct-apricot
correct-apricot8mo ago
I'm glad to hear that 🚀