Support colored designs in design explorer on website

_includes/moon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!-- Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M279.1 512c78.8 0 151-35.8 198.8-94.8 28.3-34.8-2.6-85.7-46.2-77.4-82.3 15.7-158.3-47.3-158.3-130.8 0-48.4 26.1-92.3 67.4-115.8 38.7-22.1 29-80.8-15-88.9A257.9 257.9 0 0 0 279.1 0c-141.4 0-256 114.6-256 256 0 141.4 114.6 256 256 256zm0-464c13 0 25.7 1.2 38 3.5-54.8 31.2-91.7 90-91.7 157.6 0 113.8 103.6 199.2 215.3 177.9C402.6 434 344.4 464 279.1 464c-114.9 0-208-93.1-208-208s93.1-208 208-208z"/></svg>

_layouts/designlist.html

@@ -88,7 +88,7 @@ layout: default
 
     {%- comment -%}<!-- --- Heading -->{%- endcomment -%}
 
-    {%- assign heading_text = record.name -%}
+    {% assign heading_text = record.name %}
     {% if record.alias and record.alias.size %}
         {% capture heading_text %}{{ record.alias | join: ', ' | prepend: ' (' | prepend: record.name | append: ')' }}{% endcapture %}
         {% for alias in record.alias -%}
@@ -102,12 +102,18 @@ layout: default
     {% if record.tags -%}<p>
         {%- for tag in record.tags -%}
         <a href="{{ site.baseurl }}/{{ boxesVersion }}/box-designs-{{ tag }}.html"><button type="button" class="btn btn-outline-primary btn-sm">{{ tag }}</button></a>
-        {% endfor -%}</p>
+        {% endfor %}</p>
     {% endif %}
 
     {%- comment -%}<!-- --- Sample -->{%- endcomment -%}
 
+    {%- if record.tags and record.tags contains "color" -%}
+        <pre class="bxBgToggle" id="{{ record.name }}-sample"><code>{{ record.sample }}</code><div
+            onmouseover="this.parentNode.classList.add('bxDark');" 
+            onmouseout="this.parentNode.classList.remove('bxDark');">{%- include moon.svg -%}</div></pre>
+    {%- else -%}
         <pre><code>{{ record.sample | escape }}</code></pre>
+    {% endif %}
 
     {%- comment -%}<!-- --- Attribution -->{%- endcomment -%}
     <p>

_sass/_boxes.scss

@@ -143,6 +143,35 @@ code {
 }
 
 
+/*
+ * Light/Dark Background Toggle in Design Explorer
+ */
+pre.bxBgToggle {
+    position: relative;
+    div {
+        position: absolute;
+        right: $spacer/2;
+        top: $spacer/2;
+        svg {
+            fill: $headings-color !important;
+        }
+        &:hover {
+            cursor: pointer;
+            svg {
+                fill: $primary !important;
+            }
+        }
+    }
+    &.bxDark {
+        background-color: $dark;
+        color: $light;
+        code {
+            background-color: $dark;
+        }
+    }
+}
+
+
 /*
  * Images
  */