[Feature Request] Images for light and dark theme

[okvalsralos]

Describe the solution you'd like docfx has a switcher in the header that lets readers choose between the light and the dark theme. If applicable authors should provide both the light and the dark version of every screenshot used in the documentation.

Additional context Add the _dark.png suffix to the name of the dark image version. This image will be then used when the user switches to the dark theme.

For example, save images as example.png and example_dark.png.

[BarkenBark]

+1

[CaseyHofland]

+1

[bitbonk]

Until this feature is implemented, do you known of any trick or workaround how to provide different images (and some icons) based on the theme?

[zhaparoff]

Or at least set light theme as default and disable theme switcher without deep diving into custom template creation...

[ghost]

It depends on the logo, but it's possible to create a transparent background logo which will work in light and dark themes.

[bouda19]

@bitbonk

You can achieve that by adding a custom template and a main.css file with the following content :

#logo {
    margin-right: 10px;
}

[data-bs-theme=dark] #logo {
    content:url("../images/dark-logo.png");
}

[data-bs-theme=light] #logo {
    content:url("../images/light-logo.png");
}

I have created a sample repo and a sample demo site if needed.