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

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

@@ -12,3 +12,16 @@
@apply text-sm; @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;
}

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

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