Dark mode: Grid example (#2368)

Co-authored-by: Julien Déramond <[email protected]>

site/content/docs/5.3/examples/grid/grid.css

@@ -1,14 +1,17 @@
 .themed-grid-col {
   padding-top: .75rem;
   padding-bottom: .75rem;
-  background-color: #eee; /* Boosted mod */
-  outline: 1px solid #ddd; /* Boosted mod */
+  background-color: var(--bs-secondary-bg); /* Boosted mod: instead of `rgba(112.520718, 44.062154, 249.437846, .15)` */
+  /* Boosted mod: no `border` */
+  outline: 1px solid var(--bs-border-color-translucent); /* Boosted mod */
 }
 
 .themed-container {
+  /* Boosted mod: no `padding` */
   padding-top: .75rem; /* Boosted mod */
   padding-bottom: .75rem; /* Boosted mod */
   margin-bottom: 1.5rem;
-  background-color: #b5e8f7;
-  outline: 1px solid #4bb4e6; /* Boosted mod */
+  background-color: var(--bs-secondary-bg); /* Boosted mod: instead of `rgba(112.520718, 44.062154, 249.437846, .15)` */
+  /* Boosted mod: no `border` */
+  outline: 1px solid var(--bs-border-color-translucent); /* Boosted mod */
 }

site/content/docs/5.3/examples/grid/index.html

@@ -86,9 +86,10 @@ <h2 class="mt-4">Two columns</h2>
     </div>
 
     <h2 class="mt-4">Full width, single column</h2>
-    <p class="text-warning">
-      No grid classes are necessary for full-width elements.
-    </p>
+    <div class="alert alert-warning">
+      <span class="alert-icon"><span class="visually-hidden">Warning</span></span>
+      <p>No grid classes are necessary for full-width elements.</p>
+    </div>
 
     <hr class="my-4">