Adds screenshots to tools page. (#280)

* Adds screenshots to tools page.

* Adds dark-mode images.

* Creates light-dark shortcode for images.

* Uses new light-dark shortcode for @media images.

* Authorized commit.

---------

Co-authored-by: johnnymatthews <>

content/reference/tools.md

@@ -5,18 +5,26 @@ lead: "A list of useful tools, workflows, and projects that can help developers
 
 ## Polkadot Chain Explorer
 
+{{< image src="../images/polkadot-explorer-page.png" >}}
+
+<!--[![Screenshot of the Polkadot Chain Explorer page.](./images/polkadot-explorer-page.png)](https://polkadot.js.org)-->
+
 [polkadot.js.org/apps](https://polkadot.js.org/apps/?rpc=wss%3A%2F%2Ftestnet.entropy.xyz#/explorer)
 
 A one-size-fits-all blockchain explorer for Substrate-based chains, built by the [Polkadot.js team](https://polkadot.js.org/).
 
 ## Testnet Status
 
+{{< image src="../images/entropy-status-page.png" >}}
+
 [status.entropy.xyz](https://status.entropy.xyz/)
 
 A constantly updated list of registered accounts, programs, and validators.
 
 ## Uptime
 
+{{< image src="../images/uptime-entropy-page.png" >}}
+
 [uptime.entropy.xyz](https://entropydotxyz.statuspage.io/)
 
 The home of Entropy's real-time and historical data on system performance.

themes/hextra/layouts/shortcodes/image.html

@@ -0,0 +1,16 @@
+{{ $originalSrc := .Get "src" }}
+{{ $fileExt := path.Ext $originalSrc }}
+{{ $fileName := strings.TrimSuffix $fileExt $originalSrc }}
+
+{{ $darkSrc := printf "%s-dark%s" $fileName $fileExt }}
+
+<picture>
+    <source srcset="{{ $darkSrc }}" media="(prefers-color-scheme: dark)">
+    <img 
+        src="{{ $originalSrc }}" 
+        alt="{{ .Get "alt" | default "" }}"
+        {{ with .Get "class" }}class="{{ . }}"{{ end }}
+        {{ with .Get "width" }}width="{{ . }}"{{ end }}
+        {{ with .Get "height" }}height="{{ . }}"{{ end }}
+    >
+</picture>