[typhoon] Color Logo dark/light

[jfouret]

Hi,

Is there a way to define specific colors for dark and light mode in the logo ? Maybe by modifying the style section of the svg code ? If yes could you provide me with a simple example with the grav logo with 2 colors for light and 2 alternative colors for dark ?

thx,

[rhukster]

probably the simplest way to do this is to simply have 2 logos.. one for light and on for dark. keep them the same size of course, just change the colors in each.

Assuming you have a custom theme created based on Typhoon, you can simply replace the contents of the templates/partials/logo.html.twig with your custom logo solution. Something like:

<div class="block dark:hidden">
  <svg class="logo__light">....</svg>
</div>
<div class="hidden dark:block">
  <svg class="logo__dark>...</svg>
</div>

This method of showing/hidding based on light/dark will work equally as well for PNG or JPG type logos, you are not restricted to SVGs.

While you could try to get manipulating the colors in the SVG itself changing via Tailwind classes, it's going to be complicated by a number of factors. How complex is the SVG? does it have multiple different colors, can you target them with CSS? etc. This is a much more advanced approach, and I don't recommened it for the average user. Try the approach I outlined above.

[jfouret]

Sorry for the lack of info.

I am using the typhoon premium theme using the admin graphical interface only. https://getgrav.org/premium/typhoon.

My logo is attached. For now, I found out that the "style strip option" does not strip color gradients. For me it's fine since my gradient colors are ok in both dark and light mode and the text colors are still edited with the "style strip option".

Since I found this alternative solution that is fine looking it's okay we can close.

Thanks,