Level 2
Did you find a solution to this?
Apr 14, 2022
5
Level 1
Is there a way to add light/dark version of the logo in Nova?
Hi, I see that the new Nova (v4) has the dark/light mode and supports branding, which lets me change the default logo. However, sometimes you need to have two logo versions for different backgrounds.
I have a logo that looks good in dark mode but is almost invisible in light mode. Is there a friendly way to provide two versions in config/nova.php?
Edit: The same goes with colors - my branding is dark red, which is fine on light mode, but trash on dark mode
Level 10
Nova inject svg file in html, so you can add tailwind classes to the svg file
<svg class="text-gray-700 dark:text-white fill-current">
....
<path ... fill="currentColor"/>
this work with simple "one color" logos, i'm not sure how to handle logos with multiple colors
7 likes
Level 7
@khalilmajdalawi Thank you so much for this!
1 like
Level 4
Any update on this?
Level 2
The way I solve this is to use the "currentcolor" CSS variable in the fill attribute of some of my paths inside the svg. "currentcolor" is the foreground colour that changes when you switch theme from light to dark and vice versa. khalilmajdalawi has shown this above, but mentioned "simple one color" logos, and that is not entirely true, because each path can have a different fill, so it can be used with multi-colour logos as well.
Of course, you can also add a tag inside your svg and define your own colours, e.g. with @media (prefers-color-scheme: dark) { ... } but I found that to be unreliable with some browsers. If you want to take this further, create your own stylesheet file and add it to the Nova pages (e.g. via a custom tool)
Please or to participate in this conversation.