(Tailwind - DaisyUI) 有没有办法改变下拉项目的悬停和活动颜色？

Question

I use TailwindCSS with DaisyUI (via CDN).

When using DaisyUI Dropdown , is there any way for me to change the color of the dropdown item? This includes the background color of the dropdown itself, then hovering on item (CSS :hover), and clicking on it (CSS :active).

(When Clicking)

So far, I've been able to change the background color of the dropdown itself and when hovering.

<div class="dropdown">
    <div tabindex="0" class="m-1 btn clickables btn-green shadow">
        <p class="text-medium">Testing</p>
    </div>
    <ul tabindex="0" class="p-2 shadow menu dropdown-content bg-white text-black rounded-box w-52 text-sm">
        <li class="rounded hover:bg-gray-300 dropdown-active">
            <a href="page-one.html">Protecting your privacy</a>
        </li>
    </ul>
</div>

I can't seem to get when the list is clicked color (CSS active) with:

.dropdown-active:active {
   background-color: #0B6339 !important; 
}

Answer 1

You can achieve it by defining custom theme colors for DaisyUI.

Add this block to tailwind.config.js and edit colors regarding to your needs:

daisyui: {
    themes: [
      {
        'mytheme': {
          'primary': '#570df8',
          'primary-focus': '#4506cb',
          'primary-content': '#ffffff',
          'secondary': '#f000b8',
          'secondary-focus': '#bd0091',
          'secondary-content': '#ffffff',
          'accent': '#37cdbe',
          'accent-focus': '#2aa79b',
          'accent-content': '#ffffff',
          'neutral': '#3d4451',
          'neutral-focus': '#2a2e37',
          'neutral-content': '#ffffff',
          'base-100': '#ffffff',
          'base-200': '#f9fafb',
          'base-300': '#d1d5db',
          'base-content': '#1f2937',
          'info': '#2094f3',
          'success': '#009485',
          'warning': '#ff9900',
          'error': '#ff5724',
        },
      },
    ],
  },

Then use color class names just like Tailwind's color names.

<li class="hover:bg-secondary-focus">
  <a>Item 1</a>
</li>