sass, global vars, components

apps/login/ui/Avatar.tsx

@@ -1,4 +1,4 @@
-import { Color, getColorHash } from "#/utils/colors";
+import { Color, ColorShade, getColorHash } from "#/utils/colors";
 import { useTheme } from "next-themes";
 import { FC } from "react";
 
@@ -44,7 +44,7 @@ export const Avatar: FC<AvatarProps> = ({
     credentials = initials;
   }
 
-  const color: Color = getColorHash(loginName);
+  const color: ColorShade = getColorHash(loginName);
 
   const avatarStyleDark = {
     backgroundColor: color[900],
@@ -64,9 +64,9 @@ export const Avatar: FC<AvatarProps> = ({
         size === AvatarSize.LARGE
           ? "h-20 w-20 font-normal"
           : size === AvatarSize.BASE
-          ? "w-38px h-38px font-bold"
+          ? "w-[38px] h-[38px] font-bold"
           : size === AvatarSize.SMALL
-          ? "w-32px h-32px font-bold"
+          ? "w-[32px] h-[32px] font-bold"
           : ""
       }`}
       style={resolvedTheme === "light" ? avatarStyleLight : avatarStyleDark}

apps/login/ui/GlobalNav.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { demos, type Item } from "#/lib/demos";
-import "#/styles/globals.css";
 import { ZitadelLogo } from "#/ui/ZitadelLogo";
 import Link from "next/link";
 import { useSelectedLayoutSegment } from "next/navigation";

apps/login/ui/LayoutProviders.tsx

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

apps/login/ui/Theme.tsx

@@ -35,7 +35,7 @@ export default function Theme() {
         aria-hidden="true"
         className={`${
           isDark ? "translate-x-5" : "translate-x-0"
-        } flex flex-row items-center justify-center h-4 w-4 transform rounded-full bg-white transition-all shadow dark:bg-background-dark-500 ring-1 ring-gray-200 dark:ring-gray-800 ring-offset-1 ring-offset-white dark:ring-offset-background-dark-500`}
+        } flex flex-row items-center justify-center h-4 w-4 transform rounded-full bg-white transition-all shadow dark:bg-background-dark-500 ring-1 ring-[#00000020] dark:ring-[#ffffff20] ring-offset-1 ring-offset-[#ffffff50] dark:ring-offset-[#00000005]`}
       >
         {isDark ? (
           <MoonIcon className="dark:text-amber-500 h-4 w-4" />

apps/login/ui/ThemeWrapper.tsx

@@ -2,6 +2,7 @@
 
 import { LabelPolicy } from "#/../../packages/zitadel-server/dist";
 import { ColorService } from "#/utils/colors";
+import { useEffect } from "react";
 
 type Props = {
   branding: LabelPolicy | undefined;
@@ -9,7 +10,9 @@ type Props = {
 };
 
 const ThemeWrapper = ({ children, branding }: Props) => {
-  const colorService = new ColorService(branding);
+  useEffect(() => {
+    const colorService = new ColorService(document, branding);
+  }, []);
 
   const defaultClasses = "bg-background-light-600 dark:bg-background-dark-600";