Can we use two different images for light and dark theme in sidebar?

[SumithChandran]

There is dark and light theme switcher available for docsify. Is there a way to use 2 images for sidebar one light theme and other for dark theme?

[sy-records]

Sidebar images? Are you referring to the logo?

Dark mode will show a pink logo.

Add it to index.html:

<style>
    @media (prefers-color-scheme: light) {
        .app-name-link img {
            content: url('https://raw.githubusercontent.com/docsifyjs/docsify/develop/docs/_media/icon.svg');
        }
    }

    @media (prefers-color-scheme: dark) {
        .app-name-link img {
            content: url('https://user-images.githubusercontent.com/7565692/35311593-3edd9102-00f2-11e8-98fb-38be1d0e650f.png');
        }
    }
</style>

Usually only the prefers-color-scheme: dark related style needs to be set separately.

docsify-darklight-theme

If you are using docsify-darklight-theme, it needs to be modified to look like this.

@media (prefers-color-scheme: light) {
    .app-name-link img {
        content: var(--docsify_logo_url,url('https://raw.githubusercontent.com/docsifyjs/docsify/develop/docs/_media/icon.svg'));
    }
}

@media (prefers-color-scheme: dark) {
    .app-name-link img {
        content: var(--docsify_logo_url,url('https://user-images.githubusercontent.com/7565692/35311593-3edd9102-00f2-11e8-98fb-38be1d0e650f.png'));
    }
}

and add config option

    window.$docsify = {
        darklightTheme: {
            dark: {
                docsify_logo_url: 'url(https://user-images.githubusercontent.com/7565692/35311593-3edd9102-00f2-11e8-98fb-38be1d0e650f.png)'
            },
            light: {
                docsify_logo_url: 'url(https://raw.githubusercontent.com/docsifyjs/docsify/develop/docs/_media/icon.svg)'
            }
        }
    }

[sy-records]

Please provide a full repo or source code.

A dark mode in effect means normal, and a light mode you can use the default.

[SumithChandran]

@sy-records
Here is the repo i created for testing
Test Moke.zip

[sy-records]

Are you referring to the fact that the logo doesn't change when you click here to switch?

[SumithChandran]

Yes

[SumithChandran]

It worked😀.
@sy-records thanks for digging deep through this and helping me.
Nice work👌

[mre]

Just in case someone finds this (already answered) thread again, if you use docsify-darklight-theme, you can simply add a variable as described above and refer to that in your style:

window.$docsify = {
  darklightTheme: {
    dark: {
      docsify_logo_url: "url(/_media/logo_dark.svg)"
    },
    light: {
      docsify_logo_url: "url(/_media/logo.svg)"
    },
  },
};

<style>
.cover-main img {
  content: var(--docsify_logo_url);
}
</style>

Notably you don't need to use media selectors (@media (prefers-color-scheme: dark) etc.) to make it work.
Change the image selector (.cover-main img ) to whatever element you want to modify based on the theme.