apply label policy

apps/login/ui/LayoutProviders.tsx

@@ -1,19 +1,24 @@
-import ThemeWrapper from "./ThemeWrapper";
+"use client";
+
+import { ThemeProvider, useTheme } from "next-themes";
 
 type Props = {
   children: React.ReactNode;
 };
 
 export function LayoutProviders({ children }: Props) {
+  const { resolvedTheme } = useTheme();
+  const isDark = resolvedTheme && resolvedTheme === "dark";
+
+  console.log(isDark);
   return (
-    // <ThemeProvider
-    //   attribute="class"
-    //   defaultTheme="system"
-    //   storageKey="cp-theme"
-    //   value={{ dark: "dark" }}
-    // >
-    /* @ts-expect-error Server Component */
-    <ThemeWrapper>{children}</ThemeWrapper>
-    // </ThemeProvider>
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="system"
+      storageKey="cp-theme"
+      value={{ dark: "dark" }}
+    >
+      <div className={`${isDark ? "ui-dark" : "ui-light"} `}>{children}</div>
+    </ThemeProvider>
   );
 }

apps/login/ui/ThemeWrapper.tsx

@@ -1,32 +1,35 @@
 import { getBranding } from "#/lib/zitadel";
 import { server } from "../lib/zitadel";
-import { use } from "react";
 
 const ThemeWrapper = async ({ children }: any) => {
   console.log("hehe");
-  //   const { resolvedTheme } = useTheme();
-  const isDark = true; //resolvedTheme && resolvedTheme === "dark";
+
+  const defaultClasses = "bg-background-light-600 dark:bg-background-dark-600";
 
   try {
     const policy = await getBranding(server);
 
-    const backgroundStyle = {
-      backgroundColor: `${policy?.backgroundColorDark}.`,
+    const darkStyles = {
+      backgroundColor: `${policy?.backgroundColorDark}`,
+      color: `${policy?.fontColorDark}`,
+    };
+
+    const lightStyles = {
+      backgroundColor: `${policy?.backgroundColor}`,
+      color: `${policy?.fontColor}`,
     };
 
     console.log(policy);
 
     return (
-      <div className={`${isDark ? "ui-dark" : "ui-light"} `}>
-        <div style={backgroundStyle}>{children}</div>
+      <div className={defaultClasses} style={darkStyles}>
+        {children}
       </div>
     );
   } catch (error) {
     console.error(error);
 
-    return (
-      <div className={`${isDark ? "ui-dark" : "ui-light"} `}>{children}</div>
-    );
+    return <div className={defaultClasses}>{children}</div>;
   }
 };
 

apps/login/ui/ZitadelLogo.tsx

@@ -17,22 +17,16 @@ export function ZitadelLogo({ height = 40, width = 147.5 }: Props) {
           width={width}
           src="/zitadel-logo-light.svg"
           alt="zitadel logo"
-          style={{
-            maxWidth: "100%",
-            height: "auto",
-          }}
+          priority={true}
         />
       </div>
       <div className="flex dark:hidden">
         <Image
           height={height}
           width={width}
+          priority={true}
           src="/zitadel-logo-dark.svg"
           alt="zitadel logo"
-          style={{
-            maxWidth: "100%",
-            height: "auto",
-          }}
         />
       </div>
     </>