Handle light mode in a consistent way

styles/_cards.scss

@@ -144,6 +144,10 @@ a.card:hover h3 {
   border: 2px solid #232325;
 }
 
+.light .circled-logo {
+  border: none;
+}
+
 .card-deck {
   margin-top: 2.5rem;
   margin-left: (-$card-deck-margin);

styles/_docs.scss

@@ -18,6 +18,28 @@
   .concepts-doc-illustration {
     content:url(/img/graphics/concepts-docs-light.png)
   }
+
+  .use-cases {
+    .wallet-illustration {
+      content:url(/img/graphics/wallet-light.svg)
+    }
+
+    .token-illustration {
+      content:url(/img/graphics/tokens-light.png)
+    }
+
+    .connections-illustration {
+      content:url(/img/graphics/nodes-light.svg)
+    }
+  }
+
+  .quickstart-image {
+    content:url(/img/graphics/getting-started-pages-light.png)
+  }
+
+  .dev-tools-img {
+    content:url(/img/graphics/dev-tools-light.svg)
+  }
 }
 
 .dark {
@@ -34,7 +56,29 @@
   }
 
   .concepts-doc-illustration {
-    content:url(/img/graphics/concepts-docs.png)
+    content:url(/img/graphics/concepts-doc.png)
+  }
+
+  .use-cases {
+    .wallet-illustration {
+      content:url(/img/graphics/wallet-dark.png)
+    }
+
+    .token-illustration {
+      content:url(/img/graphics/tokens-dark.png)
+    }
+
+    .connections-illustration {
+      content:url(/img/graphics/nodes-dark.png)
+    }
+  }
+
+  .quickstart-image {
+    content:url(/img/graphics/getting-started-pages-dark.svg)
+  }
+
+  .dev-tools-img {
+    content:url(/img/graphics/dev-tools-dark.png)
   }
 }
 

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"
+        class="use-cases-img img-fluid mb-2 shadow {{imgClass}}"
-        src={{src}}
         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>