Handle light mode in a consistent way

template/page-docs.html.jinja

@@ -55,11 +55,10 @@
     </div>
   {% endmacro %}
 
-  {% macro useCasesCard(subItems, title, src, id) %}
+  {% macro useCasesCard(subItems, title, imgClass, id) %}
     <div class="col">
       <img
-        class="use-cases-img img-fluid mb-2 shadow"
-        src={{src}}
+        class="use-cases-img img-fluid mb-2 shadow {{imgClass}}"
         alt="{{title}}"
         id={{id}}
       >
@@ -125,7 +124,7 @@
     {
       "title": "Build a Wallet",
       "id": "build-a-wallet",
-      "src": "/assets/img/backgrounds/docs-wallet@2x.png",
+      "imgClass": "wallet-illustration",
       "subItems": [
         {
           "description": "Use Specialized Payment Types",
@@ -140,7 +139,7 @@
     {
       "title": "NFTs",
       "id": "nfts",
-      "src": "/assets/img/backgrounds/docs-nft@2x.png",
+      "imgClass": "token-illustration",
       "subItems": [
         {
           "description": "NFT Conceptual Overview",
@@ -159,7 +158,7 @@
     {
       "title": "Run an XRP Ledger Node",
       "id": "run-an-xrp-ledger-node",
-      "src": "/assets/img/backgrounds/docs-node@2x.png",
+      "imgClass": "connections-illustration",
       "subItems": [
         {
           "description": "About the Server",
@@ -259,9 +258,9 @@
 
   <section class="text-left">
     <h4 class="pb-4">Use Cases</h4>
-    <div class="card-grid card-grid-3xN">
+    <div class="card-grid card-grid-3xN use-cases">
       {% for useCase in useCases %}
-        {{ useCasesCard(useCase.subItems, useCase.title, useCase.src, useCase.id)}}
+        {{ useCasesCard(useCase.subItems, useCase.title, useCase.imgClass, useCase.id)}}
       {% endfor %}
     </div>
   </section>
@@ -286,7 +285,6 @@
             </a>
           </div>
           <img
-            src="/assets/img/backgrounds/docs-quick-start.svg"
             alt="quick-start"
             id="quick-start-img"
             class="quickstart-image"
@@ -364,7 +362,6 @@
     <div class="card-grid card-grid-2xN">
       <div class="col d-flex align-items-center justify-content-center">
         <img
-          src="/assets/img/backgrounds/docs-devtools-@2x.png"
           class="dev-tools-img"
         >
       </div>