Logo in dark/white mode

[macin]

Is there a way to upload two logos? One for light and one for dark mode? I can't seem to find a single that would look good in both, dark and light mode

[nomadjimbob]

This feature is now available in the next release. As per the updated documentation, save an image in the root namespace as icon-dark or in the images directory of the template

[macin]

I tried these exact steps but it does not seem to work for the dark mode. It keeps taking the base logo.

There are few more issues with the logo (maybe because mine is a flat rectangle, instead of square.

1. The logo displays only if the tpl»mikio»navbarUseTitleText is enabled.
2. I even entered the width of the logo and it does not show up. The only thing that workde was when I tested in dev tools adding min-width next to the max width, then the logo appeared

Note: tried above on RC1

[nomadjimbob]

I tried these exact steps but it does not seem to work for the dark mode. It keeps taking the base logo.

The project contains the code (10cc5c6) that makes this happen, however there is no release that includes this update at this stage.

If you want to try the bleeding edge updates, click the 'code' button and 'download zip'. Place the contents of this into the template folder of Dokuwiki.

There are few more issues with the logo (maybe because mine is a flat rectangle, instead of square.

1. The logo displays only if the tpl»mikio»navbarUseTitleText is enabled.

I am not sure here, I can't seem to replicate the problem you are describing. Do you have navbarUseTitleIcon enabled? What format is the image and where is it located?

[macin]

I will check the cutting edge version and will get back

As for the format, it is svg, located in root

[nomadjimbob]

I thought it might be the SVG format as it can be handled differently in browsers compared to PNG/GIF/WEBP, however I tried a test SVG located at https://www.svgrepo.com/svg/535115/alien and it worked as expected.

• Could you try that particular SVG and check if it works for you?
• Can I get a copy of the SVG you are using to test on my system?
• What browser are you using (I have tested Safari 18.1 (20619.2.1), Firefox 130.0, Chrome 128.0.6613.120)

[macin]

I tried the alien logo and no problem with thta. I suspect it is the shape that is causing problem. I am using Chrome Version 128.0.6613.119 (Official Build) (64-bit)

[nomadjimbob]

By default, the logo image is constrained to fit within a 3rem x 3rem container. SVG files typically render at 100% of their viewport, and CSS is used to scale them down to the appropriate size. It's unusual that your SVG isn't behaving this way.

The navbarTitleIconHeight and navbarTitleIconWidth properties set the maximum height and width for the logo. Normally, this allows the image to fill the available space while maintaining its aspect ratio.

The commit c611709 alters the navbarTitleIconHeight and navbarTitleIconWidth settings to directly set the height and width of the object, removing the max-height and max-width constraints. This approach leaves the final rendering up to the browser's discretion.

Leaving one of these settings blank should theoretically maintain the image's aspect ratio. However, this isn't guaranteed, as the final rendering is determined by the browser.

I have confirmed that setting the navbarTitleIconWidth to 3rem, leaving navbarTitleIconHeight blank, with your icon, it now renders correctly

[macin]

Hi @nomadjimbob , I have downloaded latest code and tested the image. K can confirm that the rectangular image works well, bit was not able to make the dark/white mode work on different image, even though I named the svg as suggested in the docs. Saved in the root folder.

[nomadjimbob]

root folder or root namespace?

[macin]

Sorry, root namespace