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}
/>
);
};
<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}
/>
);
};
