ThemeProvider example

+page.svelte

<script lang="ts">
  import { type ThemeConfig, ThemeProvider, Accordion, AccordionItem, Alert, Avatar, Badge, Heading, Banner, P, BottomNav, BottomNavItem, Breadcrumb, BreadcrumbItem, ButtonGroup, Button, GradientButton, Card } from "$lib";
  // theme types
  import type { AccordionItemTheme, BadgeTheme, BannerTheme, BottomNavTheme, BottomNavItemTheme, BreadcrumbTheme, BreadcrumbItemTheme, ButtonTheme, GradientButtonTheme, CardTheme } from '$lib';

  import { HomeSolid, WalletSolid, AdjustmentsVerticalOutline, UserCircleSolid } from "flowbite-svelte-icons";

  const theme: ThemeConfig = {
    accordion: "w-96 text-green-500",
    accordionitem: {
      button: 'text-purple-500'
    } as AccordionItemTheme,
    alert: 'bg-green-500 text-white',
    avatar: 'bg-blue-200 text-green-500',
    badge: {
      base: 'bg-purple-400 text-white',
    } as BadgeTheme,
    banner:{
      base:'mx-auto bg-yellow-400 border-blue-600',
    } as BannerTheme,
    bottomNav: {
      outer: 'border-red-500'
    } as BottomNavTheme,
    bottomNavItem: {
      base:'bg-blue-200',
      span:'bg-green-400'
    } as BottomNavItemTheme,
    breadcrumb:{
      list: 'bg-blue-100'
    } as BreadcrumbTheme,
    breadcrumbItem:{
      separator: 'text-green-500'
    } as BreadcrumbItemTheme,
    buttonGroup:'shadow-lg',
    button:{

    } as ButtonTheme,
    gradientButton:{

    } as GradientButtonTheme,
    card:{
      base: '',
      image: '',
    } as CardTheme,

  };
</script>

<Heading tag='h1'>ThemeProvider vs Default</Heading>
<Heading tag='h2' class='my-8'>ThemeProvider</Heading>
<ThemeProvider {theme}>
  <Heading tag='h3' class='my-8'>Accordion</Heading>
  <Accordion flush>
    <AccordionItem>
      {#snippet header()}
        <span>Section 1</span>
      {/snippet}
      <p>Content for section 1</p>
    </AccordionItem>
    <AccordionItem>
      {#snippet header()}
        <span>Section 2</span>
      {/snippet}
      <p>Content for section 2</p>
    </AccordionItem>
  </Accordion>
  <Heading tag='h3' class='my-8'>Alert</Heading>
  <Alert dismissable>Danger!</Alert>
  <Heading tag='h3' class='my-8'>Avatar</Heading>
  <Avatar dot={{ color: "red" }} />
  <Heading tag='h3' class='my-8'>Badge</Heading>
  <Badge dismissable rounded>Default</Badge>
  <Heading tag='h3' class='my-8'>Banner</Heading>
  <div class="relative w-96 h-96 border p-4">
    <Banner class='absolute'>
      <p class="me-8 flex items-center text-sm font-normal text-gray-500 md:me-0 dark:text-gray-400">
      Content
      </p>
    </Banner>
    <P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus unde ratione voluptatibus ex nobis nostrum eum aliquid sit vitae odio tempora a impedit ducimus omnis, itaque illo? Illo, voluptas natus!</P>
  </div>
  <Heading tag='h3' class='my-8'>Bottom Navigation</Heading>
  <div class="relative w-96 h-96 border p-4">
    <P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus unde ratione voluptatibus ex nobis nostrum eum aliquid sit vitae odio tempora a impedit ducimus omnis, itaque illo? Illo, voluptas natus!</P>
    <BottomNav position="absolute" innerClass="grid-cols-4">
    <BottomNavItem btnName="Home">
      <HomeSolid class="group-hover:text-primary-600 dark:group-hover:text-primary-500 mb-1 h-6 w-6 text-gray-500 dark:text-gray-400" />
    </BottomNavItem>
    <BottomNavItem btnName="Wallet">
      <WalletSolid class="group-hover:text-primary-600 dark:group-hover:text-primary-500 mb-1 h-6 w-6 text-gray-500 dark:text-gray-400" />
    </BottomNavItem>
    <BottomNavItem btnName="Settings">
      <AdjustmentsVerticalOutline class="group-hover:text-primary-600 dark:group-hover:text-primary-500 mb-1 h-6 w-6 text-gray-500 dark:text-gray-400" />
    </BottomNavItem>
    <BottomNavItem btnName="Profile">
      <UserCircleSolid class="group-hover:text-primary-600 dark:group-hover:text-primary-500 mb-1 h-6 w-6 text-gray-500 dark:text-gray-400" />
    </BottomNavItem>
  </BottomNav>
  </div>
  <Heading tag="h2" class='my-8'>Breadcrumb</Heading>
  <Breadcrumb aria-label="Solid background breadcrumb example" solid>
    <BreadcrumbItem href="/" home>Home</BreadcrumbItem>
    <BreadcrumbItem href="/">Projects</BreadcrumbItem>
    <BreadcrumbItem>Flowbite Svelte</BreadcrumbItem>
  </Breadcrumb>
  <Heading tag="h2" class='my-8'>Button Group</Heading>
    <ButtonGroup class="*:ring-primary-700!">
      <Button>Profile</Button>
      <Button>Settings</Button>
      <Button>Messages</Button>
    </ButtonGroup>
  <Heading tag="h2" class='my-8'>Buttons</Heading>
    <Button pill>Default</Button>
    <GradientButton shadow color="blue">Blue</GradientButton>
  <Heading tag="h2" class='my-8'>Card</Heading>
  <Card href="/cards" class="p-4 sm:p-6 md:p-8">
    <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
    <p class="leading-tight font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
  </Card>
</ThemeProvider>

<Heading tag='h2' class='my-8'>Default</Heading>

<Accordion flush>
    <AccordionItem>
      {#snippet header()}
        <span>Section 1</span>
      {/snippet}
      <p>Content for section 1</p>
    </AccordionItem>
    <AccordionItem>
      {#snippet header()}
        <span>Section 2</span>
      {/snippet}
      <p>Content for section 2</p>
    </AccordionItem>
  </Accordion>
  <Alert dismissable>Danger!</Alert>
  <Avatar dot={{ color: "red" }} />
  <Badge dismissable rounded>Default</Badge>