I am trying to change the card color of a modal made with Flowbite-Svelte but I cannot find a way to get to it. Right now it is a blueish gray and I would like to change it.
Changing the bg
tailwind property only changes the backdrop but not the actual modal.
Does anyone have experience with Flowbite-Svelte?
Code:
<Button btnClass="tracking-[.35em] font-semibold drop-shadow-md text-xs bg-black py-4 px-8 text-white uppercase font-display rounded dark:text-black dark:bg-white" on:click={() => defaultModal = true}>
Default modal
</Button>
<Modal backdropClasses="bg-none backdrop-blur-md" class="font-display" title="Terms of Service" bind:open={defaultModal}>
<p class="text-base font-sans font-extralight leading-relaxed text-gray-500 dark:text-gray-400">
With less than a month to go before the European Union enacts new consumer privacy laws for its citizens,
companies around the world are updating their terms of service agreements to comply.
</p>
<p class="text-base font-sans font-extralight leading-relaxed text-gray-500 dark:text-gray-400">
The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
</p>
<svelte:fragment slot='footer'>
<Button btnClass="tracking-[.35em] font-semibold drop-shadow-md text-xs bg-black py-4 px-8 text-white uppercase font-display rounded dark:text-black dark:bg-white" on:click={() => alert('Handle "success"')}>Accept</Button>
<Button btnClass="tracking-[.35em] drop-shadow-md font-semibold text-black text-xs bg-white py-4 px-8 uppercase font-display rounded dark:bg-black dark:text-white dark:border" color="alternative">Decline</Button>
</svelte:fragment>
</Modal>
`