TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-12-12 10:25:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

dynamic styling

Browse Source
This commit is contained in:
Max Peintner
2023-04-22 20:16:47 +02:00
parent f2b3d5ef7e
commit 1d9a858cea
3 changed files with 49 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/login/app/layout.tsx
View File

@@ -9,23 +9,25 @@ import { LayoutProviders } from "#/ui/LayoutProviders";
import { Analytics } from "@vercel/analytics/react";
import { ZitadelUIProvider } from "#/../../packages/zitadel-react/dist";
import ThemeWrapper from "#/ui/ThemeWrapper";
import { getBranding } from "#/lib/zitadel";
import { server } from "../lib/zitadel";
const lato = Lato({
weight: "400",
subsets: ["latin"],
});
export default function RootLayout({
export default async function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
const branding = await getBranding(server);
return (
<html lang="en" className={`${lato.className}`} suppressHydrationWarning>
<head />
<body>
{/* @ts-expect-error Server Component */}
<ThemeWrapper>
<ThemeWrapper branding={branding}>
<LayoutProviders>
<div className="overflow-y-scroll bg-[url('/grid-light.svg')] dark:bg-[url('/grid-dark.svg')]">
<GlobalNav />

13
apps/login/styles/globals.css
View File

@@ -12,3 +12,16 @@
@apply text-sm;
}
}
html {
--background-color: #ffffff;
--dark-background-color: #000000;
}
.bg-background-light-600 {
background-color: var(--background-color);
}
.dark .dark\:bg-background-dark-600 {
background-color: var(--dark-background-color) !important;
}

51
apps/login/ui/ThemeWrapper.tsx
View File

@@ -1,36 +1,39 @@
import { getBranding } from "#/lib/zitadel";
import { server } from "../lib/zitadel";
"use client";
const ThemeWrapper = async ({ children }: any) => {
console.log("hehe");
import { LabelPolicy } from "#/../../packages/zitadel-server/dist";
import { useEffect } from "react";
type Props = {
branding: LabelPolicy | undefined;
children: React.ReactNode;
};
const ThemeWrapper = ({ children, branding }: Props) => {
const defaultClasses = "bg-background-light-600 dark:bg-background-dark-600";
try {
const policy = await getBranding(server);
const darkStyles = {
backgroundColor: `${policy?.backgroundColorDark}`,
color: `${policy?.fontColorDark}`,
};
const lightStyles = {
backgroundColor: `${policy?.backgroundColor}`,
color: `${policy?.fontColor}`,
};
console.log(policy);
console.log(branding);
useEffect(() => {
if (branding) {
document.documentElement.style.setProperty(
"--background-color",
branding?.backgroundColor
);
document.documentElement.style.setProperty(
"--dark-background-color",
branding?.backgroundColorDark
);
}
}, []);
return (
<div className={defaultClasses} style={darkStyles}>
<div className={defaultClasses}>
{children}
{/* <style jsx>{`
--background-color: ${branding?.backgroundColor};
--dark-background-color: ${branding?.backgroundColorDark};
`}</style> */}
</div>
);
} catch (error) {
console.error(error);
return <div className={defaultClasses}>{children}</div>;
}
};
export default ThemeWrapper;