How to show light mode and dark mode logo? #2493
-
|
How to toggle between two logo? for example, I can toggle between logo using <img alt="Light Mode Logo" class="block w-48 dark:hidden" src="/images/logo.png">
<img alt="Dark Mode Logo" class="hidden w-48 dark:block" src="/images/logo-white.png">Since DaisyUI's approach is different. How can I achieve that in DaisyUI? |
Beta Was this translation helpful? Give feedback.
Replies: 4 comments 2 replies
-
|
You can use a class name like this: Since daisyUI theme is defined like |
Beta Was this translation helpful? Give feedback.
-
|
I tried this in a Next.js project and it doesn't hide it. Does this work in Next.js? for info, the relevant sections in my Tailwind config file are: Thanks! |
Beta Was this translation helpful? Give feedback.
-
Framework doesn't matter. Can you share a small reproduction link? |
Beta Was this translation helpful? Give feedback.
-
|
what would be the best way to reproduce this? I`m using DaisyUI out of the box, and it automatically detects if the browser/system has light or dark mode. So I don't set the data-theme myself. (and it doesn't seem to be set at all in dev tool either, hence why ` [[data-theme=dark]_&]:hidden ' doesn't work). Question is, how does DaisyUI know how to set light or dark, and how can I display another icon depending on light/dark? |
Beta Was this translation helpful? Give feedback.
-
|
If you're not using In this case you can use Tailwind's For example: |
Beta Was this translation helpful? Give feedback.
-
|
Ok thanks a lot for this. And also for creating DaisyUI. Finally I found I had to remove the line I never thought of this as the daisyUI docs told me to put it in. https://daisyui.com/docs/themes/#-9 How to apply Tailwind's 'dark:' selector for specific themes Maybe adding one line of explanation/warning about this might help some people |
Beta Was this translation helpful? Give feedback.
You can use a class name like this:
Since daisyUI theme is defined like
<html data-theme="dark">,[[data-theme=dark]_&]:hiddenclass hides the element if the parent hasdata-theme="dark".Example:
https://play.tailwindcss.com/32M1pqHLPt