Vue Themable Configuration - Flowbite

You can use this wrapper for styling components with no color prop(like tabs, dropdown etc.)

WARNING

WIP, Do not use it in production

Tabs

Select theme:

Blue Green Pink Purple Red

• First
• Second
• Third
• Fourth

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur debitis iste libero molestiae mollitia, optio sunt? A, consectetur distinctio, eaque harum iusto laudantium, molestiae nam odio officia pariatur vitae?

<template>
  <flowbite-themable :theme="theme">
      <fwb-tabs :variant="variant">
        ...
      </fwb-tabs>
  </flowbite-themable>
</template>

<script setup>
import { FwbTabs, FwbTab, FlowbiteThemable } from 'flowbite-vue'
const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
const variant = 'default' // see tabs docs
</script>

variant: pills

---

Select theme:

Blue Green Pink Purple Red

• First
• Second
• Third
• Fourth

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur debitis iste libero molestiae mollitia, optio sunt? A, consectetur distinctio, eaque harum iusto laudantium, molestiae nam odio officia pariatur vitae?

---

variant: underline

---

Select theme:

Blue Green Pink Purple Red

• First
• Second
• Third
• Fourth

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur debitis iste libero molestiae mollitia, optio sunt? A, consectetur distinctio, eaque harum iusto laudantium, molestiae nam odio officia pariatur vitae?

---

Dropdown

<template>
  <flowbite-themable :theme="theme">
      <fwb-dropdown>
        ...
      </fwb-dropdown>
  </flowbite-themable>
</template>

<script setup>
import { FwbDropdown, FlowbiteThemable } from 'flowbite-vue'
const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
</script>

Button

<template>
  <flowbite-themable :theme="theme">
      <fwb-button>
        ...
      </fwb-button>
  </flowbite-themable>
</template>

<script setup>
import { FwbButton, FlowbiteThemable } from 'flowbite-vue'
const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
</script>