stormy-gold•7mo ago

Dark Theme on Pixels Admin

How can I get Pixels-Admin to respect the dark theme? To begin with, this auth page isn't dark (as specified with the following on the ConfigProvider: <ConfigProvider theme={{ algorithm: theme.darkAlgorithm }} > And here is the code for the auth page: import * as React from "react"; import { Link } from "react-router-dom"; import { AuthPage as AntdAuthPage, AuthProps } from "@refinedev/antd"; import { Image } from "antd"; import { StackBanner } from "../../components/banners"; const authWrapperProps = { style: { backgroundImage: "url('/bg.png')", backgroundRepeat: "repeat-x", }, }; // const contentProps = { // style: { // backgroundColor: "#fff", // border: "1px solid #f5f5f5", // borderRadius: "16px", // boxShadow: "4px 8px 16px rgba(42, 42, 66, 0.25)", // width: "384px", // padding: "16px", // }, // }; const renderAuthContent = (content: React.ReactNode) => { return ( <div style={{ display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", }} > <Link to="/" style={{ marginBottom: "32px" }}> <Image height="160" src="/pixels-logo.svg" alt="pixels-logo" preview={false} /> </Link> {content} <StackBanner /> </div> ); }; export const AuthPage: React.FC<AuthProps> = ({ type, formProps, ...rest }) => { return ( <AntdAuthPage type={type} wrapperProps={authWrapperProps} renderContent={renderAuthContent} formProps={formProps} {...rest} /> ); };

5 Replies

kapa.ai•7mo ago

Hi @obelisk291. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To ensure that the Pixels Admin respects the dark theme, you need to make sure that the ConfigProvider from Ant Design is correctly set up to use the dark theme algorithm. Additionally, you should verify that the AuthPage component and other components are correctly inheriting the theme settings. Here is a step-by-step guide to achieve this: 1. Set up the ConfigProvider with the dark theme algorithm: Ensure that your ConfigProvider is correctly configured to use the dark theme algorithm. This should be done at the root of your application.

   import { ConfigProvider, theme } from 'antd';
   import { BrowserRouter } from 'react-router-dom';
   import { Refine } from '@refinedev/core';
   import { AuthPage } from './path-to-your-auth-page';
   import { ThemedLayoutV2 } from '@refinedev/antd';
const App = () => (
     <ConfigProvider
       theme={{
         algorithm: theme.darkAlgorithm,
       }}
     >
       <BrowserRouter>
         <Refine
           routerProvider={routerBindings}
           notificationProvider={useNotificationProvider}
           resources={[
             { name: "users", list: "/users" },
             { name: "canvases", list: "/canvases" },
           ]}
           options={{
             syncWithLocation: true,
             warnWhenUnsavedChanges: true,
           }}
         >
           <Routes>
             <Route
               element={
                 <Authenticated>
                   <ThemedLayoutV2 Title={Title}>
                     <CanAccess>
                       <Outlet />
                     </CanAccess>
                   </ThemedLayoutV2>
                 </Authenticated>
               }
             >
               <Route index element={<NavigateToResource />} />
               <Route path="/users" element={<UserList />} />
               <Route path="/canvases" element={<CanvasList />} />
             </Route>
             <Route
               element={
                 <Authenticated fallback={<Outlet />}>
                   <NavigateToResource resource="users" />
                 </Authenticated>
               }
             >
               <Route
                 path="/login"
                 element={<AuthPage type="login" registerLink={false} />}
               />
               <Route
                 path="/forgot-password"
                 element={<AuthPage type="forgotPassword" />}
               />
               <Route
                 path="/update-password"
                 element={<AuthPage type="updatePassword" />}
               />
             </Route>
           </Routes>
         </Refine>
       </BrowserRouter>
     </ConfigProvider>
   );

   export default App;

   import { ConfigProvider, theme } from 'antd';
   import { BrowserRouter } from 'react-router-dom';
   import { Refine } from '@refinedev/core';
   import { AuthPage } from './path-to-your-auth-page';
   import { ThemedLayoutV2 } from '@refinedev/antd';
const App = () => (
     <ConfigProvider
       theme={{
         algorithm: theme.darkAlgorithm,
       }}
     >
       <BrowserRouter>
         <Refine
           routerProvider={routerBindings}
           notificationProvider={useNotificationProvider}
           resources={[
             { name: "users", list: "/users" },
             { name: "canvases", list: "/canvases" },
           ]}
           options={{
             syncWithLocation: true,
             warnWhenUnsavedChanges: true,
           }}
         >
           <Routes>
             <Route
               element={
                 <Authenticated>
                   <ThemedLayoutV2 Title={Title}>
                     <CanAccess>
                       <Outlet />
                     </CanAccess>
                   </ThemedLayoutV2>
                 </Authenticated>
               }
             >
               <Route index element={<NavigateToResource />} />
               <Route path="/users" element={<UserList />} />
               <Route path="/canvases" element={<CanvasList />} />
             </Route>
             <Route
               element={
                 <Authenticated fallback={<Outlet />}>
                   <NavigateToResource resource="users" />
                 </Authenticated>
               }
             >
               <Route
                 path="/login"
                 element={<AuthPage type="login" registerLink={false} />}
               />
               <Route
                 path="/forgot-password"
                 element={<AuthPage type="forgotPassword" />}
               />
               <Route
                 path="/update-password"
                 element={<AuthPage type="updatePassword" />}
               />
             </Route>
           </Routes>
         </Refine>
       </BrowserRouter>
     </ConfigProvider>
   );

   export default App;

2. Ensure the AuthPage component respects the theme: The AuthPage component should be set up to inherit the theme from the ConfigProvider. The provided code for the AuthPage component should work correctly if the ConfigProvider is set up properly. ```jsx import * as React from "react"; import { Link } from "react-router-dom"; import { AuthPage as AntdAuthPage, AuthProps } from "@refinedev/antd"; import { Image } from "antd"; import { StackBanner } from "../../components/banners"; const authWrapperProps = { style: { backgroundImage: "url('/bg.png')", backgroundRepeat: "repeat-x", }, }; const renderAuthContent = (content: React.ReactNode) => { return ( <div style={{ display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", }} > <Link to="/" style={{ marginBottom: "32px" }}> < ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

stormy-goldOP•7mo ago

@kapa.ai You didn't finish your output

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To ensure that the Pixels Admin respects the dark theme, you need to make sure that the ConfigProvider from Ant Design is correctly set up to use the dark theme algorithm. Additionally, you should verify that the AuthPage component and other components are correctly inheriting the theme settings. Here is a step-by-step guide to achieve this: 1. Set up the ConfigProvider with the dark theme algorithm: Ensure that your ConfigProvider is correctly configured to use the dark theme algorithm. This should be done at the root of your application.

   import { ConfigProvider, theme } from 'antd';
   import { BrowserRouter, Routes, Route, Outlet } from 'react-router-dom';
   import { Refine } from '@refinedev/core';
   import { AuthPage } from './path-to-your-auth-page';
   import { ThemedLayoutV2 } from '@refinedev/antd';
const App = () => (
     <ConfigProvider
       theme={{
         algorithm: theme.darkAlgorithm,
       }}
     >
       <BrowserRouter>
         <Refine
           routerProvider={routerBindings}
           notificationProvider={useNotificationProvider}
           resources={[
             { name: "users", list: "/users" },
             { name: "canvases", list: "/canvases" },
           ]}
           options={{
             syncWithLocation: true,
             warnWhenUnsavedChanges: true,
           }}
         >
           <Routes>
             <Route
               element={
                 <Authenticated>
                   <ThemedLayoutV2 Title={Title}>
                     <CanAccess>
                       <Outlet />
                     </CanAccess>
                   </ThemedLayoutV2>
                 </Authenticated>
               }
             >
               <Route index element={<NavigateToResource />} />
               <Route path="/users" element={<UserList />} />
               <Route path="/canvases" element={<CanvasList />} />
             </Route>
             <Route
               element={
                 <Authenticated fallback={<Outlet />}>
                   <NavigateToResource resource="users" />
                 </Authenticated>
               }
             >
               <Route
                 path="/login"
                 element={<AuthPage type="login" registerLink={false} />}
               />
               <Route
                 path="/forgot-password"
                 element={<AuthPage type="forgotPassword" />}
               />
               <Route
                 path="/update-password"
                 element={<AuthPage type="updatePassword" />}
               />
             </Route>
           </Routes>
         </Refine>
       </BrowserRouter>
     </ConfigProvider>
   );

   export default App;

   import { ConfigProvider, theme } from 'antd';
   import { BrowserRouter, Routes, Route, Outlet } from 'react-router-dom';
   import { Refine } from '@refinedev/core';
   import { AuthPage } from './path-to-your-auth-page';
   import { ThemedLayoutV2 } from '@refinedev/antd';
const App = () => (
     <ConfigProvider
       theme={{
         algorithm: theme.darkAlgorithm,
       }}
     >
       <BrowserRouter>
         <Refine
           routerProvider={routerBindings}
           notificationProvider={useNotificationProvider}
           resources={[
             { name: "users", list: "/users" },
             { name: "canvases", list: "/canvases" },
           ]}
           options={{
             syncWithLocation: true,
             warnWhenUnsavedChanges: true,
           }}
         >
           <Routes>
             <Route
               element={
                 <Authenticated>
                   <ThemedLayoutV2 Title={Title}>
                     <CanAccess>
                       <Outlet />
                     </CanAccess>
                   </ThemedLayoutV2>
                 </Authenticated>
               }
             >
               <Route index element={<NavigateToResource />} />
               <Route path="/users" element={<UserList />} />
               <Route path="/canvases" element={<CanvasList />} />
             </Route>
             <Route
               element={
                 <Authenticated fallback={<Outlet />}>
                   <NavigateToResource resource="users" />
                 </Authenticated>
               }
             >
               <Route
                 path="/login"
                 element={<AuthPage type="login" registerLink={false} />}
               />
               <Route
                 path="/forgot-password"
                 element={<AuthPage type="forgotPassword" />}
               />
               <Route
                 path="/update-password"
                 element={<AuthPage type="updatePassword" />}
               />
             </Route>
           </Routes>
         </Refine>
       </BrowserRouter>
     </ConfigProvider>
   );

   export default App;

2. Ensure the AuthPage component respects the theme: The AuthPage component should be set up to inherit the theme from the ConfigProvider. The provided code for the AuthPage component should work correctly if the ConfigProvider is set up properly. ```jsx import * as React from "react"; import { Link } from "react-router-dom"; import { AuthPage as AntdAuthPage, AuthProps } from "@refinedev/antd"; import { Image } from "antd"; import { StackBanner } from "../../components/banners"; const authWrapperProps = { style: { backgroundImage: "url('/bg.png')", backgroundRepeat: "repeat-x", }, }; const renderAuthContent = (content: React.ReactNode) => { return ( <div style={{ display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", }} > <Link to="/" style={{ marginBottom: " ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

Dark Theme on Pixels Admin

Did you find this page helpful?