Feature: embedded chat theme (#11581)

### What problem does this PR solve?

This PR closing feature request #11286. 
It implements ability to choose the background theme of the _Full screen
chat_ which is Embed into webpage.
Looks like that:
<img width="501" height="349" alt="image"
src="https://github.com/user-attachments/assets/e5fdfb14-9ed9-43bb-a40d-4b580985b9d4"
/>

It works similar to `Locale`, using url parameter to set the theme.
if the parameter is invalid then is using the default theme.

### Type of change

- [x] New Feature (non-breaking change which adds functionality)

---------

Co-authored-by: Your Name <you@example.com>

web/src/components/embed-dialog/index.tsx

@@ -22,6 +22,7 @@ import { SharedFrom } from '@/constants/chat';
 import {
   LanguageAbbreviation,
   LanguageAbbreviationMap,
+  ThemeEnum,
 } from '@/constants/common';
 import { useTranslate } from '@/hooks/common-hooks';
 import { IModalProps } from '@/interfaces/common';
@@ -36,6 +37,7 @@ const FormSchema = z.object({
   locale: z.string(),
   embedType: z.enum(['fullscreen', 'widget']),
   enableStreaming: z.boolean(),
+  theme: z.enum([ThemeEnum.Light, ThemeEnum.Dark]),
 });
 
 type IProps = IModalProps<any> & {
@@ -61,6 +63,7 @@ function EmbedDialog({
       locale: '',
       embedType: 'fullscreen' as const,
       enableStreaming: false,
+      theme: ThemeEnum.Light,
     },
   });
 
@@ -74,7 +77,7 @@ function EmbedDialog({
   }, []);
 
   const generateIframeSrc = useCallback(() => {
-    const { visibleAvatar, locale, embedType, enableStreaming } = values;
+    const { visibleAvatar, locale, embedType, enableStreaming, theme } = values;
     const baseRoute =
       embedType === 'widget'
         ? Routes.ChatWidget
@@ -91,6 +94,9 @@ function EmbedDialog({
     if (enableStreaming) {
       src += '&streaming=true';
     }
+    if (theme && embedType === 'fullscreen') {
+      src += `&theme=${theme}`;
+    }
     return src;
   }, [beta, from, token, values]);
 
@@ -181,6 +187,41 @@ function EmbedDialog({
                   </FormItem>
                 )}
               />
+              {values.embedType === 'fullscreen' && (
+                <FormField
+                  control={form.control}
+                  name="theme"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Theme</FormLabel>
+                      <FormControl>
+                        <RadioGroup
+                          onValueChange={field.onChange}
+                          value={field.value}
+                          className="flex flex-row space-x-4"
+                        >
+                          <div className="flex items-center space-x-2">
+                            <RadioGroupItem
+                              value={ThemeEnum.Light}
+                              id="light"
+                            />
+                            <Label htmlFor="light" className="text-sm">
+                              Light
+                            </Label>
+                          </div>
+                          <div className="flex items-center space-x-2">
+                            <RadioGroupItem value={ThemeEnum.Dark} id="dark" />
+                            <Label htmlFor="dark" className="text-sm">
+                              Dark
+                            </Label>
+                          </div>
+                        </RadioGroup>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
               <FormField
                 control={form.control}
                 name="visibleAvatar"