Docs: Don't use transparent backgrounds in images

[StevenLiekens]

The diagrams are impossible to read in Dark mode because they contain black text and shapes on a transparent background.

---

Document Details

⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.

• ID: d432d5bb-24a7-3bec-1e17-910c8129226e
• Version Independent ID: e41af96d-f015-a8e0-4449-7a508d7bccc8
• Content: Domain events. design and implementation
• Content Source: docs/architecture/microservices/microservice-ddd-cqrs-patterns/domain-events-design-implementation.md
• Product: dotnet
• Technology: dotnet-ebooks
• GitHub Login: @nishanil
• Microsoft Alias: nanil

[mairaw]

Thanks for your feedback @StevenLiekens.
@CESARDELATORRE can we generate non-transparent versions of the images for the e-books? It does look bad on Dark mode indeed:

[mairaw]

@CESARDELATORRE where we can get new images from? We need to make sure that the images for docs are generated with a background to not cause issues with dark theme. It has been a consistent feedback for the e-book on docs.

[StevenLiekens]

Suggestion: fix it with a style instead of replacing all the images.

.theme_night img {
  background-color: white;
}

[mairaw]

@StevenLiekens Let me check my engineering team what they think. Thanks for the suggestion!

[mvelosop]

@mairaw, could you find out if it's possible to change the css?

I verified @StevenLiekens' solution and it would solve the issue:

[mairaw]

I haven't received a response yet. @adkinn @DuncanmaMSFT can you please take a look at this suggestion?

[mairaw]

@adkinn @DuncanmaMSFT new ping on this. I'd like to know if we can fix this on the engineering side instead of replacing all images.

[mairaw]

Also tagging @nishanil per @CESARDELATORRE's comment
https://github.com/dotnet/docs/pull/8827#issuecomment-437480235

[mvelosop]

Another solution could be adding the style as html in the markdown, we should try first if the style added like this works: (haven't actually tried it)

<style>
    .theme_night img {
      background-color: white;
    }
</style>

[adkinn]

@mairaw unfortunately there is nothing currently available to help with this. You could work with @dend to get a new feature request submitted.

[mvelosop]

Thx @adkinn, it's a pity 🙁

@mairaw do you want to test including the above style in a page? If it works we'd have to update all the pages, but it's waaay easier and faster that updating all images 😓

[adkinn]

@mvelosop we also don't allow custom CSS like that, sorry :/

/cc @mairaw

[mvelosop]

Thanks for the info @adkinn.

Anyway I found the ImageMagick tool that can batch process all images to set a white background when transparent, so @mairaw let's just wait for the whole book to be merged and then I'll process all images into a single PR.

I'll leave the tested command here:

for %f in (media\*.png) do magick %f -background white -alpha remove media-fixed\%~nxf

You have to create the media-fixed folder for the new images.

[mairaw]

A coworker just referred the same tool to me @mvelosop:

consider https://imagemagick.org/script/index.php to script something like convert in.png -alpha off out.png or convert in.png -background black -alpha remove -alpha off out.png

Sounds like a plan!

[mvelosop]

Great 😊