diff --git a/resources/js/components/rooms/RoomExperience.vue b/resources/js/components/rooms/RoomExperience.vue
index aed0935..0376512 100644
--- a/resources/js/components/rooms/RoomExperience.vue
+++ b/resources/js/components/rooms/RoomExperience.vue
@@ -16,6 +16,20 @@ const props = withDefaults(defineProps<RoomExperienceProps>(), {
 const page = usePage();
 const presenterMode = ref(false);
 const roomNotice = computed(() => page.props.roomNotice);
+const embeddedBackgroundColor = computed(() => {
+    if (!props.embedded) {
+        return undefined;
+    }
+
+    const backgroundColor = new URL(
+        page.url,
+        'https://embedded.invalid',
+    ).searchParams.get('background_color');
+
+    return backgroundColor && /^#[0-9a-f]{6}$/i.test(backgroundColor)
+        ? backgroundColor
+        : undefined;
+});
 const canFavorite = computed(
     () => !props.embedded && page.props.auth.user?.id != props.room.owner_id,
 );
@@ -35,6 +49,11 @@ const {
 
     <main
         class="min-h-svh bg-slate-900 px-3 py-6 text-white sm:px-6 md:flex md:min-h-0 md:flex-col md:overflow-hidden lg:px-10"
+        :style="
+            embeddedBackgroundColor
+                ? { backgroundColor: embeddedBackgroundColor }
+                : undefined
+        "
         :class="
             embedded
                 ? 'md:h-dvh'