dark mode support & code highlighting

README.md

@@ -35,6 +35,8 @@ How to create a new blog post
 - That's all, the result goes to https://delta.chat/en/blog , and the
   [RSS-Feed](https://delta.chat/feed.xml).
 
+- If you have images of text with transparency (for example a mermaid diagram/flowchart), then consider proving an alternative image for darkmode like this `<img src="diagram-light.svg" data-dark-src="diagram-dark.svg" />`
+  - or if your image is simple and only black on white you can also try out `class="binary-image-invert-in-darkmode"` which uses css to invert the colors and blend it with the pge background.
 
 Testing changes
 --------------------------------------------------------------------------------

_layouts/default.html

@@ -95,6 +95,7 @@ <h1>{{page.header}}</h1>
 </p>
 </div>
 
+<script src="../assets/js/dark-theme-image-replacement.js"></script>
 </body>
 
 </html>

_posts/2023-06-28-webxdc-import-export.md

@@ -82,7 +82,7 @@ who are following our WebXDC work with interest.
 
 ## Stepping stones for an E2E "Next-Generation-Internet" 
 
-<img src="../assets/logos/logo_nlnet.svg" width="230" style="clear: both; float:right; margin-left:1em;" />
+<img src="../assets/logos/logo_nlnet.svg" data-dark-src="../assets/logos/logo_nlnet_white.svg" width="230" style="clear: both; float:right; margin-left:1em;" />
 
 Our work on introducing new I/O APIs for WebXDC apps was funded 
 through [NLNET Zero Entrust](https://nlnet.nl/entrust/), 

_posts/2023-08-11-xstore.md

@@ -186,7 +186,7 @@ We're also experimenting with a [web version](https://webxdc.org/apps) populated
 
 ## Thanks to NLNET and NGI for their support and vision!
 
-<img alt="NLNet Logo" src="../assets/logos/logo_nlnet.svg" width="140" style="float:right; margin-left:1em;" />  
+<img alt="NLNet Logo" src="../assets/logos/logo_nlnet.svg" data-dark-src="../assets/logos/logo_nlnet_white.svg" width="140" style="float:right; margin-left:1em;" />  
 Most of our efforts described above became possible
 through the support
 of the [NGI0 Entrust Fund](https://nlnet.nl/entrust),

_posts/2023-12-13-chatmail.md

@@ -8,7 +8,7 @@ com_id: 111574517097362272
 Today, we are unveiling **chatmail services**,
 making onboarding with Delta Chat a breeze, with peace of mind:
 
-<img alt="Chatmail logo" src="../assets/logos/chatmail.svg" width="160" style="float:right;" />
+<img alt="Chatmail logo" src="../assets/logos/chatmail.svg" width="160" style="float:right;" class="binary-image-invert-in-darkmode" />
 
 - **Convenience**: Get a chatmail address in a few seconds 
 
@@ -40,7 +40,7 @@ which we aim to keep running as a community service.
 
 ## How to make e-mail spammers sad, and users safe 
 
-<img src="../assets/blog/two-faces.jpg" width="140" style="float:right; margin-left:1em;" />
+<img src="../assets/blog/two-faces.jpg" width="140" style="float:right; margin-left:1em;" class="binary-image-invert-in-darkmode" />
 
 `nine.testrun.org` currently allows to send 60 messages per minute for any user
 and you can register multiple e-mail addresses.

_posts/2024-02-15-webxdc-m3.md

@@ -107,7 +107,7 @@ that allows to create and run your first web app within minutes.
 
 ## Psst, interested to move P2P web apps forward with us? 
 
-<img src="../assets/logos/logo_nlnet.svg" width="230" style="clear: both; float:right; margin-left:1em;" />
+<img src="../assets/logos/logo_nlnet.svg" data-dark-src="../assets/logos/logo_nlnet_white.svg" width="230" style="clear: both; float:right; margin-left:1em;" />
 There are many interesting webxdc developments evolving for 2024,
 not the least because of crucial funding support from NLNET
 who administers much of the EU's Next-Generation-Internet (NGI) funds,

_posts/2024-05-31-instant-onboarding.md

@@ -122,7 +122,7 @@ Chat profiles use servers only for end-to-end encrypted message transport.
 
 ## Are we turning our back on classic e-mail? 
 
-<img src="../assets/logos/chatmail.png" style="width:200px; float:right; clear:both; margin-left:.5em; margin-bottom:.2em;" />
+<img src="../assets/logos/chatmail.png" style="width:200px; float:right; clear:both; margin-left:.5em; margin-bottom:.2em;"  class="binary-image-invert-in-darkmode" />
 
 No. 
 
@@ -208,5 +208,5 @@ to provide a fast and secure basis for decentralized instant messaging.
 In other words, 
 Delta Chat is a messenger that fundamentally heeds the warning of XKCD 927 :) 
 
-<figure> <a href="https://xkcd.com/927/"><img src="https://imgs.xkcd.com/comics/standards_2x.png" width="500px" style="float:center; clear:both; margin-left:.5em; margin-bottom:.2em;" alt="XKCD 927 comic" /><figcaption>XKCD 927</figcaption> </a></figure>
+<figure> <a href="https://xkcd.com/927/"><img src="https://imgs.xkcd.com/comics/standards_2x.png" width="500px" style="float:center; clear:both; margin-left:.5em; margin-bottom:.2em;border: 14px white solid;" alt="XKCD 927 comic" class="binary-image-invert-in-darkmode" /><figcaption>XKCD 927</figcaption> </a></figure>