feat: implement login page image filter using native CSS

backend/chainlit/config.py

@@ -139,11 +139,36 @@
 # login_page_image = "/custom-background.jpg"
 
 # Custom login page image filter (optional)
-# Examples:
-# For dark mode only (default): "dark:brightness-[0.2] dark:grayscale"
-# For both modes: "grayscale"
-# No filter: ""
-# login_page_image_filter = "dark:grayscale"
+# Supported filter types:
+# - brightness: Adjusts the brightness, range 0-1 or higher, 1 is original brightness
+#   Example: brightness-[0.5] dims by half, brightness-[1.5] increases by 50%
+#
+# - contrast: Adjusts the contrast, range 0-1 or higher, 1 is original contrast
+#   Example: contrast-[1.5] increases contrast, contrast-[0.7] reduces contrast
+#
+# - opacity: Adjusts transparency, range 0-1, 1 is fully opaque
+#   Example: opacity-[0.8] sets 80% opacity
+#
+# - grayscale: Adjusts grayscale effect, range 0-1, 1 is full grayscale
+#   Example: grayscale-[0.5] adds 50% grayscale effect
+#
+# - blur: Adds blur effect, value in pixels
+#   Example: blur-[10px] adds 10 pixel blur
+#
+# Multiple filters can be combined with spaces
+# Use dark: prefix to apply in dark mode only
+# Use light: prefix to apply in light mode only
+#
+# Common combinations:
+# 1. Soft dark mode effect:
+# login_page_image_filter = "dark:brightness-[0.6] dark:grayscale-[0.3]"
+#
+# 2. High contrast artistic effect:
+# login_page_image_filter = "contrast-[1.4] dark:contrast-[1.6] dark:brightness-[0.5]"
+#
+# 3. Frosted glass effect:
+# login_page_image_filter = "blur-[8px] brightness-[1.1] dark:brightness-[0.7]"
+login_page_image_filter = "dark:brightness-[0.2] dark:grayscale"
 
 # Specify a custom meta image url.
 # custom_meta_image_url = "https://chainlit-cloud.s3.eu-west-3.amazonaws.com/logo/chainlit_banner.png"

frontend/src/lib/utils.ts

@@ -15,6 +15,35 @@ export const hasMessage = (messages: IStep[]): boolean => {
   );
 };
 
+export const generateFilterStyle = (filter?: string): string => {
+  if (!filter) return '';
+
+  const filterMap: Record<string, (value: string) => string> = {
+    'blur': (value) => `blur(${value})`,
+    'brightness': (value) => `brightness(${value})`,
+    'contrast': (value) => `contrast(${value})`,
+    'grayscale': (value) => `grayscale(${value})`,
+    'opacity': (value) => `opacity(${value})`
+  };
+
+  const filters = filter.split(' ');
+  const cssFilters = filters
+    .map(f => {
+      const match = f.match(/^(?:light:|dark:)?(\w+)-\[(.+?)\]$/);
+      if (match) {
+        const [_, filterName, value] = match;
+        const transformer = filterMap[filterName];
+        if (transformer) {
+          return transformer(value);
+        }
+      }
+      return '';
+    })
+    .filter(Boolean);
+
+  return cssFilters.join(' ');
+};
+
 export function hslToHex(hslStr: string): string {
   // Parse HSL string
   const values = hslStr

frontend/src/pages/Login.tsx

@@ -5,7 +5,7 @@ import { LoginForm } from '@/components/LoginForm';
 import { Logo } from '@/components/Logo';
 
 import { useQuery } from 'hooks/query';
-
+import { generateFilterStyle } from '@/lib/utils';
 import { ChainlitContext, useAuth } from 'client-types/*';
 
 export const LoginError = new Error(
@@ -78,6 +78,9 @@ export default function Login() {
     }
   }, [config, user]);
 
+  const imageFilter = config?.ui?.login_page_image_filter;
+  const filterStyle = generateFilterStyle(imageFilter);
+
   return (
     <div className="grid min-h-svh lg:grid-cols-2">
       <div className="flex flex-col gap-4 p-6 md:p-10">
@@ -108,10 +111,8 @@ export default function Login() {
               apiClient.buildEndpoint('/favicon')
             }
             alt="Image"
-            className={`absolute inset-0 h-full w-full object-cover ${
-              config?.ui?.login_page_image_filter ||
-              'dark:brightness-[0.2] dark:grayscale'
-            }`}
+            className="absolute inset-0 h-full w-full object-cover"
+            style={{ filter: filterStyle }}
           />
         </div>
       ) : null}