Navbar logos are not working.

[otabekoff]

Docus is not getting logo-dark.svg and logo-light.svg files as logo for dark and light modes. I've replaced them with my own SVG logos. But it is not working.

My header settings of app.config.ts file are like below:

    header: {
      logo: true,
      showLinkIcon: true,
      exclude: []
    },

[otabekoff]

I looked for the node_modules folder and found AppHeaderLogo.vue component in @nuxt-themes/docus/components/app directory. Then I found this:

In the above image, it is told that logo constant value is what the value the user set in docus.value.header?.logo. Does it equal to docus.header.logo of app.config.ts?

Ok, the next, in the NuxtLink, component tag of Vue is used.

But below it is told to use Logo.vue component with v-else-if. It is only the docus logo. Else, the title is being used with v-else-if.

Let's now look at the v-if. It is written to the <component>.

It is <component :is="logo" v-if="logo && typeof logo === 'string'" />.

What means the :is="logo" if we set logo: true in app.config.ts, then it is equal to is="true".

Also, let's look at the v-if. Let's say we set logo: "/logo.svg" in app.config.ts. Then, v-if logic will be like this: "/logo.svg" && true.

So, as a final result we will have 3 options:

• Logo + Title
• Logo only
• Title only

This looks normal. But what about light mode logo and dark mode logo? Why doesn't below sytnax is not supported?

logo: {
    light: ""
    dark: ""
}

After you do some changes and make final edit. Please add more info about this in docus.dev website, please.

Additional researches:
I've set logo: "/logo.svg" also logo: "logo.svg" in the header of app.config.ts. But it doesn't work. I also have my custom logo.svg, logo-light.svg and logo-dark.svg files.

VSCode is saying logo accepts only Boolean or undefined values.

But it was intended to accept Boolean and string values. Do you know what is being?

[otabekoff]

If you are going to say "You should create a Logo.vue component and then use it. After that tag's is renders your Vue component as logo" as you did in AppHeaderLogo, why header.logo is not accepting string? Please, fix that. Also, it is a hard way to do it. the logo.dark and logo.light syntax is more easiest way of doing it for any user.

Also, what about removing of your Docus logo and then begin creating your docs with logo using logo.dark and logo.light syntax?

[YesidMarin]

Any update @bdrtsky, is this feature possible in a short time?

[bdrtsky]

@YesidMarin you can check this PR if you want #874
Should be released in few days.

[YesidMarin]

@bdrtsky thank you! I will be waiting for updates!"