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

我使用 TailwindCSS 和 DaisyUI(通过 CDN)。

使用 DaisyUI Dropdown 时,有什么方法可以更改下拉项的颜色吗?这包括下拉菜单本身的背景颜色,然后将鼠标悬停在项目上(CSS :hover),然后单击它(CSS :active)。

When Clicking (点击时)

到目前为止,我已经能够更改下拉菜单本身和悬停时的背景颜色。

<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>

当单击列表颜色(CSS 活动)时,我似乎无法获得:

.dropdown-active:active {
   background-color: #0B6339 !important; 
}
stack overflow (Tailwind - DaisyUI) Is there anyways to change hover and active colors of dropdown items?
原文答案

答案:

作者头像

您可以通过为 DaisyUI 定义自定义主题颜色来实现它。

将此块添加到 tailwind.config.js 并根据您的需要编辑颜色:

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',
        },
      },
    ],
  },

然后像 Tailwind 的颜色名称一样使用颜色类名称。

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