Custom Theme not applying on Flowbite Accordion

[Mnehaal2000]

• I have searched the Issues to see if this bug has already been reported
• I have tested the latest version

Current behavior

Custom Theme not applying on Flowbite Accordion

[vitalijalbu]

yes I also have same issue, on focus for example...

[dhavalveera]

Hey @Mnehaal2000 ,

are you using TypeScript or JavaScript?

also, for your above code snippet, try below one code snippet:

const customFloorAccordionTheme: CustomFlowbiteTheme = {
    accordion: {
          // your remaining code
     }
}

or you can have other option as well:

const customFloorAccordionTheme: CustomFlowbiteTheme['accordion'] = {
    // your remaining code
}

either of this code snippet should work, can you try this @Mnehaal2000

[Mnehaal2000]

Hey @Mnehaal2000 ,

are you using TypeScript or JavaScript?

also, for your above code snippet, try below one code snippet:

const customFloorAccordionTheme: CustomFlowbiteTheme = {
    accordion: {
          // your remaining code
     }
}

or you can have other option as well:

const customFloorAccordionTheme: CustomFlowbiteTheme['accordion'] = {
    // your remaining code
}

either of this code snippet should work, can you try this @Mnehaal2000

I am using a combination and I have already tried your suggestion. Nothing seems to work. I am using other custom Themes in the project too using the same method and everything else works except this accordion theme So I am confused.

[YewoMhango]

I'm encountering the same problem as well. But another solution I tried was to provide the title and content parts of the theme directly to the Accordion.Title and Accordion.Content components, since the Docs say passing theme directly to any component, "will override the theme for that component, but not its children":

const accordionTheme = {
  root: {
    base: 'divide-y-2 border-2 divide-gray-200 border-gray-200 dark:divide-gray-600 dark:border-gray-600',
  },
  content: {
    base: 'p-5 first:rounded-t-lg last:rounded-b-lg dark:bg-gray-700',
  },
  title: {
    base: 'flex w-full items-center justify-between p-5 text-left font-medium text-gray-500 first:rounded-t-lg last:rounded-b-lg dark:text-gray-400',
    flush: {
      off: 'hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:hover:bg-gray-600 dark:focus:ring-gray-600',
      on: 'bg-transparent dark:bg-transparent',
    },
    open: {
      off: '',
      on: 'bg-gray-100 text-gray-900 dark:bg-gray-600 dark:text-white',
    },
  },
};

// ...

<Accordion theme={accordionTheme}>
  {resourceData.map((resource) => (
    <Accordion.Panel theme={accordionTheme}>
      <Accordion.Title theme={accordionTheme.title}>
        {/* ... */}
      </Accordion.Title>
      <Accordion.Content theme={accordionTheme.content}>
        {/* ... */}
      </Accordion.Content>
    </Accordion.Panel>
  ))}
</Accordion>

That worked for applying the required styles to the title and content components, but unfortunately the required styles still did not apply for the root accordion component itself.

As a workaround, I just applied those remaining styles using className to the root Accordion component

[xdanrj]

I'm encountering the same problem as well. But another solution I tried was to provide the title and content parts of the theme directly to the Accordion.Title and Accordion.Content components, since the Docs say passing theme directly to any component, "will override the theme for that component, but not its children":

const accordionTheme = {
  root: {
    base: 'divide-y-2 border-2 divide-gray-200 border-gray-200 dark:divide-gray-600 dark:border-gray-600',
  },
  content: {
    base: 'p-5 first:rounded-t-lg last:rounded-b-lg dark:bg-gray-700',
  },
  title: {
    base: 'flex w-full items-center justify-between p-5 text-left font-medium text-gray-500 first:rounded-t-lg last:rounded-b-lg dark:text-gray-400',
    flush: {
      off: 'hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:hover:bg-gray-600 dark:focus:ring-gray-600',
      on: 'bg-transparent dark:bg-transparent',
    },
    open: {
      off: '',
      on: 'bg-gray-100 text-gray-900 dark:bg-gray-600 dark:text-white',
    },
  },
};

// ...

<Accordion theme={accordionTheme}>
  {resourceData.map((resource) => (
    <Accordion.Panel theme={accordionTheme}>
      <Accordion.Title theme={accordionTheme.title}>
        {/* ... */}
      </Accordion.Title>
      <Accordion.Content theme={accordionTheme.content}>
        {/* ... */}
      </Accordion.Content>
    </Accordion.Panel>
  ))}
</Accordion>

That worked for applying the required styles to the title and content components, but unfortunately the required styles still did not apply for the root accordion component itself.

As a workaround, I just applied those remaining styles using className to the root Accordion component

It works for me, thx :)

[SutuSebastian]

Fixed by #1498 in flowbite-react@0.11.0 release.

Please see Docs - Customize - Theme.