saadeghi / daisyui

๐ŸŒผ ๐ŸŒผ ๐ŸŒผ ๐ŸŒผ ๐ŸŒผ โ€ƒThe most popular, free and open-source Tailwind CSS component library
https://daisyui.com
MIT License
34.2k stars 1.31k forks source link

bug: Can't style kbd when using prose #2872

Closed TaylanTatli closed 2 months ago

TaylanTatli commented 9 months ago

What version of daisyUI are you using?

v4.7.2

Which browsers are you seeing the problem on?

All browsers

Reproduction URL

https://play.tailwindcss.com/hKQyJqbKxM

Describe your issue

KBD tag is unreadable when using dark themes. Test doesn't change with themes. Right now I'm using it like this:

kbd {
  @apply kbd kbd-sm text-base-content !important;
}
github-actions[bot] commented 9 months ago

Thank you @TaylanTatli for reporting issues. It helps daisyUI a lot ๐Ÿ’š
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

NikarashiHatsu commented 8 months ago

This is actually an easy workaround, just apply bg-base-100 dark:bg-base-content to the kbd and you're good to go:

<div class="prose" data-theme="">
  <div class="p-4">
    <kbd class="kbd bg-base-100 dark:bg-base-content">Keyboard</button>
  </div>
</div>

Screenshot 2024-03-28 at 03 43 11

Screenshot 2024-03-28 at 03 43 19

It might need some time to fix it on library-level, so give it a go.

kjeske commented 2 months ago

I'm using this:

:root .prose {
  --tw-prose-kbd: var(--tw-prose-body);
}