如何更改 Flowbite 模态背景颜色（使用 Vue3）

问：

我正在尝试使用 TailwindCSS/Flowbite 实现一个模态组件（在 Vue3 中）。我已经阅读了 Flowbite 提供的所有文档，但我仍然无法以编程方式更改背景颜色并显示/隐藏模态。关于最后一部分，我可以隐藏模态本身，但不能隐藏背景，背景仍然可见。我做错了什么？

<script>
    import { initFlowbite } from 'flowbite';
    import { Modal } from 'flowbite';

    export default {
        name: 'VbModal',
        props:{
            id: String
        },
        data(){
            return{
                modal: null
            }
        },
        methods:{
            closeModal(){
                this.modal.hide();
            },

            showModal(){
                this.modal.show();
            }
        },
        mounted(){
            
            const modalElement = document.getElementById(this.id);
            const modalOptions = {
                placement: 'bottom-right',
                backdrop: 'dynamic',
                backdropClasses:
                    'bg-red-900/50 dark:bg-red-900/80 fixed inset-0 z-40',
                closable: true,
                onHide: () => {
                    console.log('modal is hidden');
                },
                onShow: () => {
                    console.log('modal is shown');
                },
                onToggle: () => {
                    console.log('modal has been toggled');
                },
            }

            const instanceOptions = {
                id: this.id,
                override: true
            };

            this.modal = new Modal(modalElement, modalOptions, instanceOptions);

        }
    }
</script>

<template>
    <div :id="id" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
        <div class="relative w-full max-w-lg max-h-full">
            <div class="relative rounded-lg shadow bg-ubotics-650 border border-ubotics-500">
                <slot/>
            </div>
        </div>
    </div>

</template>

<style lang="">
    
</style>