single exec of theme setter

apps/login/ui/LayoutProviders.tsx

@@ -1,8 +1,6 @@
 "use client";
 
-import { ColorService } from "#/utils/colors";
 import { ThemeProvider, useTheme } from "next-themes";
-import { useEffect } from "react";
 
 type Props = {
   children: React.ReactNode;
@@ -12,9 +10,10 @@ export function LayoutProviders({ children }: Props) {
   const { resolvedTheme } = useTheme();
   const isDark = resolvedTheme && resolvedTheme === "dark";
 
-  useEffect(() => {
-    new ColorService(document);
-  });
+  //   useEffect(() => {
+  //     console.log("layoutproviders useeffect");
+  //     setTheme(document);
+  //   });
 
   return (
     <ThemeProvider

apps/login/ui/Theme.tsx

@@ -27,7 +27,7 @@ export default function Theme() {
       className={`${
         isDark
           ? "!bg-gray-800 dark:bg-background-dark-400"
-          : "!bg-gray-100 dark:bg-background-dark-400"
+          : "!bg-gray-200 dark:bg-background-dark-400"
       }
       relative inline-flex h-4 w-9 items-center rounded-full`}
     >

apps/login/ui/ThemeWrapper.tsx

@@ -1,35 +1,20 @@
 "use client";
 
-import { LabelPolicy } from "#/../../packages/zitadel-server/dist";
-import { ColorService } from "#/utils/colors";
+import { setTheme, LabelPolicyColors } from "#/utils/colors";
 import { useEffect } from "react";
 
 type Props = {
-  branding: LabelPolicy | undefined;
+  branding: LabelPolicyColors | undefined;
   children: React.ReactNode;
 };
 
 const ThemeWrapper = ({ children, branding }: Props) => {
   useEffect(() => {
-    const colorService = new ColorService(document, branding);
+    setTheme(document, branding);
   }, []);
 
   const defaultClasses = "bg-background-light-600 dark:bg-background-dark-600";
 
-  //   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}>{children}</div>;
 };